1

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

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

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

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

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

4

1 回答 1

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();           
    }
于 2013-03-14T13:21:11.153 回答