如何仅显示使用 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

猜测您在编辑器中使用 CSS 但在编辑器外部呈现内容时未使用相同（或任何）CSS。

如果你想让事情看起来一样，你需要在编辑器内外使用相同的 CSS。

Answer 2

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

激活它

所以我做了一个小改动：

我的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();

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

Answer 3

我也遇到了这个问题，我找到了一种修复方法：只需启用 内联模式 和 readyonly 模式 .

tinymce.init({
    selector : 'div.get_content_tinyMCE',
    inline: true,
    readonly: 1
});

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

How to display only text formatted with TinyMCE 4

html

javascript

css

tinymce

tinymce-4