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
Related
Was wondering if anyone knew why this may be happening? I've set up an InDesign document importing from Word with the correct formatting but then when I import the same document from Word with this time using the style mapping it doesn't retain and apply the styling.
I imported it - fixed all the necessary formatting issues and then made sure to save the paragraph styles for use later. I've then went back to the beginning and imported the word document again and this time used the customized style mapping to match the corresponding word styles with the now-correct InDesign styles. When I then place this document, however, it doesn't seem to retain the styling. Some styling does get transferred over but then some, such as indentation, does not.
This is it what it looks like on the correct document
Correct image
And then when I import it again with the styles mapped to the same styles they use it doesn't work.
Incorrect image
For example the sub heading is now numbered and indented wrong and the box on the left is now gone but it is the active applied style, with changes (I presume from the +?) If I then reapply it does work fine?
I'm not 100% sure why the paragraph style is there and works but does not seem to apply properly?
It can be fixed to a degree if you perform Find/Change for all your styles:
blank field with style --> blank field with the same style
for every single paragraph style.
It can be done manually, but since we're here I'd propose this script:
var doc = app.activeDocument;
var styles = doc.paragraphStyles;
var s = styles.length;
while (s--) {
app.findGrepPreferences.findWhat = '';
app.findGrepPreferences.appliedParagraphStyle = styles[s];
app.changeGrepPreferences.changeTo = '';
app.changeGrepPreferences.appliedParagraphStyle = styles[s];
doc.changeGrep();
}
app.findGrepPreferences = NothingEnum.nothing;
Probably the same is applied to character styles as well.
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).
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
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.
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';