3

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'
    });
});
11
  • 4
    Why do you need to set an id to the <html> tag inside an iframe? Doesn't sound like a good idea. Please explain what you want to accomplish with it. There may be a better way to accomplish that without setting a custom id to the <html> tag.
    – Fayaz
    Mar 19, 2017 at 7:19
  • 1
    Why is it not a good idea? Because if continuous battle with themes styles i will begin to add a id to the html on the frontend to be able to increase CSS specificity so I don't have to go to bad practice extremes and use !important a lot. I have seen other plugins do that. I know the tinymce body has #tinymce and I can use that but since i include the exact same css from the frontend in tinymce I could save css. Mar 19, 2017 at 7:41
  • As a bad alternative and can repeat every css selector with #tinymce in front of it. I could also create a 2nd css tile and just replace my id with #tinymce in that but its all seem like a horrible solution. I think adding the same ID I use on the frontend is actually a good idea. Mar 19, 2017 at 7:41
  • And btw even if what I want to do would be stupid. The tinymce api seems to support a big subset of jquery for dom manipulation. So a example how to actually use it for various things could be very helpful for a lot of people. Mar 19, 2017 at 8:06
  • 1
    Here's how I deal with the scenario: wordpress.stackexchange.com/a/247841/2807 Apr 3, 2017 at 21:30

2 Answers 2

2
+50

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');

7
  • So you copy pasted a example form the tinyMCE 3.0 docs and "hope" this works? Not it does not and thank you for wasting my time WP includes 4.0. And are you trying to tell me with that jQuery line? I know how jquery works, my question is about content inside the tinymce iframe and jquery. Apr 3, 2017 at 20:34
  • ... does not work like that. Apr 3, 2017 at 20:49
  • This got voted down? It will absolutely work like this, as long as your code fires at the correct time. Apr 4, 2017 at 4:20
  • Actually I did not have an example so I just find an example from tinymce site for helping you and it also works for me Apr 4, 2017 at 7:09
  • If you can show me a full working WordPress example please? What is the correct time? I tried the code inside the tinymce print plugin (just because its small and I can execute the code on the push of the print button) and it did not work. And again this is tinyMCE 3.0 code so even if it works I like to know why because WP has 4.0 included. Maybe I just test this wrong inside a random plugin? If execution time is the issue then the 4.0 code maybe works as well. Apr 4, 2017 at 22:31
0

(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.

2
  • Comments are not for extended discussion; this conversation has been moved to chat.
    – fuxia
    Apr 4, 2017 at 23:26
  • This person did not want to understand my case, made up a example that is not realistic and makes no sense at all, would not happen in the real world. Told me that I should "let users figure out how my plugins intended style should look like" totally ridiculous. #arve .arve-thumbnail does in fact win over #content img and and this is the best way to do it. Prooven here Apr 5, 2017 at 1:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.