Develop Reference

How to apply styles for empty lines in between the paragraph in tinymce, is it even supported in tinymce?

I have been trying to findout on how to apply styles for emptylines in tinymce.
For Example:
newline1
newline2
When I select the above two lines and change the font, and when I try to type something in the empty line inbetween the two lines , newly applied style is not applying for the content in the emptyline.
Current Version I am using : 4.7.13

TinyMCE 4.x is no longer a supported release of TinyMCE. If you try this same process in the latest release (5.10.x as I write this) you should get your intended behavior.
The key configuration option is format_empty_lines: https://www.tiny.cloud/docs/configure/content-formatting/#format_empty_lines
tinymce.init({
selector: "textarea",
format_empty_lines: true,
...
});

Add a custom format option to CKEdtitor?

I'm sorry if this question has been asked before, I've tried googling/looking on here/browsing the CKEditor forums and not come up with anything that I can seem to understand and implement (apologies, I'm not that great at this JavaScript stuff)
Basically, I want to add one custom option to the format dropdown list of CKEditor, it should create a span with a class like below:
<span class="custom-font"></span>
I've tried using the below in the "config.js" file, but it doesn't seem to work:
config.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div;span'
config.format_span = { element : 'span', attributes : { 'class' : 'cutsom-font' } };
Can anybody point me in the right direction here?

The "format" only deals with block level elements so you can't use that to add span tag around selected text. You need "style" to do that. To add to the default styles that CKEditor comes with add your style object in the styles.js. That's where the default styles are defined. Also, you need to add "name" attribute to the object.
{ name: 'Your custom style', element: 'span', attributes: {'class':'custom-font'} }
If you want to make a list of your own styles to replace defaults you can find details HERE.
According to the link you can also use your own .js file to define styles or use stylesheet to fetch css styles.

TinyMCE, allow data attribute

I have to use the HTML 5 data attribute in Tiny MCE, but the editor always clear them, as it's not an attribute known by the default valid_elements configuration.
So I have 2 problems here:
the data attribute is dynamic ( it could be data-options, data-test, data-foo, etc... ) So I would need a wildcard value or something.
I want to allow the data attribute for all tags.
So far, I've tried:
extended_valid_elements : '#[id|class|title|style|data-options]',
And:
extended_valid_elements : '*[id|class|title|style|data*]',
But it doesn't work :(

extended_valid_elements is not the best choice here.
Hava a look at the valid_elements setting. Here is an example
// The valid_elements option defines which elements will remain in the edited text when the editor saves.
valid_elements: "#[id|class|title|style|data-options|data*]," +
"a[name|href|target|title]," +
"#p,-ol,-ul,-li,br,img[src|height|width],-b,-i,-u," +
"-span[data-mce-type],hr",

I am using:
extended_valid_elements: "+#[data-options]"
and it works for me. (TinyMCE 4.3.11. Notice the + sign?)

TinyMce Allow all Html tag

I'm using TinyMce and even though the danger of a script attack, I need to enable all html tags with the editor.
Currently, I'm use like:
valid_elements: "#[class],p[style],h3,h4,h5,h6,a[href|target],strong/b,"
+ "div[align],br,table,tbody,thead,tr,td,ul,ol,li,img[src]"
But always need to add something, I want to enable ALL HTML tags with all attributes. Is there such switch that Disables the HTML filtering?

You can set
valid_elements : '*[*]',
to allow all html tags.

To keep style tags, use valid_children : "+body[style]"

TinyMCE SetContent for multiple instances

I am trying to set the content of a number of text editors on page load. I am not too familiar with TinyMCE and have inherited the code somewhat. Here is how I am initializing the editors -
tinyMCE.init({
// General options
mode: "exact",
elements: "txtContent1,txtContent2,txtContent3,txtContent4,txtContent5,txtContentRight1,txtContentRight2,txtContentRight3,txtContentRight4,txtContentRight5",
theme: "advanced",
plugins: "layer,table,save,advhr,advimage,advlink,insertdatetime,preview,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras",
// Theme options
theme_advanced_buttons1: "bold,italic,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,format,selectcut,copy,paste,pastetext,pasteword,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,cleanup,help,code,",
theme_advanced_buttons2: "ComparativeFiguresTableButton",
//theme_advanced_buttons3: "ComparativeFiguresTableButton,tablecontrols,|,hr,|,sub,sup,|,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,
relative_urls: false,
document_base_url : "example.com",
remove_script_host: false,
setup: function(ed) {
// Add a custom button
ed.addButton('ComparativeFiguresTableButton', {
title: 'Comparative Figures Table',
image: 'images/icons/cumulativefiguresBtn.gif',
onclick: function() {
// Add you own code to execute something on click
ed.focus();
ed.selection.setContent('<p><strong>Comparative Figures</strong></p><table border="0" width="100%" cellspacing="0" cellpadding="0" style="font-size:12px; line-height:1.5em; font-family:Verdana, Arial, Helvetica, sans-serif;"><tbody><tr><td> </td><td><strong>Offered</strong></td><td><strong>Sold</strong></td><td><strong>Aggregate (€)</strong></td><td><strong>Average (€)</strong></td><td><strong>Median (€)</strong></td></tr><tr><td><strong>2009</strong></td><td>123</td><td>123</td><td>123,000</td><td>123,000</td><td>123,000</td></tr><tr><td><strong>2010</strong></td><td>123</td><td>123</td><td>123,000</td><td>123,000</td><td>123,000</td></tr></tbody></table><br clear="all" />');
}
});
}
Can anyone suggest the best way to set different html content for each editor on page load?
Thanks,
Tristan

From your config you have quite a few instances of TinyMCE on your page. In each, you have a button that allows the end user to insert some predefined content (a "Comparative Figures Table")
When you say you want to "set different html content for each editor on page load" I assume you mean you want to have each instance of TinyMCE load with the appropriate content (either some default or what you retrieved from your repository).
If that's the case then, as #russjman stated, each of the ID's in the elements config item refers to a TextArea/DIV on the page. All you need to do is put the appropriate content in those elements. Importantly, remember to HTML encode it.
For example
<textarea id="txtContent1">
<?php echo htmlentities("<p>This is the content from the first text area.</p>");?></textarea>
<textarea id="txtContent2">
<?php echo htmlentities("<p>This is the content from the second text area.</p><p><strong>Note</strong> This needed to be encoded using htmlentities in PHP</p>");?></textarea>
The other way to read your question is that you want the ComparativeFiguresTableButton to do something different in each instance of the editor. In this case you will need a different config for each element, each with a different value in the ed.selection.setContent() method
As #Thariama states, the best approach would be to create a simple plugin that adds a button and has a config parameter that is the content you want inserted when it's pressed.
Finally, if all you want to do is insert HTML fragments, then it may be worth checking out the template plugin.

I assume that you want set up TinyMCE for multiple textareas on the same page. The 'elements' variable should be doing what you are asking as long as they correspond to a textarea with an id.
<textarea id="txtContent1" ></textarea>
<textarea id="txtContent2" ></textarea>

Try creating your own plugin (it is pretty easy):
ed.onInit.add(function(ed){
ed.setContent('<p>my new content</p>');
}
Since every tinymce instance gets initialized using the same code - they all get the same content (right after the editor instance has loaded).
Alernative 1: I am not sure if the following init setting will work, but you might give it a try:
setup : function(ed) {
ed.setContent('<p>my new content</p>');
}
Alernative 2: Set the content of each textarea which gets transformated into a tinymce editor instance before tinymce.init gets called.