I wanted to apply style for Icon in Select component with "filled" variant and opened state. I'm using createMuiTheme. As I understand, I need to overwrite style, when Icon has two classes at once:
MuiSelect-iconFilled-32 MuiSelect-iconOpen-31.
I got:
MuiSelect: {
iconFilled: {
borderLeft: `1px solid ${colors.lightGray}`,
'&.MuiSelect-iconOpen': {
borderLeft: 'none',
},
},
},
&.MuiSelect-iconOpen doesn't work...
Here is a html representation of Select:
I would like to replace bold tag, , with strong tag, in TinyMCE. How to do it in Plone using Products.TinyMCE?
I read TinyMCE document, http://www.tinymce.com/wiki.php/Configuration:valid_elements. Below is how to do it in TinyMCE:
tinyMCE.init({
...
valid_elements : "strong/b"
});
Thanks.
I never tested this change, however you can try what you learned patching "tiny_mce_init.js".
To do this I suggest to use z3c.jbot (see also http://blog.keul.it/2011/06/z3cjbot-magical-with-your-skins.html).
You may do this using the tinymce configuration:
tinyMCE.init({
...
extended_valid_elements : "strong/b",
....
// Override internal formats
formats: {
bold : {inline : 'strong' }
},
...
});
In case you have editor content already saved in the database with b-tags it might be needed to replace those tags on serverside with strong-tags.
Both keul and Thariama answers are correct. I have to combine both answers in order for TinyMCE working in Plone.
Here is how I do it,
- patching/overriding "tiny_mce_init.js" with the name "Products.TinyMCE.skins.tinymce.tiny_mce_init.js" using z3c.jbot.
function TinyMCEConfig(id) {
...
this.init = function() {
...
var init_dict = {
...
fix_list_elements : false,
extended_valid_elements : "strong/b",
// Override internal formats
formats: {
bold : {inline : 'strong' }
}
};
...
};
...
}
I've been looking for hours to find a plugin that would add somthing like "padding: 5px" to an image. Does everyone do this through plain html? Our customer need a way to add this simply with the use of a button or right click context menu. Any suggestions/solutions or do I have to develop this myself?
Suggestions concerning other products than TinyMCE is not necessary.
The easiest to use is to add a custom stylesheet which only need to be set as a parameter (content_css). Example code snippet for the tinymce configuration:
...
theme: 'advanced',
content_css: "http://my_server/my_css/my_custom_css_file.css",
...
This css should contain something like the following
img {
padding-left: 5px;
}
The code for the tinymce button is a bit more complex (but if wised i can post it as well) and the css gets set using the following
$(ed.get('my_editor_id').getBody()).find('img').css('padding-left','5px');
UPDATE: Button code:
tinyMCE.init({
...
setup : function(ed) {
ed.onInit.add(function(ed, evt) {
ed.addButton ('wrap_div', {
'title' : 'my title',
'image' : 'my_image.png',
'onclick' : function () {
ed.getBody().find('img').css('padding-left','5px');
}
});
});
}
});
I want to disable tinymce editor using Javascript. Actually, I have two radio buttons: 1) On & 2) Off.
When the user selects the Off radio button, my tinymce editor should be readonly/disabled & when the user selects the On radio button, my tinymce editor should be enabled.
How can I achieve that?
EDITED:- (As it is not working in IE8)
tinyMCE.init({
force_p_newlines : false,
force_br_newlines : false,
forced_root_block : false,
convert_newlines_to_brs: false,
// Not to add br elements.
remove_linebreaks : true,
mode : "textareas",
theme : "advanced",
plugins : "safari",
convert_urls : false,
width : "560",
height : "15",
theme_advanced_buttons1 : "fontselect,fontsizeselect, separator, bold,italic,underline,separator,forecolor,backcolor,justifyleft,justifycenter,justifyright,justifyfull",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left", extended_valid_elements : "a[name|href|target|title|onclick],img[class|src| border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name], hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]"
});
This code is used to disable:
function tinymce_state(id, disable){
var state = (disable==true)? 'Off' : 'On'
tinymce.get(id).getDoc().designMode = state;
tinymce.get(id).controlManager.get('fontselect').setDisabled(disable);
tinymce.get(id).controlManager.get('fontsizeselect').setDisabled(disable);
tinymce.get(id).controlManager.get('bold').setDisabled(disable);
tinymce.get(id).controlManager.get('italic').setDisabled(disable);
tinymce.get(id).controlManager.get('underline').setDisabled(disable);
tinymce.get(id).controlManager.get('forecolor').setDisabled(disable);
tinymce.get(id).controlManager.get('backcolor').setDisabled(disable);
tinymce.get(id).controlManager.get('justifyleft').setDisabled(disable);
tinymce.get(id).controlManager.get('justifycenter').setDisabled(disable);
tinymce.get(id).controlManager.get('justifyright').setDisabled(disable);
tinymce.get(id).controlManager.get('justifyfull').setDisabled(disable);
}
You may use the following to block input in the editor:
// blockeditor input
tinymce.get('editor_id').getDoc().designMode = 'Off'; // switches editable off
// turn it on again
tinymce.get('editor_id').getDoc().designMode = 'On'; // switches editable on
You still need to find a way to block the tinymce UI. You could deactivate EACH control you have loaded (in the init function) using a line for EACH one of them
// example control bold
tinymce.get('editor_id').controlManager.get('bold').setDisabled(true);
// turn it on again
tinymce.get('editor_id').controlManager.get('bold').setDisabled(false);
EDIT:
You could change the contenteditable property of your rtes iframe body.
Downside will be that you will have to disable the tinymce UI (buttons) seperatly
// disable contenteditable
tinymce.get('editor_id').getBody().setAttribute('contenteditable', 'false');
// enable contenteditable
tinymce.get('editor_id').getBody().setAttribute('contenteditable', 'true');
For some reason the collection of editors has two type of ID, the numeric ID (0,1, ... n) and an alpha ID (Testing1, testing2, ... xyx)
the commands in the code snippet only work with the aplha-based ID e.g. "Testing1"
I have twelve tinyMCE version 4.1.5 editors in my project and can disable all of them with this code:
for (editor_id in tinyMCE.editors) {
if (editor_id.length > 2) { //there are twelve editors in my project so ignore two-digit IDs
tinyMCE.editors[editor_id].getBody().setAttribute('readonly', '1');
tinymce.EditorManager.execCommand('mceRemoveControl', true, editor_id);
tinymce.EditorManager.execCommand('mceRemoveEditor', true, editor_id);
tinymce.EditorManager.execCommand('mceAddControl', true, editor_id);
tinymce.EditorManager.execCommand('mceAddEditor', true, editor_id);
}
}
This site helped me figure it out: http://jeromejaglale.com/doc/javascript/tinymce_jquery_ajax_form
To disable the editor use:
tinymce.activeEditor.mode.set('readonly');
To enable the editor use:
tinymce.activeEditor.mode.set('design');
Tested on version 5.x
You can cover with a white div opacity .7 and higher z-index.
You can use in 3.x the option
editor_deselector : "no_mce",
to disabled (so give the textarea the css class no_mce). You can toggle the CSS Class with jQuery for example.
In 4.x you can use the option
selector:'textarea.not(.no_mce)'
Hope that helps.
(Oviously you can change the CSS Class to whatever you want)
For old 3 ver you can use:
tinyMCE.getInstanceById(tinyMCE.activeEditor.id).getBody().classList.add("mceNonEditable");
I'm trying to add a custom tag to content selected in the editor, but <title> content </title> does not work. This works though: [title] content [/title]
Googling leads me to believe that I need to use these lines as well, but it does not help:
extended_valid_elements : "title",
custom_elements: "title",
Example:
For some reason this code does not work:
setup : function(ed) {
// Add a custom button
ed.addButton('mybutton', {
title : 'My button',
'class' : 'Mybutton',
image : 'img/example.gif',
onclick : function() {
// Add you own code to execute something on click
ed.focus();
ed.selection.setContent("<title>" + ed.selection.getContent() + '</title>');
}
But this works:
setup : function(ed) {
// Add a custom button
ed.addButton('mybutton', {
title : 'My button',
'class' : 'Mybutton',
image : 'img/example.gif',
onclick : function() {
// Add you own code to execute something on click
ed.focus();
ed.selection.setContent("[title]" + ed.selection.getContent() + '[/title]');
}
This is the way to go
extended_valid_elements : "title",
custom_elements: "title",
You do not see anything because title is not defined elsewhere than in the head.
You will find your title-tag using firebug and it will hold what you expect to hold (ed.selection.getContent() wrapped into a title-tag.):