I can customize the default attribute of table using the following code:
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "table",
menubar: "table",
toolbar: "table",
table_default_attributes: {
border: '1'
}
});
For this code table will be look like: <table border="1">. Now if I want to change this border value, I can. Pretty simple. But if I want to completely remove this attribute, how can I? Meaning I want a table without any attribute like: <table> only. Any idea?
You can use two TinyMCE configuration options to set the default styles and attributes that are placed on a table:
table_default_styles: {},
table_default_attributes: {},
Details on these can be found on the documentation page for the table plugin:
https://www.tiny.cloud/docs/plugins/table/#table_default_attributes
Here is an example (on TinyMCE Fiddle):
http://fiddle.tinymce.com/Fvgaab
Related
I'd like Headings to have a pre-defined font. How can I do this?
Any help, much appreciated. 🙂
TinyMCE has a range of formatting options available, and the formatting includes elements like headings. The docs have some examples -> https://www.tiny.cloud/docs/configure/content-formatting/
tinymce.init({
selector: 'textarea',
formats: {
heading: { inline: 'h1', styles: { 'font-weight': 'bold', 'color': 'blue' } }
}
});
You can use CSS in the key: value format, I believe in a comma separated list. Check the section in the docs on block formats, and inline formats, since each one has different implications to the text in the editor.
!Important! UPDATE:
Using the above method will style the headings, but won't create an easy-to-use default font. Another and better way to manage this is to use the content_css option to setup a default style for those heading elements (docs).
The first solution above would mean if you had a style update, you would need to change every header individually. However, any style changes to the content_css option would change each heading tag instance.
Example
tinymce.init({
selector: 'textarea',
formats: {
content_css: "pathway/to/style.css",
}
});
I have initiated the tinyMCE for the list of textarea's (around 12) using the below code (generated from TypeScript code).
tinymce.init({
selector: this.selector,
setup: function (editor) {
editor.on('change blur', function () {
editor.save();
tinymce.triggerSave();
console.info('tinyMCE change event fired.');
});
},
branding: this.branding,
menubar: this.menubarFlag,
browser_spellcheck: this.browser_spellcheck,
fontsize_formats: this.fontsize_formats,
block_formats: this.block_formats,
toolbar1: this.toolbar1,
height: this.height,
plugins: this.plugins
});
I tried both editor.save(); and tinymce.triggerSave(); on tinyMCE change event. But still hidden textarea change event is not firing though content is updated to textarea.
I need textarea's event to actually add an element to the form by adding name attribute.
$(divObj).find('.segment-input').change(function () {
$(divObj).find('input[type="hidden"]').attr('name', $(divObj).find('input[type="hidden"]').attr('name-nochange'));
$(divObj).find('input[type="hidden"]').removeAttr('name-nochange');
});
Per your comments above check out this fiddle:
http://fiddle.tinymce.com/Cogaab
The editor.on() function has access to the editor (e in the fiddle) upon which it was triggered. You can get (among other things) the target ID of the underlying text area. In the fiddle I provided I log that to the console for each of the editors on init, change, and blur.
Once you know the ID you can find that using JavaScript and do what you need to that native element.
There is a variety of useful data in that editor (e) object - its worth logging e and looking at what else is there as other data there may also be helpful for your scenario.
By default TinyMCE (4) has a "Paragraph â–¼" dropdown, and if you click on it you get a list of formatting options ("Paragraph", "Heading 1", etc.).
I'd like to be able to do two things. First, I want to change the options and their names (eg. to "Normal" and "Heading"), and I found the block_formats option which does exactly that:
block_formats: 'Normal=p;Heading=h1'
However, I'm stuck on thing #2: adding classes to the generated elements. Instead of plain <h1> elements, when someone picks "Heading" I want to generate a <h1 class="heading">.
I thought maybe this would work:
block_formats: 'Normal=p;Heading=h1.heading'
... but it doesn't, and I haven't been able to find any other option that would let me do this. Then again, the TinyMCE documentation isn't always the easiest place to find answers, which is why I came here.
Does anyone know how I configure TinyMCE to have a "Paragraph â–¼" dropdown with customized names AND custom classes on the generated elements?
I never did find a way to do this, so what I wound up doing instead was remove the block format drop-down entirely and replace it with the (custom) format dropdown. In other words I:
removed the formatselect from the toolbar1 config (removing the un-configurable normal formatting dropdown)
added the custom format dropdown (styleselect) to the toolbar1 config
defined a style_formats config entry with my custom styles
The style_formats config looked like this:
style_formats: [
{
title: 'Header',
inline: 'span',
classes: 'someClass',
styles: {someStyle: '5px'}
},
], // next style would go here
There were only two downsides of this approach. First, the dropdown now says "Formats", and I don't seem to be able to configure that anywhere. However I do have a single formatting dropdown, with only the options I want, and those options add the desired classes to the formatted text, so the dropdown's name isn't a big deal.
The second issue was that TinyMCE uses an <iframe>, which prevents it from using our stylesheet. I could have written a stylesheet for TinyMCE and then appended it to the <iframe> (or used some TinyMCE mechanism, if there is one) ... but I'm lazy so I just used style: entries for each custom format to define the style.
Is there a built in TinyMCE command to change the class name of its outer-most div? I have a div which is populated with either a PHP version of TinyMCE or the jQuery version, but the TinyMCE editor's outermost div classes are different.
I would preferably like to avoid having to use jQuery.
jQuery
class="mce-tinymce mce-container mce-panel"
PHP
class="wp-core-ui wp-editor-wrap tmce-active"
I don't mind if I can only change one, although it would be nice to know how to change both. I have tried
tinymce.inti({
body_class:"classname";
});
From docs
// Add a class to an element by id in the page
tinymce.DOM.addClass('someid', 'someclass');
// Add a class to an element by id inside the editor
tinyMCE.activeEditor.dom.addClass('someid', 'someclass');
From doc: https://www.tiny.cloud/docs-3x/reference/Configuration3x/Configuration3x#body_class/
Here you can also add a body_class option like;
tinyMCE.init({
...
body_class : "some_class_name"
});
I would like to set an own table style as default style within the TinyMCE editor (version 3.4.9 within Moodle 2.2.3).
Right now, my new styles are shown in the dropdown, but I cannot manage to get one as the default table style. The default value is always "-- not set --", which means that no table style will be used.
This is how it looks at the moment:
https://img.skitch.com/20111226-f4wgp8kudx45t6e2s17yse4cq6.jpg
This is how it should look like at the end ("Tircia Style" should be default):
https://img.skitch.com/20111226-dcf3t3w7qxagst1xgr2ieas26b.jpg
Pictures are from the TinyMCEforum.
When you initialize tinymce please add the path to a new css file which will define the styles used within the editor.
tinymce.init({
content_css: [
'/css/innerLayout.css'
]
});
Some sample styles for innerLayout.css for tables -
.mce-content-body table{width:100%;border-spacing:0;border-collapse:separate;border:0}
.mce-content-body table tr:nth-child(even){background:#FAFAFA}
.mce-content-body table caption,.mce-content-body table td,.mce-content-body table th{padding:15px 7px;border:0;font:inherit}
.mce-content-body table th{font-weight:400;color:#6E6E6E;border-bottom:2px solid #B9B9B9!important;
Other styles can be found here - link
Don't modify core files. I realize there previously wasn't a choice, but in TinyMCE 4.x there is now a way to set default table styles with table_default_styles.
http://fiddle.tinymce.com/iUeaab
in tables.js add the following code:
function init() {
settings = tinyMCE.settings;
settings["table_styles"] = "default1=red;default2=blue;" + settings["table_styles"];
tinyMCE.settings["table_styles"] = settings["table_styles"];
I had the same issue and I tried to solve it by passing Configuration or changing library JavaScript files. I started doing reverse engineering of table.js (/tiny_mce/plugins/table/js/table.js). But, no luck.
So, I went to table.htm (/tiny_mce/plugins/table/table.htm) which is template file for table plugin's modal dialog box. Commented out preset option {#not_set} form the select control.
<tr id="styleSelectRow">
<td><label id="classlabel" for="class">{#class_name}</label></td>
<td colspan="3">
<select id="class" name="class" class="mceEditableSelect">
<!--<option value="" selected="selected">{#not_set}</option>-->
</select>
</td>
</tr>
Now, you should pass table_styles always to the initial configuration when we initiate TinyMCE.
var varTimyMCE = $("textarea").tinymce({
table_styles : "Custom 1=classTable1",
});
This is not the ideal solution but it works for now. I hope TinyMCE developer will give configuration options to control select control in the future releases.
You can edit the plugin.js(\tinymce\js\tinymce\plugins\table\plugin.js) if you are using the unminified tinyMCE.js. On the current version it is line 1872. I added to make the default table styling responsive.
html = '<div class="table-responsive"><table class="table"><tbody>'; // line 1882 or 1916
html += '</tbody></table></div>'; // line 1884 or 1928