TinyMCE

Example

function init_editor() {
    /*
    tinymce.init({
      selector: '.editor'
    });
    return;
    */
    var editor_config = {
        path_absolute: "/",
        selector: "textarea.editor",
        plugins: [
            "autoresize",
            "image imagetools",
            "advlist autolink lists link image charmap print preview hr anchor pagebreak",
            "searchreplace wordcount visualblocks visualchars code fullscreen",
            "insertdatetime media nonbreaking save table contextmenu directionality",
            "emoticons template paste textcolor colorpicker textpattern"
        ],
        toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media",
        relative_urls: false,
        height: 300,
        language: 'zh_TW', 
        file_browser_callback: function (field_name, url, type, win) {
            var x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
            var y = window.innerHeight || document.documentElement.clientHeight || document.getElementsByTagName('body')[0].clientHeight;

            var cmsURL = editor_config.path_absolute + 'vendor/filemanager/dialog.php?type=0&field_id=' + field_name;


            tinyMCE.activeEditor.windowManager.open({
                file: cmsURL,
                title: 'Filemanager',
                width: x * 0.8,
                height: y * 0.8,
                resizable: "yes",
                close_previous: "no"
            });
        },
        setup: function (editor) {
            editor.on('change', function () {
                tinymce.triggerSave();
            });
        },
        //Show styles in editor content
        content_style: '.blockquote { font-size: 18px; font-weight: 700; margin: 0; padding: 25px 0 25px 40px; color: #101010; border-left: 3px solid #ff6600; } ' +
            '.blockquote.pullquote{ position: relative; z-index: 1; padding: 35px 20%; text-align: center; color: #fff; border: none; } .blockquote.pullquote::after { position: absolute; z-index: -1; top: 0; left: 0; display: block; width: 100%; height: 100%; content: ""; -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; background-color: #ff6600; }', 
        style_formats: [{
                title: 'H1',
                block: 'h1',
                classes: ''
            },
            {
                title: 'H2',
                block: 'h2',
                classes: ''
            },
            {
                title: 'H3',
                block: 'h3',
                classes: ''
            },
            {
                title: 'H4',
                block: 'h4',
                classes: ''
            },
            {
                title: 'H5',
                block: 'h5',
                classes: ''
            },
            {
                title: 'H6',
                block: 'h6',
                classes: ''
            },
            {
                title: '引用1',
                block: 'p',
                classes: 'blockquote',
                styles: {
                    'color': '#ff6600'
                }
            },
            {
                title: '引用2',
                block: 'p',
                classes: 'blockquote pullquote',
                styles: {
                    'color': '#FFF',
                    'background-color': '#ff6600'
                }
            }
        ]
    };

    tinymce.init(editor_config);
}

Reference: