I work with Impresspages 4 and I want to know how I can add h1,h2 and h3 addings to the RichText Widget?
Thanks!
Please have a look how other TinyMCE related plugins are implemented
http://market.impresspages.org/plugins/?q=tinymce
And do your own customizations to TinyMCE config. The default config can be found in Ip/Internal/Core/assets/tinymce/default.js
'valid_elements' is the setting that you want to append with h1, h2, h3 tags. And add Header select tool to the toolbar1. You will likely need to refer to the TinyMCE configuration guide.
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 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;
How can I enable filter to filtered (h1, h2, h3 tags) when CKEditor is in source mode? I used button which save content and close editor. If user use wysiwyge mode filter works, but when user switch editor to source mode and manually type H1, H2 etc. CKEditor won't filter this text (code).