tinyMCE keeps stripping the class-attribute of my element, when clicking "remove formatting", although i've added it to the extended_valid_elements. look here:
...
extended_valid_elements : "p[class],figure[class],figcaption",
valid_children : "+p[figure]",
...
all gets stripped. do you have any idea?
thank you very much!
Take a look at this: http://tinymce.moxiecode.com/wiki.php/Configuration:formats (see the "remove format"-section).
You'll have to edit tiny_mce.js .
Search for the code shown there and add the following to the removeformat-array:
{selector : 'p', attributes : ['style'], split : false, expand : false, deep : true}
It should prevent tinymce from removing the class-attribute from p-elements when using the remove-format-button.
code must be:
...
formats : {
removeformat : [
{selector : 'figure', attributes : ['style'], split : false, expand : false, deep : true}
]
},
...
Related
I want to integrate some bootstrap classes to my ckeditor profile:
{ name : 'Button Large' , element : 'a', attributes : { 'class' : 'btn-lg' } },
{ name : 'Button Primary' , element : 'a', attributes : { 'class' : 'btn-primary' } },
but the problem is those styles cant be combined. If I want a button which is btn-primary AND btn-lg I would have to create a third style:
{ name : 'Button Large Primary' , element : 'a', attributes : { 'class' : 'btn-lg btn-primary' } },
which obviously is quite redundant for many buttons and not necessary. So how can you do this?
Using CKeditor 4.4.3
CKEditor does not currently support setting two styles on the same element from their dropdown. Have a look at this or this ticket in their tracker.
If adding the classes in the source view is not an option you may have to write your own plugin (like this SO user is doing for colors.
I'm new in Ext, I see some codes in Ext.onReady(...)
tabItems.push({
id : 'schema-${form.schema.id}',
title : '${form.description}',
tabTip : '${form.description}',
tooltipType: 'title',
xtype : 'ttpanel',
executeScripts : true,
listeners : { load : initObjs, unload : unloadObjs, activate : ... },
autoLoad : { url : 'selection.do',
params : ...,
scripts : true,
callback : cb1
}
}
);
My question is, of:
"load:initObjs",
"callback:cb1",
page is rendered and user can operate it,
which of these three runs first? Why?
Thanks a million!
I am using fancybox 2 and am appending html content to the modal. I turned of scrolling, and now the content that overflows the modal is hidden. Is this a problem with the max-height of the modal? How do I fix this?
My Code:
$('.fancybox-open').fancybox({
openEffect : 'none',
closeEffect : 'none',
'scrolling' : 'no',
'closeBtn' : true,
afterLoad : function() {
this.content.html();
}
});
You have multiple possible reasons this is breaking.
We need more info for a definitive answer, but here are some likely/possible reasons.
Try a few of these parameters:
$('.fancybox-open').fancybox({
openEffect : 'none',
closeEffect : 'none',
'scrolling' : 'no',
'height' : 1000, <--- Try these one at a time
'autoHeight' : true, <--- Try these one at a time
'autoResize' : true, <--- Try these one at a time
'fitToView' : true, <--- Try these one at a time
'closeBtn' : true,
afterLoad : function() {
this.content.html();
}
});
You can read the full plugin options documented here:
http://fancyapps.com/fancybox/#docs
Please help. I use tinyMCE as inline editor. So I need that when user in edit mode press enter then will be <br /> not <p>. I read manual and FAQ and try
tinyMCE.init({
'height' : '100%',
'widht':'100%',
'content_css' : styles + ',/sdtc-new/nc/interface/common/css/mce-editor.css',
'mode' : "specific_textareas",
'editor_selector' : prefix + o.id,
'theme':'advanced',
theme_advanced_buttons1: o.buttons.join(','),
theme_advanced_buttons2 : "",
**theme_advanced_buttons3 : "",
force_br_newlines : true,
force_p_newlines : false,
forced_root_block : '' // Needed for 3.x**
});
But it's not work . Actually some time it's work like when I delete all conetent in edit area and type new text. But i need that it works all time. Please help. Version of tinyMCE 3.4.4
You will need to set
tinyMCE.init({
forced_root_block : false,
force_br_newlines : true,
force_p_newlines : false
...
});
Here is a helpfull section of the tinymce FAQ.
I want to add multi TinyMCE editors and each one has its own configuration in one page?
How I can do it?
You could do something like this:
jQuery version:
$('textarea.editor1').tinymce(
{
script_url : '../admin/tiny_mce/tiny_mce.js',
theme : "simple",
plugins : "", // put plugins here
setup : function(ed)
{
ed.onInit.add(function(ed)
{
});
}
});
$('textarea.editor2').tinymce(
{
script_url : '../admin/tiny_mce/tiny_mce.js',
theme : "simple",
plugins : "", // put plugins here
setup : function(ed)
{
ed.onInit.add(function(ed)
{
});
}
});
Non-jQuery version:
tinyMCE.init(
{
mode : "textareas",
theme : "simple",
editor_selector : "editor1"
});
tinyMCE.init(
{
mode : "textareas",
theme : "simple",
editor_selector : "editor2"
});
This is easy to achieve. I use the jQuery lib to save code, but it is easy to create this code without jQuery. Supposed you have html elements (i.e. textareas) with ids "my_id1" and "my_id1", that you wish to get a tinymce for all you need to do is:
var config_tinymce_1 = {
plugins :"save",
theme_advanced_buttons1 : "bold,italic,underline,save",
theme_advanced_buttons2 : "",
...
};
var config_tinymce_2 = {
plugins :"save",
theme_advanced_buttons1 : "save",
theme_advanced_buttons2 : "",
...
};
$(document).ready(function(){
init_obj_1 = {element_id:'my_id1', window: window};
$.extend(true, init_obj_1, config_tinymce_1);
tinyMCE.execCommand('mceAddFrameControl',false, init_obj_1);
init_obj_2 = {element_id:'my_id2', window: window};
$.extend(true, init_obj_2, config_tinymce_2);
tinyMCE.execCommand('mceAddFrameControl',false, init_obj_2);
});