Orchard TinyMCE Configuration - tinymce

I am using the TinyMCE Deluxe module for Orchard to support additional editing options for a site. One of the things my client needs is the ability to do text alignment, identical to how Word works. I saw TinyMCE has a utility does support these options as part of the "Core" set of controls (see here), but when I try to edit orchard-tinymce.js to support core, I just start getting JS errors and the toolbar doesn't show up.
Any suggestions on how to add in the alignment options?
EDIT
Here is my orchard-tinymce.js file (located in /Modules/TinyMceDeluxe/Scripts):
$(document).ready(function () {
tinyMceDeluxe = new TinyMceDeluxe.Orchard();
// 1st arg is an array of plugin names. See plugin link above for full list of available plugins
// 2nd arg is an options object; also see TinyMce documentation for details on all available options.
tinyMceDeluxe.init(['pagebreak', 'paste', 'table', 'template', 'syntaxhl'], {
theme: "advanced",
mode: "specific_textareas",
editor_selector: "tinymce",
plugins: "fullscreen,autoresize,searchreplace,mediapicker,inlinepopups,-table,-pagebreak,-template,-paste,-syntaxhl",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: "true",
//theme_advanced_buttons1: "search,replace,|,cut,copy,paste,|,undo,redo,|,link,unlink,charmap,emoticon,codeblock,|,bold,italic,|,numlist,bullist,formatselect,fontselect,fontsizeselect,|,styleselect,|,forecolor,backcolor",
theme_advanced_buttons1: 'core',
theme_advanced_buttons2: "mediapicker,|,tablecontrols,|,hr,removeformat,visualaid,|,visualchars,template,blockquote,pagebreak,|,alignleft,aligncenter,alignright,alignjustify,|,syntaxhl,code,fullscreen",
theme_advanced_buttons3: "",
convert_urls: false,
template_external_list_url: "/modules/tinymcedeluxe/scripts/samples/tinymce_template_list.js",
// content_css sets the path to your site's main .css file. The styles from this file are imported into a droplist in the TinyMce editor.
// TinyMceDeluxe sets this path automatically to the /Styles/custom.css file in your site's theme, but you can override the path by declaring it here:
//content_css: '/path/to/your/stylesheet.css',
valid_elements: "*[*]",
// shouldn't be needed due to the valid_elements setting, but TinyMCE would strip script.src without it.
extended_valid_elements: "script[type|defer|src|language]"
});
});
I comment out theme_advanced_buttons1 which has a number of specific ones and changed it to just 'core' instead. When I do this, I get an error in tiny_mce.js on line one that says: "Uncaught TypeError: Cannot read propery 'Button' of undefined."

After digging a bit to answer Thariama's question, I found this page on the TinyMCE website. I had been using buttons of "alignleft", "alignright" (and so on) for the alignment controls which I had seen elsewhere on their site, but it turns out the real names were "justifyleft", "justifyright", etc. Changing it to those gave me all the alignment options I needed.

Related

How to remove POWERED BY TINY from TinyMce web component editor

I am using TinyMce web component editor, i have put my API key as well. But still getting branding "POWERED BY TINY".
Code as below:-
<tinymce-editor branding="false" id="editor" height="150" resize="false" menubar="false">
This will be the initial content of the editor
</tinymce-editor>
branding ="false" also not working.
Just so you're aware removing the branding is a paid feature of TinyMCE.
The branding setting of TinyMCE is not one of the built-in attributes that the webcomponent supports but as with any attribute you can still set it via the escape hatch of declaring a object globally in Javascript and then referencing the name.
<script>window.myConfig = { branding: false };</script>
<tinymce-editor id="editor" height="150" resize="false" menubar="false" config="myConfig">
This will be the initial content of the editor
</tinymce-editor>
https://www.tiny.cloud/docs/integrations/webcomponent/#settingadditionalconfigurationoptions
Via init() function:
tinymce.init({
...
statusbar: 'false',
...
});

TinyMCE table not showing in editor

I am using TinyMCE 4.6.0. When I add the table plugin and use it in toolbar, it doesn't show when I add it in the editor, The cursor does go down indicating activity, but nothing shows!
Try This
tinymce.init({
selector: '.textEditor',
plugins: "advlist lists table paste textcolor colorpicker tabfocus link preview",
toolbar: "table fontsizeselect bold italic underline forecolor backcolor bullist numlist link preview code", imagetools_toolbar: "rotateleft rotateright | flipv fliph | editimage",
menubar: false,
toolbar_items_size: 'large',
min_height: 500,
max_height: 800,
convert_newlines_to_brs: false,
statusbar: false,
relative_urls: false,
remove_script_host: false,
language: 'en',
});
Based on your answer to my original comment keep a few things in mind...
When you insert the table does the right HTML get placed in the editor? If you enable the code plugin you should be able to see the HTML source that TinyMCE is trying to render. If the HTML for the table is there then the plugin did its job.
Assuming the HTML is there you need to determine why it is not visible. You have multiple ways to pass CSS into TinyMCE and that CSS will impact how things look in the editor.
Lastly, look at the configuration options for the table plugin itself. There are some that impact how a table is visualized in the editor such as this one: https://www.tiny.cloud/docs-4x/plugins/table/#table_grid.

