I need to be able to float images to the right or left, in the ckeditor, as in this example:
http://ckeditor.com/demo#widgets (see under Enhanced images)
I've downloaded the plugin and I've added the following code to my ckeditor-replace:
extraPlugins: 'image2',
removePlugins: 'loremipsum, texttransform, liveedit',
image2_alignClasses: [ 'image-left', 'image-center', 'image-right' ],
image2_captionedClass: 'image-captioned'...
Then, in my css-file, I floated the classes to their respective values: left, right (when I choose to float the image to the right, under the source, I see that it is given the class image-right). So far so good, but like I said, the changes need to occur in the ckeditor. The user needs to see how his document will look like.
Where, or what, in the styles, do I need to change the behavior in the ckeditor? I checked the style documentation, but it's still unclear to me how I manipulate the classes (if that's what I need to do).
For instance, this:
var style = new CKEDITOR.style( { element: 'img', attributes: { 'class': 'foo' } } );
I figured I'd need to target the class image-right and give it a float, right.
Suggestions?
As explained in the documentation of the Captioned Image feature, you need to define the CSS rules for these classes in your stylesheet. Once this configuration option is set, corresponding style definitions must be supplied to the editor:
For classic editor it can be done by defining additional styles in the stylesheets loaded by the editor. The same styles must be provided on the target page where the content will be loaded.
For inline editor the styles can be defined directly with <style> ... <style> or <link href="..." rel="stylesheet">, i.e. within the <head> section of the page.
As for defining the stylesheets for editor content, use the config.contentsCss configuration option, e.g:
config.contentsCss = [ '/css/mysitestyles.css', '/css/mywidgetstyles.css' ];
See the following showcase of captioned image styling and alignment done through classes.
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.
I can't seem to add my own CSS file to the CKEditor. I'm downloading a custom version 4.5.8 and include the "StyleSheet Parser" plugin. The "Styles" list has the default styles, but not the ones from my css file.
This the code:
CKEDITOR.config.contentsCss = '../../../css/test.css';
CKEDITOR.replace('editor1');
The editor is loaded successfully, but the "Styles" list does not contain my styles. The location of my css files seems right, when I try other paths I get an error.
This is my test.css:
.testStyle {
color: red;
font-family: "Arial Black", arial-black;
}
Already tried clearing my browsers cache. I tried it in multiple browsers.
I tried one other thing: download the StyleSheet Parser separately, put it in the plugins folder, and use the following code:
CKEDITOR.config.extraPlugins = 'stylesheetparser';
CKEDITOR.config.contentsCss = '../../../css/test.css';
CKEDITOR.replace('editor1');
The "Styles" list is still not showing my style, but when I edit the source code and put my style in like this, the style is applied to the text in the editor(!):
<p class="testStyle">Test text</p>
Sources:
- CKEditor docs for the StyleSheet Parser
- The "contentsCss" option docs
The Styles in CKEditor require an element, so the StyleSheetParser only recognizes rules that include an element and a class name.
You should change your CSS to
p.testStyle {
color: red;
font-family: "Arial Black", arial-black;
}
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
So I want to make the texts in joomla articles have an individual background images. Let's say I have an ellipsis image (like shown below) and I want every word on that article have the ellipsis image behind their text.
How to do that?
Thanks in advance!
you should work with CSS class and span tags:
Define a new css class with your background-image and add the class to your default .css file or custom file: eg. .ellipsis {background: url(img_flwr.gif; background-repeat: no-repeat)}. Make sure you are using the correct path in your URL
Put span tags around the words and use the class: <span class="ellipsis>word</span>.
This should work.