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' }
}
};
...
};
...
}
Related
I'm using TinyMCE 4 and setting it up as follows:
tinyMCE.init({
mode : "specific_textareas",
editor_selector : "basicTinyMCE",
theme : "modern",
readonly : false,
...});
I want to call a function after it has been rendered in the DOM.
I came across this and tried:
tinyMCE.init({
mode : "specific_textareas",
editor_selector : "basicTinyMCE",
theme : "modern",
readonly : false,
setup : function(ed) {
ed.onPostRender.add(function(ed,cm) {
console.log('After render: ' + ed.id);
});
}
});
I get the following error:
SCRIPT5007: Unable to get property 'add' of undefined or null reference
Any ideas if this is the correct way to achieve what I want?
And if so, why is the error appearing?
You've got two options:
Use configuration init_instance_callback http://www.tinymce.com/wiki.php/Configuration:init_instance_callback
Use new way to add callbacks
ed.on('postRender', function(e) {
console.log('postRender');
});
I found the "Dirty" event was what I wanted, only triggered after the user makes a change to the contents of the editor
https://www.tiny.cloud/docs/advanced/events/
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');
}
});
});
}
});
How can I override TinyMCE's default formatting for basic stuff like bold, underline, and strikethrough? Currently the generated HTML uses styled spans, which is normally fine. Unfortunately, in this situation I need to do some simple parsing and need the elements to be the old-style <b>, <u>, and <strike>.
The following code is what I currently have that doesn't work. Applying these styles to content continues to wrap the content in styled spans.
$('<textarea></textarea>').tinymce(
{
theme_advanced_buttons1: "bold,italic,underline,strikethrough",
theme_advanced_buttons2: "",
theme_advanced_buttons3: "",
formats:
{
bold: { inline : 'b' },
underline : { inline : 'u' },
strikethrough : { inline : 'strike' }
},
// ...
});
I found the answer on the TinyMCE forum:
$('<textarea></textarea>').tinymce(
{
plugins : 'legacyoutput', // this overrides the formats automatically
// ...
} );
How do I remove a button from the TinyMCE toolbar?
Do I directly edit the tiny_mce.js file? If so, where? Do I edit my theme's editor_template.js file?
Any instruction or hints would be appreciated.
You can define exactly what you want on the toolbar with the advanced theme and you wind up just specifying a list of buttons. See http://wiki.moxiecode.com/index.php/TinyMCE:Configuration for the configuration reference or the examples at http://tinymce.moxiecode.com/examples/full.php
In case you need to remove button dynamically, you can use following technique:
tinymce.init({
selector: "textarea",
toolbar: "custom",
formats: {custom: {inline: "span", styles: {color: "red"}}},
setup: function(editor){
editor.addCustomButton = function () {
if(this.customButton){
this.customButton.show();
} else {
this.addButton("custom", {
onpostrender: function() {
editor.customButton = this; //saving button reference
}
});
}
};
editor.removeCustomButton = function () { this.customButton.hide(); };
}
});
Now you can call editor's methods addCustomButton and removeCustomButton from wherever you need.
Often I find that I need to use jeditable on several areas each requiring different parameter settings.
For example I use jeditable with autosuggest input type, and then I need to pass different data sources to the different inputs.
I wanted to use just one instance of the editable plugin, and have tried to assign attr-values to the script, but obviously this does not work the way I'm approaching it..
I'm hoping someone can guide me a bit..
Essentially I would like to be able to set a jeditable parameter value based on the value of an ttribute of the dom element it is manipulating.
something like:
$('.editme').editable('savedata.php',{
loadurl : 'loaddata.php',
loaddata : { handle: $(this).attr('rel') }
});
then I could simply specify different load sources with:
<div id="fruits" class="editme" rel="myfruits">apples</div>
I didn't find the keyword this to work in this way..
How can I access the attributes of the dom element being manipulated dynamically for each jeditable binding?
here is another example of what I want to do:
authorsList = "".split(",");
// extend jeditable with autocomplete
$.editable.addInputType('autoc', {
element: function(settings, original) {
var input = $("<input />").autocomplete(settings.mdata, settings.autoc);
$(this).append(input);
return input; }
});
$('.editable.authors').editable('savedata.php',{
type : "autoc",
mdata : $(this).attr('rel'), // should hold the name 'authorsList'
onblur : 'ignore',
autoc : { multiple: true,
multipleSeparator: ',' },
loadurl : 'loaddata.php',
loadtype : 'POST',
loaddata : {handle: function(){ return eval($("#objhandle").val())}, lookuptype: 'mirror'},
submit : 'save',
cancel : 'cancel',
tooltip : "Click to edit",
style : "inherit",
cssclass : 'jedi',
id : "field",
name : "data",
submitdata : {
storetype: 'mirror',
handle: function(){return eval($("#objhandle").val())},
timestamp: function(){return eval($("#objtimestamp").val())}
}
});
Warning, totally untested code but something like following should work:
$('.editme').each(function() {
$(this).editable('savedata.php',{
loadurl : 'loaddata.php',
loaddata : { handle: $(this).attr('rel') }
});
});
This way the score of this should be correct when initializing Jeditable on the element.
this worked for me
$(this).data('rel)
and for the html
<div id="fruits" class="editme" data-rel="myfruits">apples</div>