TinyMCE - Completely disable validation

I'm using N2CMS which in turn uses TinyMCE to edit HTML content.
what i need to do is disable the TinyMCE HTML validation completely.
Its stripping out anything out that doesn't adhere to its settings.
If I add a custom attribute <a href="{0}" test="tester1" /> it just removes it the custom attribute!
also, it always add <p> tags around every bit of HTML content.
how can i disable the validation?
any help is very much appreciated.
to resove this, add these into the tinyMCE settings, or init
cleanup_on_startup: false,
trim_span_elements: false,
verify_html: false,
cleanup: false,
convert_urls: false
There are a relatively large number of TinyMCE options related to cleaning up and validating HTML.
The valid_elements or extended_valid_elements option can definitely help you with custom attributes:
extended_valid_elements: "a[href|test]",
That option would specifically allow href and test attributes on anchor tags per your example.
As far as your second question is concerned, could you please clarify? Are you asking how to avoid escaping HTML code that is pasted into the WYSIWYG editor or are you asking how to avoid wrapping text in paragraph or div tags?
another solution,
settings:
verify_html:false,
fix_table_elements:false,
schema:'html4',
invalid_elements:'',
valid_elements:'[]',
valid_children: '[]',
and I'm saving the html content to the hidden field by calling
tinymce.activeEditor.getContent({format: 'raw'})
this helps to prevent any html fixes
This is how I remove all sanitisation:
valid_elements: '*[*]',
plugins: "fullpage"
The valid_elements directive allows all elements and all of their attributes.
The fullpage plugin preserves the <html>,<head> tags etc.
To stop TinyMCE wrapping everything in <p> tags;
force_br_newlines: false,
force_p_newlines: false,
forced_root_block: '',
Those tags are usually paragraphs or divs. They are essential for every rte. Tinymce puts them around every bit of html because it needs to in order to for example be able to style passages of text.

Jquery Tools (tabs) + TinyMCE

I'm trying to integrate TinyMCE in Jquery Tools Tabs, but I can't seem to do it.
When all is set, I simply get no error, nor a warning. I only get a blank textarea.
I tryed with other Tabs (Jquery UI), and with that solution I am able to see TinyMCE, but I would like to use Jquery Tools, because of it's simplicity in css and filesize.
Update: here's 2 examples: one using Jquery Tools and another Jquery UI
Example 1: Jquery Tools
Example 2: Jquery UI
Tinymce init:
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
// Theme options
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true
});
Thank you.
Bruno
I've got it!.
Jquery Tools hides all div's inside the tab's panels by default, and TinyMCE uses DIV's to show the buttons, so those DIV's were being hidden.
What to do?
In Jquery Tools Tabs CSS, tell it to only hide the first DIV by adding >.
Example:
instead of:
.panes div { display:none; }
put
.panes > div { display:none; }
This way, it will only hide the first DIV.
Thank you anyway Thariama
I think your problem might be with one of the plugins. I suggest you remove all plugins (plugins: "",) and see what happens then. If it works as expected try adding plugin by plugin till you get the one that hinders tinymce to initialize. Button configuration is not crucial here. If the suitable plugin does not exist - the button simply does not show up, but inititialization won't stop because of this.

TinyMCE sticks the themes/advanced/langs/en.js script tag randomly in source code

I have a few different applications that use TinyMCE and all experience the same problem... the pages (randomly it seems) show HTML source code to the user. When I use the inspector, I see that the reason is that I get an entire script embed tag pointing to the /themes/advanced/langs/en.js file put into the middle of another HTML element. I've seen it show up inside tables and links, and it's even getting submitted to the DB through the TinyMCE editors themselves.
I see no console logs with JS errors, and the problem happens on only about 1/4 of all requests.
Here's my init:
<script type="text/javascript">
tinyMCE.init({
mode : "textareas",
plugins : "paste,spellchecker, table",
paste_auto_cleanup_on_paste : true,
theme : "advanced",
theme_advanced_buttons1 : "spellchecker,separator,pastetext,pasteword,separator,bold,italic,underline,strikethrough,separator,justifyleft,justifycenter,justifyright,separator,code",
theme_advanced_buttons2: "tablecontrols",
theme_advanced_buttons3: "",
theme_advanced_buttons4: "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
width : "700",
height: "500"
});
</script>
Do you include tinyMCE right before your initialization script?
In some cases including tinyMCE after the init part might be the problem...
I don't know how in the world this could be related to my issue, but I haven't seen the problem reappear after I made a setting change in IIS. I added a web garden to handle load issues and this problem has not been seen since.
It's a purely anecdotal solution though.