Ckeditor allowedContent for html tag

Question

I am using Ckeditor as rich editor for text input in the Chrome browser. I also have added some html id tag for easy parsing by bs4 after the system getting the data.

The following is my setting in the html:

CKEDITOR.replace( 'editor', {
toolbar : 'Basic',
uiColor : '#9AB8F3',
height : '70%',
startupShowBorders: false,
})

And in the config.js:

config.toolbarGroups = [
    { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
    { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
    { name: 'links' },
    { name: 'insert' },
    { name: 'forms' },
    { name: 'tools' },
    { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },
    { name: 'others' },
    '/',
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
    { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
    { name: 'styles' },
    { name: 'colors' },
    { name: 'about' }
];

// Remove some buttons provided by the standard plugins, which are
// not needed in the Standard(s) toolbar.
config.removeButtons = 'Underline,Subscript,Superscript';

// Set the most common block elements.
config.format_tags = 'p;h1;h2;h3;pre';

// Simplify the dialog windows.
config.removeDialogTabs = 'image:advanced;link:advanced';

config.allowedContent = True;

};

Although I have already followed the instruction to allow all html tag content to be preserved with config.allowedContent = *; in the config.jd. However, it seems not working as I got the following results when getting data (by CKEDITOR.instances.editor.getData()):

<span style='font-size:11.0pt;'> content </span>

instead of this that I want:

<span id="news_content" style='font-size:11.0pt;'> content </span>

In other words, it still strips out all the html tag I added.

When I checked the source code, I found that the same textarea content was produced twice with the one with the tag being put in hidden format, i.e.,

<textarea name="editor" id="editor" rows="100" cols="40" style="visibility: hidden; display: none;">

And the editor produces another version in the real textarea that allows me to edit. However, this is useless because all the html tags are stripped there.

So, my question is, how to preserve the html tag in the real textarea so that I can parse the html with id tags after editing and submission. Could anyone advise on this? Thanks a lot.

CL. L CL. L · Accepted Answer · 2017-01-24T15:38:46

I may not be able to answer my own question, but I like to share my solution with those encountering similar situation.

In short, finally I give up using ckeditor or any plug-in editor as many of them will strip off the html tag, which is essential to me in the subsequent process.

Thanks to html5, my solution is using editable div. The setting is very simple as below:

css:

#my-content {
  box-shadow: 0 0 2px #CCC;
  min-height: 150px;
  overflow: auto;
  padding: 1em;
  margin: 5px;
  resize: vertical;
  outline: none;
}

html:

<div id="my-content" class="editable" style="width:900px; height:400px; text-overflow: ellipsis; overflow-y: scroll;"></div>

js script:

$('.editable').each(function(){
    this.contentEditable = true;
});

So far, I am happy with it, it shows what exactly the html code showing and preserve all the tags I added. The only downside is it does not provide any toolbar for format editing. My solution is to make one for it, and via the following link you can get a very good tutorial as to making a toolbar with a ready-to-use demo as illustration.

https://code.tutsplus.com/tutorials/create-a-wysiwyg-editor-with-the-contenteditable-attribute--cms-25657

Hope this helps.

Ckeditor allowedContent for html tag

1 Answers