如何操作tinyMCE dom(官方API似乎不起作用)?

时间:2017-03-19 作者:NextGenThemes

tinymce插件是否可以做到这一点?我认为访问iframe的其他方法不起作用或不推荐使用。

我有found this 在打印mce插件中尝试了这一点inside the TinyMCE Advanced plugin but it does not work.

var $ = tinymce.dom.DomQuery;
$(\'p\').attr(\'attr\', \'value\').addClass(\'class\');
我已经安装了tinymce高级插件,并尝试将这些行添加到打印插件中。插件被执行,打印对话框打开,但它对dom没有任何影响。WP是否有tinymce的完整版本?

/**
 * plugin.js
 *
 * Released under LGPL License.
 * Copyright (c) 1999-2015 Ephox Corp. All rights reserved
 *
 * License: http://www.tinymce.com/license
 * Contributing: http://www.tinymce.com/contributing
 */

/*global tinymce:true */


var mce_dom = tinymce.dom.DomQuery;
mce_dom(\'p\').attr(\'id\', \'arve\').addClass(\'arve-html-class\');
mce_dom(\'html\').attr(\'id\', \'arve\').addClass(\'arve-html-class\');

tinymce.PluginManager.add(\'print\', function(editor) {

    var mce_dom = tinymce.dom.DomQuery;
    mce_dom(\'p\').attr(\'id\', \'arve\').addClass(\'arve-html-class\');
    mce_dom(\'html\').attr(\'id\', \'arve\').addClass(\'arve-html-class\');

    editor.addCommand(\'mcePrint\', function() {
        editor.getWin().print();
    });

    editor.addButton(\'print\', {
        title: \'Print\',
        cmd: \'mcePrint\'
    });

    editor.addShortcut(\'Meta+P\', \'\', \'mcePrint\');

    editor.addMenuItem(\'print\', {
        text: \'Print\',
        cmd: \'mcePrint\',
        icon: \'print\',
        shortcut: \'Meta+P\',
        context: \'file\'
    });
});

2 个回复
最合适的回答,由SO网友:Abhishek Pandey 整理而成

希望您可以使用fallowing

// Sets class attribute on all paragraphs in the active editor
tinymce.activeEditor.dom.setAttrib(tinymce.activeEditor.dom.select(\'p\'), \'class\', \'myclass\');

// Sets class attribute on a specific element in the current page
tinymce.dom.setAttrib(\'mydiv\', \'class\', \'myclass\');
或者您可以像这样通过jquery添加Id

$(\'div\').find(\'p\').attr(\'id\', \'myid\');

SO网友:Mark Kaplun

(答案基于对问题的评论中的讨论)与其他插件争夺全球范围内的主导地位是一场毫无意义的战斗,尤其是在CSS的背景下,你根本无法获胜。就因为你有id="me" 在主体上,不要阻止插件对元素进行更具体的标识,并“赢得”您的。例如#me p 总是输给#myplugin .content p.

答案是使用唯一的类名,并在样式规则中尽可能具体。

另一种方法是依靠定制器让用户在更改短代码/设置的同时拥有(几乎)真实的前端体验。显然,这不如在编辑过程中应用样式好,但只要wordpress没有真正的前端编辑经验,就只能做到这么多。

(由于评论中的讨论,编辑了“破坏性”示例)

最后也是最重要的一点是,这种方法不会以任何方式扩展,因为html和body元素的ID只能有一个值,只有一个插件可以采用这种方法,如果有两个插件这样做,结果将是混乱的。