javascript - 如何仅显示使用 TinyMCE 4 格式化的文本

Question

我已经使用 TinyMCE 插件成功实现了完整的编辑器，但是我无法在没有编辑模式的情况下成功显示格式良好(使用 tinyMce css)的内容。

示例:

**

Here is what i can create in edition mode :

**

Here is what i get in display mode :

因为，您可以看到它根本不是相同的结果...

那么，我怎样才能在编辑器模式之外获得完全相同的渲染？

**

**

Answer 1

事实上，如果您不使用 tinymce.init 在您的 Javascript 中激活它，TinyMCE 不会应用 CSS

所以我做了一个小技巧:

我的 HTML:

                 <div class="tab-pane active" id="tab1">
                        <div id="description_content">
                            <div class="text_description_content"><div class="mce-content-body"> <textarea class="tmpTextArea">{{project.description|raw }} </textarea></div></div>
                        </div>

                        <div id="toAppend" class="mce-content-body"></div> 
                    </div>

我的 JS:

//activate tinyMCE
        tinymce.init({
            selector: '.tmpTextArea',
            menubar: false,
            plugins: [
                'advlist autolink lists link image charmap print preview anchor',
                'searchreplace visualblocks code fullscreen',
                'insertdatetime media table contextmenu paste code'
            ],
            toolbar: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
            content_css: '//www.tinymce.com/css/codepen.min.css'
        });
    //get what is inside the textarea editor
      var content = $('iframe').contents().find('#tinymce').contents();
//append it in a div
      $("#toAppend").append(content);
//disable edit 
      tinymce.activeEditor.hide();
//hide the textarea editor 
      $(".tmpTextArea").hide();

希望这对另一个人有帮助:)