tinyMCE add class to the automatic <p> tag

3
votes

In the tinyMCE editor the text that I enter automatically is wrapped with <p>, which is fine. I just want to add a class to that <p>.

Note: I do not want to add a class to ALL the p elements, just the one where the user clicks and begins typing.

Any help really appreciated.

2
jquerytinymce
UPDATE: In the tinyMCE editor the text that I enter automatically is wrapped with < p >, which is fine. I just want to add a class to that < p >. Note: I do not want to add a class to ALL the p elements, just the one where the user clicks and begins typing. Any help really appreciated. - Chad Caldwell
which p tag are you referring too, the text itself is put in an iframe - SpYk3HH

2 Answers

1
votes

You should use the tinymce javascript API for this purpose:

editor = tinymce.get('your_editor_id');
$(editor.selection.getNode()).parents('p:first').addClass('your_class');

Here is a non-jquery solution:

editor = tinymce.get('your_editor_id');
editor.selection.getNode().closest("p:first").setAttribute("class", "your_class");
0
votes

Try this:

var tmceIframe = $(".mceIframeContainer iframe")[0].contentDocument || $(".mceIframeContainer iframe")[0].contentWindow.document;

$(tmceIframe).find("p").addClass("test")

or as one line:

$($("iframe")[0].contentDocument || $("iframe")[0].contentWindow.document).find("p").addClass("test")

in the second example i make it shorter by going straight to the iframe, however, this could be an issue if you have more than one iframe on the page, u may want to use an element id to specify, like on the wrapper