In tinymce 5.0, my init contained
mode : "specific_textareas",
editor_selector : "mceEditor",
in order to convert any textarea with the class "mceEditor" into a tinymce editor. In 6.0, that doesn't seem to work. It seems that "mode" is no longer used, and I found some docs on their site that said you can now select a single textarea using an ID by specifying:
selector : "textarea#elementid"
but I wasn't able to find any info on selecting textareas by class. On a whim, I tried the following:
selector : "textarea.elementclass"
and it seemed to work. But since I didn't see any docs referencing selection by class, I wanted to find out if this truly is the way to select multiple textareas based on their class.
Thanks!
It is actually mentioned in the documentation. The selector option utilizes the default CSS selector syntax:
Selector configuration is required for TinyMCE integration. Selector
configuration uses CSS selector syntax to determine which elements on
the page are editable through TinyMCE.
Therefore, you were right when using
selector : "textarea.elementclass"
Related
I'm using Chrome dev tools to check my css selectors when writing E2E-Tests using Playwright (or Puppeteer).
To verify a selector is valid and can be found I use the cmd+f search-bar in Elements-Tab in DevTools like this:
But how can I find selectors inside shadow-root?
Just to make clear: This selector can be found via code. I just can't find it in the DevTools
This can be done in two stages using shadowRoot.
First assign element with shadow dom to a constant, then use querySelector to target element(s) inside shadow.
const element = document.querySelector('wc-article-editor'):
element.shadowRoot.querySelector('.myclass');
I have a custom button that insert some HTML in the editor
First block of code is the button action and the second one is how the HTML is inserted
Any idea why it is rewriting it that way and how to stop it?
I just managed to fix it, in the init function:
valid_children : 'pre[code]'
TinyMCE includes the ability to insert code samples into the editor via its Code Sample plugin:
https://www.tinymce.com/docs/plugins/codesample/
If you want to try to do this yourself you need to do a few things like using the protect configuration option to tell TinyMCE to allow your PHP tags. See this TinyMCE Fiddle for a basic example:
http://fiddle.tinymce.com/Qdgaab
I have a custom edit (browser page) for my dexterity content type. In template I have defined a form using Bootstrap and added some Angular JS code for form behavior. It is working. :)
I need to replace a simple textarea with rich text widget. So how can I render in my template the rich text widget (one that is normally used in dexterity)?
If you are using Mockup (not sure if anybody use it on Plone 4) you can find tips there: Obtaining the "default" mockup TinyMCE configuration on Plone 5
Otherwise (the Plone 4.3 version of TinyMCE) it's only a matter of CSS classes and configurations.
<textarea name="..."
class="pat-tinymce mce_editable"
data-mce-config JSONCONFIGURATION_HERE">
</textarea>
I've an add-ons that enable TinyMCE on simple forms; look at the cose to find how to obtain the JSON configuration: See rt.zptformfield.
I've also a blogpost about the approach I used there but it's in italian :-) - http://blog.redturtle.it/usare-widget-plone-in-semplici-template-html
It should suffice to apply the class mceEditor on the textarea.
If that shouldn't work, include the initialization in your template:
tinyMCE.init({
elements : "id-of-textarea",
});
Glad to see a lot of posts about tinymce but there's nothing here that helps me with my current problem.
What I am trying to do is work out how to add "code" to my text with tinymce.
Something like this
Does anyone know how I can do this.
Help would be appreciated.
Mandy
You will need to add pre to the tinymce init setting valid_elements
You need to add to the editor the Code Sample plugin to your editor.
This is the example code to include the plugin from the TinyMCE website.
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "codesample",
toolbar: "codesample"
});
The codesample plugin uses http://prismjs.com/ to embed the code samples within the editor and works out of the box. That is, when a user copies valid code syntax into the editable area the code will be automatically formatted according to Prism default CSS rules.
You need to add prism.js and prism.css to your page for syntax highlighting to work.
Then you will get the code sample button in your editor interface.
Here you can find the Documentation about.
When I input <iframe> with its HTML Source Editor, it's just filtered.
Is there an option to make it work with <iframe>?
Yes you can do this:
You should read in the documentation about valid elements.
You have to add valid elements in your tinymce init, otherwise tinymce will delete those elements:
Add:
extended_valid_elements : "iframe[src|width|height|name|align]",