Reputation: 45
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.
Upvotes: 0
Views: 515
Reputation: 12337
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
Upvotes: 1