Question

我想将自己的控件添加到tinymce编辑器（例如<editable />）。此控件必须显示如下形式：

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

现在没问题。我能做到。但我需要将其设为readonly（也没有问题 - 使用不可编辑的插件）

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

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

Answer 1

我的结果有点简单。我只是从HTML源代码编辑器中删除了<cms:control />标记的内容。

on tinymce init make follow：

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

如何在tinymce中的HTML Source编辑器中显示不同的元素？

1 个答案: