CKEditor Strips H1 class when switching from source to view mode - ckeditor

When I switch from source view to wysiwyg it strips my h1 classes and other inline stuff, I've looked around and I enabled config.allowedContent = true; in the config file but this does not solve the problem, how can I solve this?
Thanks

Ok, I found the solution, in the config.js file just add this line:
CKEDITOR.config.allowedContent = true;
Do not add the bolean change inside
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
};
I was adding it there with config.allowedContent = true; and that wasnt working.

Related

copy from webpages or word to ckeditor all tags and style intact

I 'm doing to copy web pages or Word documents to CKEditor.
but with the config below some tags, for example span dispear.
How to make all tags and attributes and styles intact?
I use CKEditor 4.
Here's the config.
config.forcePasteAsPlainText = false;
config.pasteFromWordRemoveFontStyles = false;
config.pasteFromWordRemoveStyles = false;
config.allowedContent = true;
You might also check config.pasteFromWordCleanupFile, which defaults to <plugin path> + 'filter/default.js'. If you have modified the default.js file, or are pointing to another cleanup filter file, that might cause your issues.

Set the focus to the editor after a widget is added in ckeditor

How can I set the focus to the editor in CKEditor after a widget is added?
I don't want that the widget stays in focus
have you added startupFocus : true to your config file?
Look up: http://ckeditor.com/forums/CKEditor-3.x/Set-focus-load
An excerpt from my custom config file looks something like this
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
config.extraPlugins = 'confighelper';
config.autoGrow_onStartup = true;
config.autogrow_minheight = 50;
config.autogrow_maxheight = 200;
config.contentsLangDirection = 'ui';
config.startupFocus = true;
//more options...
};

Set CKEditor config dynamically

I need to change one config setting in CKEditor config dynamically.
I'm writing a plugin which adds checkbox to CKEditor toolbar and upon checking/unchecking it - a forcePasteAsPlainText is being changed as true/false.
Issue is that config is being read on initiating CKEditor component and all changes later are being ignored. Is there a possible way to change value 'on the fly'?
You can specif settings in config file that are default initializations for any editor created.
CKEDITOR.editorConfig = function(config) {
config.forcePasteAsPlainText = false;
...
}
You can override the config settings in this way so only the editor initialized will get these changes.
CKEDITOR.replace('myEditor', { forcePasteAsPlainText: ture });
You can also use editor destroy and recreate with custom configs.
var editor = CKEDITOR.instances.myEditor;
if (editor) { editor.destroy(true); }
CKEDITOR.config.forcePasteAsPlainText = false;
CKEDITOR.config.width = 400;
CKEDITOR.config.height = 300;
CKEDITOR.replace('myEditor', CKEDITOR.config);

How to disable WYSIWYG Editor v1.1.1 Context menu

How to disable WYSIWYG Editor v1.1.1 Context menu
I have tried this but dont works
CKEDITOR.editorConfig = function( config )
{
config.removePlugins = 'contextmenu';
//also try this below code
config.removePlugins = 'contextmenu,liststyle,tabletools';
};
Any idea?
Use an module to override the settings
function MODULENAME_wysiwyg_editor_settings_alter(&$settings, $context) {
if ($context['profile']->editor == 'ckeditor') {
$settings['removePlugins'] = 'scayt,menubutton,contextmenu';
}
}
Do not forget to replace MODULENAME with your own module name.

How to inject CSS located on /skin?

I want to inject a css file located on the skin folder in a browser page.
It is located on chrome://orkutmanager/skin/om.css, accessing manually show the file contents correctly.
I've tried this, but it's not working... What am I missing, or is it impossible?
You can also use the nsIStyleSheetService:
loadCSS: function() {
var sss = Components.classes["#mozilla.org/content/style-sheet-service;1"]
.getService(Components.interfaces.nsIStyleSheetService);
var ios = Components.classes["#mozilla.org/network/io-service;1"]
.getService(Components.interfaces.nsIIOService);
var uri = ios.newURI("chrome://addon/skin/style.css", null, null);
if(!sss.sheetRegistered(uri, sss.USER_SHEET))
sss.loadAndRegisterSheet(uri, sss.USER_SHEET);
}
If you use USER_SHEET, the website's own CSS rules have higher priority than yours. Using AGENT_SHEET, your CSS should have higher priority.
In any way I needed to enforce some rules by using hte !important keyword.
I found this workaround. Read the file then inject it's contents...
function Read(file)
{
var ioService=Components.classes["#mozilla.org/network/io-service;1"]
.getService(Components.interfaces.nsIIOService);
var scriptableStream=Components
.classes["#mozilla.org/scriptableinputstream;1"]
.getService(Components.interfaces.nsIScriptableInputStream);
var channel=ioService.newChannel(file,null,null);
var input=channel.open();
scriptableStream.init(input);
var str=scriptableStream.read(input.available());
scriptableStream.close();
input.close();
return str;
}
var style = $("<style type='text/css' />");
style.html(Read("chrome://orkutmanager/skin/om.css"));
$("head").append(style);
I found that the link you referred to works if you reference the page document. In my case, using gBrowser.contentDocument worked.
var fileref = gBrowser.contentDocument.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", "resource://extensionid/content/skin/style.css");
gBrowser.contentDocument.getElementsByTagName("head")[0].appendChild(fileref);
Obviously make sure that you can access your css via the resource:// protocol.

Resources