Tinymce 添加 &nbsp答案

【问题标题】：Tinymce adding &nbspTinymce 添加 &nbsp
【发布时间】：2015-03-03 17:11:50
【问题描述】：

我正在尝试覆盖 peranhacms 中的默认 tinymce，就像这里建议的 Configure / override Piranha CMS html editor so as not to add &nbsp's to html 我已经花了大约一个小时试图解决这个问题。有很多资源可以解决这个问题，但无法解决。

这是我的 tinymce.init 的样子。

<script type="text/javascript" src="~/res.ashx/areas/manager/content/js/ext/tiny_mce/tinymce.min.js"></script>
<script type="text/javascript">
    tinymce.init({
        mode: 'specific_textareas',
        editor_selector: "editor",
        apply_source_formatting: false,
        cleanup_on_startup: false,
        trim_span_elements: false,
        cleanup: false,
        convert_urls: false,
        force_br_newlines: true,
        force_p_newlines: false,
        remove_linebreaks: false,
        convert_newlines_to_brs: false,
        forced_root_block: '',
        inline_styles : true,
        entity_encoding: 'raw',
        verify_html: false,
        //forced_root_block: false,
        validate_children: false,
        remove_redundant_brs: false,
        fix_table_elements: false,

        entities: '160,nbsp,38,amp,60,lt,62,gt',

        plugins: [
            "autoresize autolink code hr paste piranhaimage link"
        ],
        width: "100%",
        height: "340",
        autoresize_min_height: 340,
        @if (File.Exists(Server.MapPath("~/areas/manager/content/css/editor.css"))) {
        <text>content_css: "@Url.Content("~/areas/manager/content/css/editor.css")",</text>
        }
        toolbar: "bold italic underline | bullist numlist hr | formatselect removeformat | cut copy paste | link piranhaimage | code",
        paste_auto_cleanup_on_paste: false,
        paste_postprocess: function (pl, o) {
            // remove extra line breaks
            o.node.innerHTML = o.node.innerHTML.replace(/&nbsp;/ig, " ");
            alert("a1");
        },
        cleanup_callback: 'my_cleanup_callback',
    });
    function my_cleanup_callback(type, value) {
        alert("a2");
        switch (type) {
            case 'get_from_editor':
                // Remove &nbsp; characters
                value = value.replace(/&nbsp;/ig, ' ');
                alert("a3");
                break;
            case 'insert_to_editor':
            case 'submit_content':
            case 'get_from_editor_dom':
            case 'insert_to_editor_dom':
            case 'setup_content_dom':
            case 'submit_content_dom':
            default:
                break;
        }
        return value;
    }
</script>

这是我用来粘贴到 tinyice textarea 的 html 示例

<div class="catelog-box">
    <img src="images/dance.png" alt="dine">
    <div class="cat-detail">
    <h2>Dance</h2>
    <p>Dis purus arcu etiam auctor risus aliquam mid turpis eu vel, nunc rhoncus lacus natoque ridiculus...</p>          
  </div>
</div>

这就是它在浏览器源代码中的样子：

我设置了警报以检查 paste_postprocess 和 my_cleanup_callback 是否真的触发了，但它们不是。而且我仍然在 html 中有 &nbsp。

我试图设置cleanup: true 和paste_auto_cleanup_on_paste: true，但触发paste_postprocess 和my_cleanup_callback 没有帮助

您将如何解决 &nbsp 问题？

【问题讨论】：

标签： javascript html tinymce piranha-cms

【解决方案1】：

只需添加entity_encoding: 'raw' 即可解决问题。

【讨论】：

【解决方案2】：

以下代码清除了 tinymce 内容中的所有内容

tinymce.init({
    selector: "textarea",
    invalid_elements :'strong,bold,b,em,br,span,div,p,img,a,table,td,th,tr,header,font,body,h,h1,h2,h3,h4,h5',
    invalid_styles: 'color font-size text-decoration font-weight',
    menubar: false,
    toolbar:false,
    statusbar:false,
    forced_root_block : "",
    cleanup: true,
    remove_linebreaks: true,
    convert_newlines_to_brs: false,
    inline_styles : false,
    entity_encoding: 'raw',
    entities: '160,nbsp,38,amp,60,lt,62,gt',
 });}

【讨论】：

【解决方案3】：

TinyMCE 是一个选项和设置的怪物，但是鉴于您提供的链接并且您使用了TinyMCE is adding &nbsp instead of the space when using the word paste 的清理方法，您是否尝试过设置：

paste_auto_cleanup_on_paste: true

因为这是在您引用的示例中设置的。除了那个猜测之外，我不知道为什么事件没有触发。

最好的问候

哈坎

【讨论】：

【解决方案4】：

我知道这是旧的，但是将这个 CSS 属性添加到编辑器的元素可以解决问题。这不是 tinyMCE 问题，这是可编辑 div 的工作原理。

#editor {
    white-space: pre-wrap;
    word-wrap: break-word;
}

干杯

【讨论】：

【解决方案5】：

我通过为 defaultContent 选项添加一个零宽度空间 ('&#8203;') 解决了这个问题。 TinyMCE 代码似乎用不间断空格周围的段落标签替换空内容。

通过添加零宽度空间，它在 UI 中显示为空，但会阻止此后期处理。

例如：

let options = { 
   // [...]
   defaultContent: '&#8203;'
   // [...]
}

【讨论】：