Question

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

示例：

**

以下是我可以在编辑模式下创建的内容：

**

以下是显示模式：

正如你所看到的那样结果不一样......

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

**

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

希望这可以帮助另一个人：）

Answer 2

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

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

Answer 3

我也遇到了这个问题，我发现了一种解决方法：只需启用内联模式和就绪模式。

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

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

3 个答案: