I have a tinymce 4.7.4 field.
I have applied inline option according to the documentation (https://www.tinymce.com/docs/configure/editor-appearance/) and it returns a js error? So tinymce field breaks.
Could not initialize inline editor on invalid inline target element <textarea id="Description" class="text ui-widget-content ui-corner-all input-sm tinymce" cols="20" name="Description" rows="2">
The snippet:
tinymce.init({
selector: "textarea",
inline: true,
toolbar: "undo redo | bold italic | bullist numlist"
});
TinyMCE's inline mode does not work on <textarea> elements - it needs to be placed on block elements in the HTML page.
The most common choice would be a <div>. Here is an example:
http://fiddle.tinymce.com/2ggaab
Related
I'm trying to understand why I get the following error whilst loading the TinyMCE init function tinymce.init:
Uncaught TypeError: Cannot read properties of undefined (reading 'length')
at tinymce.min.js:9:212344
at tinymce.min.js:9:212865
at M.map (tinymce.min.js:9:2228)
at tinymce.min.js:9:212099
at Object.setContent (tinymce.min.js:9:212928)
at tinymce.min.js:9:225948
at tinymce.min.js:9:225964
at Object.map (tinymce.min.js:9:75810)
at Cy (tinymce.min.js:9:225908)
at FR.resetContent (tinymce.min.js:9:385523)
The problem arises when I use a generic selector for textarea in the init code, however when I change textarea to something more meaningful, like a textarea ID, selector: '#e-content', I no longer get this error.
Rather than just turn a blind eye and forget about it knowing its fixed (for now), does anyone know why this is presenting an error?
Here is my full TinyMCE 6 init code:
tinymce.init({
selector: '#e-content',
toolbar_mode: 'wrap',
plugins: 'image, media, table',
toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent forecolor backcolor | image media | table',
tinycomments_mode: 'embedded',
});
Its worth noting that even with the selector set to textarea, the element is still parsed and displayed as a TinyMCE rich content editor.
I am using TinyMCE V5 to enable my users to write email templates.
Since we're dealing with email templates, there's the Outlook problem. Outlook does not support a wide variety of styles and elements.
Here I am focused on aligning images in a way that Outlook can understand.
TinyMCE default implementation of alignment for images is:
for right alignment > adds style="float:right;" to the img tag
for center alignment > adds style="display:block;margin-left:auto;margin-right:auto;" to the img tag
Outlook doesn't support float nor auto margins.
Is there a way I can override how TinyMCE does alignment for images?
If so, I'd add text-align:right to the p tag, and make img have display:block.
I am aware that this would make it impossible to have two images aligned to different sides in the same paragraph, and I'm OK with that.
I opened a support ticket with Tiny, and they were quick and helpful in finding the solution, which was to use the formats option like so:
tinymce.init({
selector: "textarea",
plugins: ["code", "image", "paste"],
toolbar: "bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | image",
formats: {
alignleft: {selector: 'p', styles: {'text-align':'left'}},
aligncenter: {selector: 'p', styles: {'text-align':'center'}},
alignright: {selector: 'p', styles: {'text-align':'right'}}
},
});
Thought I should do a new question rather than extend the other, sorry if that was the wrong thing to do.
I am having another issue with TinyMCE. When I want enter something like a single dash, when I submit my changes the editor will just remove it and I would have to 2 dashes in order to show 1. Of course I would know what to do but I don't want to make my website live expecting the people using it to know that they have to do that. Is there a way to disable the html formatting TinyMCE does?
This is my current setup:
tinymce.init({
selector: "textarea",
allow_html_in_named_anchor: true,
valid_elements: "*[*]",
verify_html: false,
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste",
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
});
Is anyone able to help?
Thanks
TinyMCE will not do anything (on its own) to a single backslash that you type into the editor.
Open this TinyMCE Fiddle:
http://fiddle.tinymce.com/HLgaab/7
...and type in a single backslash. You will see in the adjacent <div> that the single backslash is maintained.
You will also note that if you are using JavaScript to process the HTML as a string that the backslash has a special meaning and must be escaped.
For example, if you are trying to load content into the editor using JavaScript you would have to properly escape the backslash so that JavaScript does not interpret it incorrectly:
editor.setContent('<p>pizza\\burger</p>');
...is correct but...
editor.setContent('<p>pizza\burger</p>');
...is incorrect and the \b is treated as an escape sequence as opposed to simple characters.
If you are pre or post processing the content using JavaScript you need to properly escape the content.
hi i'm using tinymce for react from this doc TinyMCE Doc link
and it works but i get this warning from console
im using "next": "^8.0.1", and #tinymce/tinymce-react": "^3.0.1"
so why this happen? anyone can help me? thanks
Seeing as you're using Next.js, this issue usually happens when you're initializing something in your render method or Functional Component function body that should properly belong in a lifecycle handler.
If you don't have a particular reason to server-render TinyMCE, you can try to do it on the client side only.
Try moving some of the code that initializes TinyMCE in your componentDidMount or useEffect Hook (depending on whether you're using a Class Component or Functional Component with Hooks).
This will both avoid the SSR vs browser mismatch issues and ease the load on your server.
Now in 2020, it possible to use dynamic import in Next.js. With ssr: false option.
Official Doc
I still face this problem using nextjs v9.x.x with #tinymce/tinymce-react v3.8.1.
The easy way is to add a fixed id prop to the Editor component like this:
<Editor id="YOUR_FIXED_ID" init={{...tiny_mce_options}} />
It's working for me. Here is complete code for editor:
<Editor
id='FIXED_ID'
apiKey="my-api-key"
onInit={(evt, editor) => editorRef.current = editor}
initialValue="<p>This is the initial content of the editor.</p>"
init={{
height: 500,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar: 'undo redo | formatselect | ' +
'bold italic backcolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removeformat | help',
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
}}
/>
I want to have the visualchars button and functionality turned on as soon as the editor is initiated. Tiny MCE version 4 only, non jQuery version.
Why? Don't you know that nbsp is BAD?
No, I am not trying to offend some god of HTML correctness. Non breaking spaces are compulsory in French text in several common instances (before question marks, exclamation marks, colons, semi colons to name a few occasions).
I want to see where the non-breaking spaces are...
... and where they are missing because I review content created by someone else (e.g. copy/pasted from PDF or Word), and generally speaking I will check the text for proper French typography.
Here is how I call my editor:
var ed = new tinymce.Editor('tinymce1', {
plugins: [
'advlist link image charmap pagebreak',
'searchreplace wordcount visualblocks visualchars code fullscreen media nonbreaking',
'table template paste'
],
language: 'fr_FR',
element_format: 'html',
keep_styles: false,
paste_as_text: true,
content_css: '/admin/css/tinymce.css',
browser_spellcheck: false,
toolbar1: "bold italic | styleselect formatselect | link unlink | bullist numlist | charmap subscript superscript | visualchars visualblocks nonbreaking",
toolbar2: "image media | cut copy paste | searchreplace | undo redo | code | fullscreen | removeformat | spellchecker",
menubar: false,
toolbar_items_size: 'normal',
style_formats: [
{title:'Signature', block:'p', classes:'signature'}
],
block_formats: 'Paragraphe=p;Titre 3=h3;Titre 4=h4;Div=div',
setup: function(ed) {
ed.on('keyup', function(e) {
console.log('keyup: good for you, you captured a keyup event!');
});
ed.on('init', function(e) {
console.log('init: nothing to see here, it kinda works.');
});
} // setup
}, tinymce.EditorManager);
ed.render();
This works so far, but I don't know how to activate the visualchars on startup.
Additionally I'd like to be able to force the visualchars every time I insert a nbsp, because by default tinyMCE's behavior is that I have to turn it off and then On again.
And last but not least, if there is a better editor than tinyMCE or one with a better documentation for noobs, I'd be happy to try it.
Important:
TinyMCE version 4 only
If someone needs the code to force the visual characters capability on as the editor loads here is a TinyMCE Fiddle that shows you the details:
http://fiddle.tinymce.com/ajgaab
You have to load the visualchars plugin in the plugin list and then you can use the editor's init function to turn on the feature:
tinymce.init({
selector: "textarea",
plugins: [
"...visualchars..."
],
....
setup: function (editor) {
editor.on('init', function () {
editor.execCommand('mceVisualChars');
});
}
});
Please see the TinyMCE Fiddle for the full working code.
You need to add oninit (then the editor is initialized and ready) the activation of the plugin.
Additionally I'd like to be able to force the visualchars every time I
insert a nbsp, because by default tinyMCE's behavior is that I have to
turn it off and then On again.
You can check for the inserted character onKeyDown and then activate the plugin (and button).