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'}}
},
});
Related
I have been trying to set the maximum width so that the editor is not so big but it does not seem to work.
I am using TINYMCE 5 direct from tinymce CDN
I am using max_width: 500,but it does not seem to limit it to 500px, I tried changing it to 500px but still does not work. The example in the online documentation dont use px
tinymce.init({
selector: 'textarea.mceEditor',
max_width: 500,
menubar: false,
branding: false,
resize: 'both',
Without seeing running code it is hard to say for sure what the issue is but the max_width setting combined with an initial width and the ability to resize horizontally does indeed stop resizing at 500px.
If I use this configuration:
tinymce.init({
selector: "textarea",
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table paste"
],
max_width: 500,
width: 300,
height: 400,
resize: 'both',
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});
...the editor starts 300px wide and I can expand it to (but not past) 500px.
By default TinyMCE will take up the full width of its containing element so if your containing element is wider than 500px the editor will start wider than your desired max value. If you try to resize it after initialization it will enforce the max_width value.
Here is a working example: https://fiddle.tiny.cloud/ABhaab/1
I figured it out.
max_width is how wide the editor can be resized by a user, not the maximum width the editor will take up.
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.
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).