TinyMCE shows normal textarea

Question

I'd like to use TinyMCE, but I don't get it working. Here is my initialisation:

<script src="/resources/tinymce/js/tinymce/tinymce.min.js" />
<script type="text/javascript">
tinyMCE.baseURL = "/resources/tinymce/js/tinymce/";
tinyMCE.init({
    editor_selector : "tinyed",
    theme : "modern",
    toolbar: 'insertfile undo redo |  bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | forecolor backcolor'
});
</script>

And I'd like to use it on this textarea:

<h:inputTextarea id="field" class="tinyed" />

When I run my project the textarea is shown and not my editor. The console shows no errors and from the TinyMCE documentation I don't get really smarter.

are you sure the `editor_selector` has the right value? – Kukeltje Apr 10 '18 at 16:32 — Kukeltje, Apr 10 '18 at 16:32

Kukeltje · Answer 1 · 2018-04-11T12:44:21.870

According to the documentation (it is there for a reason) your init is wrong. First of all the name of the 'editor_selector' should be 'selector' and the value should take a css selector so in your case '.tinyed'.

Complete init:

tinyMCE.init({
    selector : ".tinyed",
    theme : "modern",
    toolbar: 'insertfile undo redo |  bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | forecolor backcolor'
});

It's all in the docs (I'm no TinyMCE user, just know how to debug a little and read documentation)

And you can use different types of selectors as mentioned in the docs. Based on tag name, class or even id (but I'd choose more explicit id's, field is too generic). If you use id's be warned that the client-side id of a component is different from the server side id. How can I know the id of a JSF component so I can use in Javascript

TinyMCE shows normal textarea

1 Answers1