Question

我想在tinymce内容体中添加一个<div class="well">包装器。但我不希望它与内容一起保存。所以它只会改进WYSIWYG，因为发布时内容会显示在<div class="well"></div>中。使用tinymce时，此包装器应该是不可删除的。有什么想法吗？

更新这是一个例子： http://unsalkorkmaz.com/twitter-embeds-in-wrong-language/

检查其评论表。基本上我将身体的背景移动到html并且对身体做了“好”的课程。它是一个快速修复，我不喜欢很多tbh。必须有一些方法可以在编辑器主体中添加永久根块。

Answer 1

我想拥有相同的功能，这就是我解决它的方法（使用Jquery进行DOM操作）：

$('textarea#id_body').tinymce({
    ....
    ....
    init_instance_callback : make_wysiwyg
});

这就是make_wysiwyg代码的样子：

var make_wysiwyg = function(inst){
    var tmceIframe = $(".mceIframeContainer iframe")[0].contentDocument || $(".mceIframeContainer iframe")[0].contentWindow.document;
    $(tmceIframe).find("body#tinymce article").wrapInner('<div class="post-content"/>');
}

现在，要删除我们添加的这个额外的html，您可以在表单提交按钮上执行onClick事件，并在调用form.submit之前调用以下函数：

var strip_wysiwyg = function() {
    var tmceIframe = $(".mceIframeContainer iframe")[0].contentDocument ||     $(".mceIframeContainer iframe")[0].contentWindow.document;
    $post_content_wrapper = $(tmceIframe).find("body#tinymce div.post-content");
    $post_content = $post_content_wrapper[$post_content_wrapper.length-1];
    $($(tmceIframe).find("body#tinymce")[0]).html($($post_content).html());
};

希望它有所帮助。

Answer 2

您需要使用提供的save_callback来加入TinyMCE的保存过程。

这将允许您指定在TinyMCE完成保存之前调用的函数，允许您注入内容。

一个简单的例子，使用jQuery来处理div插入：

function add_custom_div(element_id, html, body) {
        var dom = $(html);
        if ($('div.well').length < 1)
        {
            dom.wrap("<div class='wrap' /><div class='well'");
            html = dom.html();
        }
        return html;
}

tinyMCE.init({
        ...
        save_callback : "add_custom_div"
});

如果您需要确保div始终存在于TinyMCE内部，并且用户无法删除它，您将需要使用noneditable_regexp选项。

通过此属性，您可以提供正则表达式，当与TinyMCE匹配时，将拒绝用户更改它的任何尝试。

如何将TinyMCE永久包装器添加到内容区域

2 个答案: