I want to be able to add a class attribute to a UL in source mode of CKEditor. When I do that and switch back to the normal editor mode the
<ul class="xxxx">
becomes
<ul>
How can I get it to not remove the class tag?
This happens because of Advanced Content Filter (ACF).
You need to use extraAllowedContent like this: config.extraAllowedContent = 'ul(*)'; to allow any CSS class for ul element.
You can be more specific and allow only certain CSS classes, like this: config.extraAllowedContent = 'ul(class1,class2,class3)'; (note no space between names).
You could also disable ACF (not ideal though) and allow everything like this: config.allowedContent = true;
Related
When the user finish writing in the "ckeditor 5" I take the html input and store it in database:
The content will be saved in database as text:
<blockquote><p>Hello <strong>world</strong></p></blockquote><p> </p><figure class="table"><table><tbody><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></tbody></table></figure>
Now when I get this content from database and I want to show it in the front-end, It shows up like this:
How to make the text css style the same as how the user has entered in the "ckeditor 5" ?
According to laravel's documentation
By default, Blade {{ }} statements are automatically sent through
PHP's htmlspecialchars function to prevent XSS attacks. If you do not
want your data to be escaped, you may use the following syntax:
Hello, {!! $name !!}.
You dont need to duplicate the editor styles.
All editor have base class and styles for content inside that class.
for ckeditor5 for exmaple that class 'ck-content'.
From the docs https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/content-styles.html
Important!
If you take a closer look at the content styles, you may notice they
are prefixed with the .ck-content class selector. This narrows their
scope when used in CKEditor 5 so they do not affect the rest of the
application. To use them in the front–end, you will have to add the
ck-content CSS class to the container of your content. Otherwise the
styles will not be applied.
Finally, using WYSIWYG (What You See Is What You Get) editors you should ovveride the editor styles config to provide same styles for the editor and for wrapped display content with same class.
Otherwise, the final solution will not be WYSIWYG.
Solution 1:
Install bootstrap on display.php
https://getbootstrap.com/
Solution 2
You need to apply CSS manually on the display page.
HTML from database on (for example) display.php:
<blockquote><p>Hello <strong>world</strong></p></blockquote><p> </p><figure class="table"><table><tbody><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></tbody></table></figure>
Write CSS on display.php like:
<style>
table tr td{
border:solid 1px #CCC;
}
</style>
My stakeholders are using CKEditor version 4.10.1 in Drupal (8.6.13).
They have a use case where they are often copying from Google Docs and pasting into the WYSIWYG textarea. Google uses inline css properties. Here's a sample:
<span style="font-size:36pt;font-family:Merriweather;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Your Name</span></p>
They often have to change the sizes of text, and also the font face. In the example above, these are font-size:36pt;font-family:Merriweather; in the style tag.
I am looking at the pasteFilter configuration directive. In the example, they show how to filter certain tags, and tags with certain attributes:
config.pasteFilter = 'h1 h2 p ul ol li; img[!src, alt]; a[!href]';
However, what I want to remove is just certain css styles. For instance, if the paste input is
<span style="font-size:36pt;font-family:Merriweather;vertical-align:baseline;">Hello</span>
then I want the source to read
<span style="vertical-align:baseline;">Hello</span>
I.e. only font-size:36pt;font-family:Merriweather; are removed. (And I want to remove any font-size and font-family specification.)
Is that possible with pasteFilter? If so, how do I express that?
Edit whitelist solutions don't meet our acceptance criteria, because my stakeholders want to preserve other directives, such as bold, italics, etc. We don't want to strip all the styling, or the entire span tag; we only want to remove font-size and font-family.
According to How to Allow Everything Except…, you can use:
config.allowedContent = {
$1: {
// Use the ability to specify elements as an object.
elements: CKEDITOR.dtd,
attributes: true,
styles: true,
classes: true
}
};
config.disallowedContent = '*{font*}';
// if you want to be more specific: config.disallowedContent = 'span{font-size,font-family}';
I tested it and it works, see for yourself in this JSFiddle I've created.
Good day.
In my code i have line <ul class="myclass"> but after copy on CKEDITOR i have line <ul> without class myclass.
Tell me please how disabled filter code for elements ul, li and div ?
You need to search a bit. more. IF you look for CKEditor issues on Stackoverflow. About 30% goes about the Content filtering.
For all support about this look here: http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter
or put the following line in your config to disable the content filter. (It's better to configure it)
CKEDITOR.config.allowedContent = true;
EDIT:
If you place it in your editor file it will look like this:
CKEDITOR.editorConfig = function( config )
{
config.allowedContent = true;
};
The accepted answer disables all content filtering. A more targeted approach would be to configure extraAllowedContent to specify that you want to allow ul, li and div tags to have any class. You would add this line to your config.js file:
config.extraAllowedContent = 'ul li div(*)';
More information:
config.extraAllowedContent - specifications for this configuration
Allowed Content Rules – how to write allowed content rules, which are used in several places including config.allowedContent, config.disallowedContent, and config.extraAllowedContent
I'm having a little inline editor which uses a contenteditable div. If you have something like this: http://jsfiddle.net/6psJ4/1/ is it possible to make the image not deletable?
<div contenteditable="true">hi<img src="http://tinyw.in/BH9V" contenteditable="false"></div>
Worked for me on Firefox and Chrome, but it's not very usable - e.g. moving caret after the image wasn't possible without ecitable content after it.
AFAIK without custom delete key handler and bogus brs/spaces corrections it won't be possible to implement this as well as e.g. CKEDITOR.
Check this: http://nightly.ckeditor.com/7529/_samples/placeholder.html
If you copy some html on a page that has a custom html attribute e.g.
<p foo='bar'>this is a paragraph with custom attribute</p>
then paste it into a contenteditable element, Firefox will remove the foo attribute. It will retain any html-compliant attributes like id, name etc but none that do not conform.
Is there any way to prevent this and allow it to be pasted? IE and Chrome both allow this.
You can use data elements, see here:
http://html5doctor.com/html5-custom-data-attributes/
<li data-spacing="10cm" data-sowing-time="March to June">Carrots</li>