1

I want to add my own control to tinymce editor (for example <editable />). This control must display form like:

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

No problems for now. I can do that. But I need to make it readonly (no problems with it as well - using noneditable plugin)

My problem is: if user press "Edit HTML Source", I must display <editable /> element only (without labels and textboxes).

I don't know if it is possible, but looking to the Embeded Media element - it shows image in editor, but replace it with iframe in HTML Source.

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 に答える