So I have definition (yml file) of CKEditor 4 style combo like this:
settings:
plugins:
stylescombo:
styles: "div.style1|Style1\r\ndiv.style2|Style2\r\nspan.style1|Style1\r\nspan.style2|Style2"
Basically I have 2 styles for div elements and 2 for span elements, but named the same.
Problem is if they are named like this, names are identical then only span styles appear in editor. Div style are gone?
If I change i.e. only single name:
settings:
plugins:
stylescombo:
styles: "div.style1|Style1A\r\ndiv.style2|Style2\r\nspan.style1|Style1\r\nspan.style2|Style2"
(renamed first Style1 -> Style1A) then everything works well, both are shown. Problem is that I need them to be the same.
Any idea how to overcome this issue (is it a bug or missconfiguration?) ?
Related
I'm using CKEditor 5 on my website in order to allow users to generate PDF templates for their company.
My issues is, that once I take the data out of the ckEditor, every styled element has a class="CSS-Class-Here", which is problematic due to the fact that when I convert the HTML contents of the CKEditor to PDF, the PDF doesnt know any of these classes.
Is there any way to get CKEditor to save these classes as inline styles?
I know that its possible to create a plugin for a specific element for a specific style, but I want everything to act this way, not something specific.
Also, It's impossible to just inject the styles into the PDF itself, due to the fact that ckEditor keeps their styles in javascript functions and creates them on demand.
For example:
Yellow highlighted text comes out as:
<mark class="" marker-yellow "">Random Text</mark>
I would like it to come out as:
<mark style="background: yellow">Random Text</mark>
Meaning that the style that's present in the marker-yellow class should be applied inline directly to the element itself.
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.
Is there a way to add a tag to the format dropdown that would wrap the text in <small></small> tags?
Editing config.js as follows causes a runtime error:
config.format_tags = 'small;p;h1;h2;h3;pre';
probably because <small> is not block level?
The reason of the runtime error is, that js can not find CKEDITOR.config.format_small.
You have to do two things:
Search for CKEDITOR.config.format_h6 in ckeditor.js and add CKEDITOR.config.format_small={element:"small"};. Then the error is gone, but you can not see the entry yet.
open the languagefile you want (e.g. en.js) and add "tag_small":"small text".
now CKEditor supports the small tag.
This works for me, I hope it works for you too.
If I want to add a custom section tag to format tags, this work for me:
1. Go to config.js, add
config.format_tags = 'h1;h2;h3;h4;h5;h6;section';
config.format_section = { element : 'section' };
2. Then open the languagefile you want (e.g. en.js) -> lang/en.js
search for "tag_pre":"Formatted", and add "tag_section":"Section".
If you're looking to wrap text in a certain tag, you can also achieve this with the Style dropdown as well.
First, configure your editor to allow styles at /admin/config/content/formats/manage/full_html. Replace full_html with whatever editor version you want to modify
Drag the Styles button to the active toolbar if it isn't already there
Add items to "Styles Dropdown" tab under CKEditor plugin settings
Each option takes the form css_selector | Human Visible Name so in your case, you'd add small.my_element_class | Super Special Small or something similar.
Instructions abbreviated from this post: https://www.axelerant.com/resources/team-blog/drupal-8-custom-styles-in-ckeditor
I would like to have several content blocks in my documents to output them in the templates at different positionions (eg aside and sections). In this case I do not want to work with partials. As I need some marginal jade formating, I can not put these into the Metadata as this is not rendered (as far as I tested it). Are there any other ways?
For illustration in the doc:
text1: p my first textblock
text2: h1 my second textblock
and in the template:
section document.text1
aside document.text2
I am Using CKEditor in my application where the users can write blogs, create pages etc..,
Source mode is disabled for the editor. Writing xml in the editor's text area is not retained after saving the content. I clearly see that the content got HTML Encoded and the same is supplied as input to the CKEditor's textarea.
Works as designed. Whatever you enter into the WYSIWYG area, will get HTML encoded. How would you want to behave it differently?
If you want a text editor for writing XML, maybe the answers to this question are useful: Textarea that can do syntax highlighting on the fly?
I too want CKEditor to support XML tags, but I understand that you can't just type them into the main window - anything typed here is assumed to be actual content, not tagging, and therefore gets encoded.
What I'd like to do is define a list of styles that cause a tag of my choosing to be used, e.g. if the user chooses the 'example' style, CKEDitor does <x>content</x>. Unfortunately I haven't had much success with this, despite hacking the dtd.js file.
My current solution is to define a list of styles but map them to a standard HTML tag, then put my desired XML tag name in as an attribute. I'll then need to write some XSLT that transforms the data later.
CKEDITOR.stylesSet.add('myStyles',
[{
name: 'Example sentence',
element: 'span',
attributes: {'class': 'example', 'data-xmlTag': 'x'}
}];
config.stylesSet = 'myStyles';
element specifies a standard HTML tag – I use <span> if I want the XML to be inline and <div> if I want it to be block level. The data-xmlTag attribute says what XML tag I actually wanted to use (x in this case). The class allows me to define some styles in CSS and means I can group several XML tags under one class name. To define some CSS:
config.contentsCss = CKEDITOR.basePath+'tagStyles.css';