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.
Related
The TinyMCE inline editor toolbar changes into two rows when the difference in pixels between the left of the editor element and the right of the window are less than the width of the toolbar. Is there a way to disable this behaviour, and instead move the toolbar to the left so it can be displayed as full width?
Current situation (right side of image is right side of window)
What I want to achieve, this image is photoshopped so the layout is right (right side of image is right side of window)
I initialize my TinyMCE 5 editor with the following object:
var textEditorConfig = {
menubar: false,
inline: true,
plugins: [
'link',
'lists',
'autolink',
],
toolbar: [
'undo redo | bold italic underline | formatselect fontselect | forecolor | alignleft aligncenter alignright'
],
block_formats: 'Paragraph=p;Header 1=h1;Header 2=h2;Header 3=h3',
};
textEditorConfig.target = target; // This target variable is just a DOM element
tinymce.init(textEditorConfig);
You can configure how TinyMCE adjusts to fit the space using the toolbar_mode option. For example:
toolbar_mode: 'scrolling'
There are four modes to choose from. The wrap mode wraps overflow toolbar options onto a second row. Any of the other three modes - floating, sliding, scrolling, will keep the toolbar as one row. The default toolbar mode is floating.
However, toolbar modes are not available when using multiple toolbars or the toolbar(n) option.
When the toolbar is configured with an array of space separated strings, it is being configured as multiple toolbars.
Configure a single toolbar by providing a single string (without square brackets):
toolbar: 'undo redo | bold italic underline | formatselect fontselect | forecolor | alignleft aligncenter alignright'
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'm trying to populate the style list with custom classes as I used to do on v3 with content_css, but it's not pulling through any styles. I have followed instructions here http://www.tinymce.com/wiki.php/Plugin:importcss. I have importcss included in my plugins list, importcss_append set to true, and content_css and importcss_file_filter set to the correct file, but it doesn't add anything to the Formats list.
tinymce.init({
'plugins': ["advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor colorpicker textpattern moxiemanager importcss"],
'relative_urls': false,
'content_css': '/cms/style/blocks_mce.css',
'importcss_append': true,
'importcss_file_filter': '/cms/style/blocks_mce.css',
'menubar': 'file edit insert view format table tools',
'toolbar1': 'undo redo | bold italic | styleselect',
'toolbar2': 'bullist numlist | alignleft aligncenter alignright alignjustify | link forecolor | image'
});
It is definitely finding the CSS file as if I change the path, I get an error in the code saying it can't find the file, however I don't get any new formats listed anywhere.
I can do this to manually add them:
'style_formats': [
{title: 'test', classes: 'test'}
]
But this doesn't actually apply the style to the text, and I want them to be picked up manually like they used to be.
Any ideas?
This is strange, content_css should work just fine, an alternative way to set style is using
setStyle
Example:
tinyMCE.DOM.setStyle('mydiv', 'background-color', 'red');
Read here: http://www.tinymce.com/wiki.php/API3:method.tinymce.dom.DOMUtils.setStyle
It appears that these imported styles will only be available in the styleselect dropdown toolbar item since TinyMCE 4. So you will need to add that to your toolbar.
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).