javascript - 如何在tinymce的HTML源代码编辑器中显示不同的元素？

Question

我想将自己的控件添加到tinymce编辑器(例如 <editable /> )。 该控件必须显示如下形式:

<div class="editable">
<label>Test<input type="text" /></label>
<label>Test2<input type="text" /></label>
</div>

暂时没有问题。我能做到。 但我需要将其设为只读(也没有问题 - 使用不可编辑的插件)

我的问题是: 如果用户按“编辑 HTML 源”，我必须显示 <editable />仅元素(没有标签和文本框)。

我不知道这是否可能，但期待 Embeded Media元素 - 它在编辑器中显示图像，但在 HTML 源代码中将其替换为 iframe。

Answer 1

我的结果稍微简单一些。 我只是删除 <cms:control />来自 HTML 源代码编辑器的标记内容。

在tinymce init 上进行以下操作:

 ed.onPreInit.add(function () {
        ed.parser.addNodeFilter('cms:control', function (nodes) {
            var i = nodes.length;

            while (i--)
                objectToHtml(nodes[i], ed.schema);
        });

        ed.serializer.addNodeFilter('cms:control', function (nodes, name, args) {
            var i = nodes.length, 
                node;

            while (i--) {
                node = nodes[i];
                htmlToObject(node, args);
            }
        });
    });

    function objectToHtml(node, schema) {
        node.empty();

        var html = '<label>Test<input type="text" /></label>' +
                   '<label>Test2<input type="text" /></label>';                     

        var parser = new tinymce.html.DomParser({validate: true}, schema);
        var rootNode = parser.parse(html);

        node.append(rootNode);           
    }

    function htmlToObject(node, args) {
        node.empty();           
    }