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

【问题标题】：How to display only text formatted with TinyMCE 4如何仅显示使用 TinyMCE 4 格式化的文本
【发布时间】：2017-05-22 17:16:44
【问题描述】：

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

例子：

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

这是我在显示模式下得到的：

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

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

【问题讨论】：

标签： javascript html css tinymce tinymce-4

【解决方案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();

希望这可以帮助另一个人:)

【讨论】：

【解决方案2】：

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

如果您希望内容看起来相同，则需要在编辑器内外使用相同的 CSS。

【讨论】：

是的，这就是重点。那么如何将此 CSS 应用于此文本？也许有一个允许这样做的javascript代码？因为我使用的是云部署
您希望外部内容看起来像在编辑器中的样子，还是让编辑器看起来像外部内容？
外部内容在编辑器中的样子
因此，将您在编辑器中使用的 CSS 添加到用于在编辑器外部呈现内容的页面。
我不知道如何获取 css。它不在 TinyMCE 包中，或者我是盲人

【解决方案3】：

我也遇到了这个问题我找到了一种解决方法：只需启用 inline mode 和 readyonly mode。

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

【讨论】：