I am using CKEditor to show some html that I have stored in my DB.
But I don't want to show all the elements while loading the content.
The problem is CKEditor ignores style like "display:none".
Any suggestions?Please help.
I found the solution.
CKEditor does support style like display: none but there is an option that I have to set to true.
config.allowedContent = true;
Related
I try to put this in the source code of CKEditor:
<h2>Title</h2>
It automatically transforms into this:
<h2>Title</h2>
I tried setting config.allowedContent = true; in config.js, but it does not do anything.
Thank you
Please have a look at below issues:
https://dev.ckeditor.com/ticket/9457
https://github.com/ckeditor/ckeditor-dev/issues/514
CKEditor in general doesn't support transparent content model, but perhaps based on tip from second link, you will be able to achieve that result by changing the editor DTD.
Using ckeditor in Drupal 8. The dropdown menu itself is too small and short and the type inside is too large. How can I actually change the formatting of the Styles dropdown menu itself?
I'm not sure if you need to do anything special inside Drupal 8 however from CKEditor point of view you need to change CSS classes responsible for dropdowns.
Below are classess used by dropdowns in CKEditor 4.x for default skin.
Dropdown buttons on toolbar:
.cke_combo__font .cke_combo_text
.cke_combo__fontsize .cke_combo_text
.cke_combo__format .cke_combo_text
.cke_combo__style .cke_combo_text
Dropdown panels:
.cke_combopanel__font
.cke_combopanel__fontsize
.cke_combopanel__format
.cke_combopanel__styles
To resize editor droprown button and panel for e.g. Format, please add the following rules in your page CSS file:
.cke_combo__format .cke_combo_text{
width:150px !important;
}
.cke_combopanel__format {
width:250px !important;
}
Since Toolbar is a part of main page, these rules can be included in head section of your HTML page, can be put in external CSS file which is then imported to your HTML page (with the help of link tag) or can be added in editor CSS skin files directly e.g. in editor.css although that last method will be problematic in case of editor upgrades so I don't recommend it.
Drupal 8 / 9: You can define a stylesheet for CKEditor in your (Admin-)Theme to override the appearance of the editor.
First add a new CSS-file (e.g. css/ckeditor-override.css) to your admin-theme.
Add the following line to your admin-(sub)theme's info-file (e.g. myadmintheme.info.yml):
ckeditor_stylesheets:
- css/ckeditor-override.css
Then you can change the appearance of the editors – see hints of j.swiderski answer – for example:
.cke_combopanel {
width:200px !important;
}
.cke_panel_list .mystyle {
font-size: 1em !important;
}
If your stylings do not work, have a look into your theme: Maybe it styles the editor, too, and overrides your stylings?
Some themes – like "Gin" – make it easy and provide a css-file for custom overrides. Then simply put your style-overrides for the editor there.
If you don't want to create a subtheme you can try Asset Injector-Module.
How do I disable contents for styles when pasting to CKEditor?
Overview, I'm trying to fix width styles on my DOMPdf, but inline styles pasted to CKEditor is messing up with the styles I've set up in DOMPdf.
I've applied what was posted here https://docs.ckeditor.com/#!/guide/dev_disallowed_content.
And so far, here's some of what I tried
CKEDITOR.config.disallowedContent = "table(width)",
CKEDITOR.config.disallowedContent = "table[style]"
But when I copy and paste from word docs or customized html strings, styles or width would still be pasted. Any tips? Thanks!
First of all if you want to remove the width style from the table, you need to use:
CKEDITOR.config.disallowedContent = 'table{width}';.
The rule CKEDITOR.config.disallowedContent = "table(width)" will remove the width class from the table and CKEDITOR.config.disallowedContent = "table[style]" will not do anything because styles are defined in {} and not in [].
Read more about the format of Allowed Content Rules here: https://docs.ckeditor.com/#!/guide/dev_allowed_content_rules
But when I copy and paste from word docs or customized html strings,
styles or width would still be pasted.
Please open the Full preset editor sample and try bolding the text or using some inline styles from the Styles dropdown. You will see tags like strong, code, big or span etc. are being used. In order to disallow them your ACF rule would need to look like so for example:
var editor = CKEDITOR.replace( 'editor1', {
disallowedContent : 'span;code;strong;big'
});
Please note that above rule disables span, strong, code and big tags completely in CKEditor. If you still wish to use these tags in the editor but filter content only during pasting, you should use paste events and regex to change the incoming HTML:
https://docs.ckeditor.com/#!/api/CKEDITOR.editor-event-paste
https://docs.ckeditor.com/#!/api/CKEDITOR.editor-event-afterPasteFromWord
I am using CKEditor 4.4.5.
Users use the text colour icon to change the colour of a word which works fine. When one checks the underlying HTML, it shows:
<p><span style="color:#FF0000">test </span></p>
However when clicks the "source" icon again to return to the standard non HTML view, the colouring has gone, although the underlying HTML is still correct. If you take this HTML and render it in a browser it will work correctly. So it seems that CKEditor is not able to render text colour correctly, unless freshly changed using the text colour icon.
We had customers thinking that the colour had not changed, and then trying to fix the issue in the HTML, which resulted in the total corruption of the HTML due to human error.
Is this a bug, or am I missing something?
Thanks.
As for CKEditor it might so happen that Advanced Content Filter will strip undesired tags / attributes.
If you don't have colorbutton plugin, CKEditor will strip this span (see standard demo).
You have 2 simple solutions:
Add colorbutton plugin.
Simply add to your config:
config.extraPlugins = 'colorbutton';
Add ACF proper rule.
config.extraAllowedContent = 'span{color}';
For more informations about ACF see Content Filtering (ACF).
We have additional placeholders, which are embeded in conent edited by CKEditor and we need to be possible to place such placeholders before and after TR-tag, so we could organize repeating of data in the table. But CKEditor probably find that is not valid HTML and take out repeater placeholders before the table.
For example I write next html in source mode:
<table><tbody>{start}<tr><td>...</td></tr>{end}</tbody></table>
I switch to html mode and back to source, now my html is treated to the next view:
<p>{start}{end}</p> <table><tbody><tr><td>...</td></tr></tbody></table>
Possibly there is a CKEditor switch to turn off all syntax cleanup or specially for tables?
Try Adding this line to Config.js file:
config.allowedContent = true;
CKEditor is not a source code editor, but a WYSIWYG editor which uses browsers' contenteditable implementations for its editing feature. Therefore, it needs to work on valid and real HTML.
Although, check the config.protectedSource setting. You'll be able to hide those {start|end} tags from parser.