6

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

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

检查其评论表。基本上我将body的背景移到了html，并将“well”类设置为body。它是一个快速修复，我不太喜欢 tbh。必须有某种方法可以在编辑器主体内添加永久根块。

4

2 回答 2

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

希望能帮助到你。

于 2013-09-16T06:04:53.323 回答
0

您需要使用提供的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 匹配该正则表达式时，将拒绝用户更改它的任何尝试。

于 2013-03-15T03:52:24.793 回答