Question

Is this possible with a tinymce plugin? I think other ways to access the iframe are not working or not recommended.

I have found this And tried that in the printing mce plugin inside the TinyMCE Advanced plugin but it does not work.

var $ = tinymce.dom.DomQuery;
$('p').attr('attr', 'value').addClass('class');

I have installed the tinymce advanced plugin and tryed adding this lines to the print plugin. The plugin gets executed, the print dialog opens but it just does not to anything to the dom. Does WP has the full version of 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'
    });
});
Was it helpful?

Solution

Hope You can use 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');

or You can add Id by jquery like this

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

OTHER TIPS

(answer based on the discussion in the comments to the question) Fighting with other plugins for dominance on a global scope is a pointless battle, especially in the context of CSS, that you just can't win. Just because you have an id="me" on the body do not prevent a plugin to have a more specific identification of an element and "win" over your your. For example #me p will always lose to #myplugin .content p.

The answer is to use unique class names and be as specific as possible in you style rules.

A different approach is to rely on the customizer to let the user have a (almost) true front end experience while changing shortcodes/settings whatever. Obviously this is not as good as applying style during edit, but there is only so much that can be done as long as wordpress do not have a true front end editing experience.

(the "breaking" example was edited due to the discussion in the comments)

And last and not least thought - This approach do not scale in any way as due to the fact that there can be only one value to the ID of the html and body elements, only one plugin can take this approach and if there would be two plugins doing that the result will be chaos.

Licensed under: CC-BY-SA with attribution
Not affiliated with wordpress.stackexchange
scroll top