0

I'm not whether this question is a duplicate, and I'm sorry if it is.

I have this plugin that works on the admin side. There, I have a page on which I need to print at least one TinyMCE editor. After reading the codex, I figured out that I could print one to the front-end using wp_editor.

<?php wp_editor("Some text", "my-editor");?>

However, I need to make some changes to this editor on certain events. For instance, there's a case where the editor should be hidden on a button click; I also need to get texts from and into the editor's text area in certain situations, this should be done dynamically via JS/JQuery.

I thought that it would be possible to do all those things by just selecting the editor id (my-editor) just like any other element. Things didn't turn out the way I expect. I've tested some JQuery, here's how it might look like:

$("#btn-hide-editor").click(function() {
    $("#my-editor").css("display", "none");
});

For this specific case of making the display property equal none, I've also tried to wrap the editor with a div and, then, make that div "display: none". It doesn't work either.

I would be grateful if anyone could point out what I'm missing here and what might be a solution.

EDIT 1:

This "issue" only occurs when on the Visual tab of the editor. My code seems to work for the Text tab. Ideally, I wish to be a be able to use the Visual tab, so this is still an issue.

1 Answer 1

0

ok you need to remove the wrap div of editor like :

$("#btn-hide-editor").click(function() {
    $("#wp-my-editor-wrap").css("display", "none");
});

wrap div id Consists of wp-[your-id]-wrap

4
  • Hey, it worked! This is exactly what I was looking for. Thanks, man! Commented Jan 7, 2022 at 6:41
  • Sabry, I also need to change the text inside the Visual editor on button click. Is there a way similar to your solution to make this? I tried jQuery('#wp-my-editor-wrap').val(example_value); but it didn't word. Should I be using another id? Commented Jan 7, 2022 at 6:51
  • This way you can change the content within the editor : tinymce.get("my-editor").setContent("<p>Hello world!</p>"); Commented Jan 7, 2022 at 7:26
  • It worked again, that's awesome. Thank you once more :) Commented Jan 7, 2022 at 8:20

Your Answer

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

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