craftcms / ckeditor Goto Github PK
View Code? Open in Web Editor NEWEdit rich text content in Craft CMS using CKEditor.
Home Page: https://plugins.craftcms.com/ckeditor
License: GNU General Public License v3.0
Edit rich text content in Craft CMS using CKEditor.
Home Page: https://plugins.craftcms.com/ckeditor
License: GNU General Public License v3.0
Looks like CKEditor 5 is finally reaching some significant stability. Was curious what the going thoughts are on a roadmap for Craft integration. Thanks!
CKEditor 5 v1.0.0 beta released
We consider the API to be quite stable now and we do not expect any significant API changes at this stage. Feel free to fully try out CKEditor 5’s potential and update your code to align with the recent API changes.
See #85
entity (eg by hitting ENTER twice, which creates an empty paragraph).We have a matrix field with 10 options that our client can use to build their content. Some of those layers make use of the new CKEditor field. While testing, I found that having more than 5 CKEditor fields in your entry takes a big performance hit on the editors browser.
Adding new fields, resizing the browser or editing content within any type of field takes multiple seconds and the fans on my MBP kick in instantly. I have attached a video below where you can see the bad performance when resizing, adding and deleting fields.. This site in the video below is not hosted locally.
If you need any other information, please let me know.
I've tried the following urls in settings but unable to load them correctly:
http://@web/js/ckeditor5-31.1.0/src/ckeditor.js
http://$DEFAULT_SITE_URL/js/ckeditor5-31.1.0/src/ckeditor.js
Set baseurl to one of the values above and save (everything is validated and saves ok)
load a CKeditor instance
the js file loaded will have an incorrect path
We’re trying to make use of CKEditor's media embed option for YouTube and Vimeo embeds only. For that reason we’re not looking to subscribe to a premium service such as Iframely, as suggested in the CKEditor docs.
Instead, we’ve enabled the previewsInData
config option for the editor, which works, but we can’t seem to workaround HTML Purifier removing the code that this option renders instead.
When set to true, previewsInData
renders an embed as the following code:
<figure class="media">
<div data-oembed-url="https://url/">
<iframe src="https://preview/"></iframe>
</div>
</figure>
Instead of:
<figure class="media">
<oembed url="https://url/"></oembed>
</figure>
For info, this is our CKEditor config:
{
"mediaEmbed": {
"previewsInData": true
}
}
And this is our HTML Purifier config:
{
"Attr.AllowedFrameTargets": [
"_blank"
],
"Attr.EnableID": true,
"HTML.AllowedComments": [
"pagebreak"
],
"HTML.SafeIframe": true,
"URI.SafeIframeRegexp": "%^(https?:)?//(www.youtube.com/|player.vimeo.com/|vimeo.com/)%"
}
We're using Craft CMS Pro 4.4.7.1 and CKEditor 3.2.0.
We suspect the data-oembed-url
is clashing with HTML Purifier, but can’t find any way to enable this attribute. Any advice would be appreciated, thanks.
I would like to be able to link entries the same way we are now able to link assets
Thanks!
I believe this functionality was introduced for Redactor. It's the ability to hide/show certain items on the toolbar based on user groups. For Redactor, the configuration lives primarily in Craft or JSON configs. CKEditor requires inline customization (unless I am misunderstanding). In other words, for each editor instance, we need to pass an object in JS to initialize it.
I created a playground (gross code) for me to explore and learn more about it. My long-term goal is to be a builder that will take in environment variables and spit out a CKEditor configuration. I will add additional tickets for some other questions regarding it.
For this ticket, my question in code can be viewed here. I am querying a relative URL (maps to a controller in my module) to return if a user is a superuser. This isn't an ideal solution for tons of reasons, but the obvious reason is that it isn't scalable (required URL be available on all of our sites).
I am wondering if there is a better way? Is the current user's group-level exposed on window.craft? If not, could it be? The end goal for me to be able to change the toolbar based on permissions. I'm not sure what the best way to do it is.
Curiosity question: Is the JS for the admin panel still built with Garnish?
The Default.json
config for HTML Purifier that is included on installation has the following lines, which should prevent YouTube and Vimeo video embeds from being stripped out of a CKEditor field on save, but embeds from either platform are still being stripped out.
"HTML.SafeIframe": true,
"URI.SafeIframeRegexp": "%^(https?:)?//(www.youtube.com/embed/|player.vimeo.com/video/)%"
I wasn't totally sure if this issue belongs here, or in the Craft starter, or with HTML Purifier itself, but for reference, I tested this with Redactor, and it wasn't an issue there, the embeds remained after save.
ddev composer require craftcms/ckeditor -w && ddev exec php craft plugin/install ckeditor
https://cdn.ckeditor.com/ckeditor5/32.0.0/classic/ckeditor.js
as the CKEditor Build URL.Default
config.Hey :)
I think all this option would be great by deafult..
"image": { "toolbar": [ "imageStyle:inline", "imageStyle:wrapText", "imageStyle:breakText", "|", "toggleImageCaption", "imageTextAlternative"
Tableproperties, Cellproperties
Thx
Craft version: Craft Pro 4.4.11
Plugins & versions: CKEditor | 3.4.0
When editing content in Arabic (right-to-left language), the instances of CKEditor are still the left-to-right (and not RTL).
Please note these CKEditor inputs are part of a matrix field. I haven't tested it as a standalone field.
The entry title field is rtl, which means the page reading direction is set correctly.
The div that wraps the CKEditor input wrapping has the following value for the class attribute: "input rtl".
CKEditor require the class "cke_rtl" (as opposed to "rtl") to switch to RTL mode (see https://ckeditor.com/docs/ckeditor4/latest/guide/skin_sdk_rtl.html) That might be the way to fix the issue.
Thanks!
CKEditor places wrong heading. E.g. h2 is chosen, h3 is placed.
When a CKEditor field contains a <br>
tag it gets marked as changed on focus.
<br>
tag (eg with SHIFT + ENTER
).The field should not get marked as changed until the editor actually types something.
The field gets marked as changed.
Craft CMS 4.4.7.1
No response
No response
No response
No response
CKEditor 3.2.0
Deprecation error in CP. Does not appear to be plugin-related, but core.
Fields’ isEmpty() method has been deprecated. Use isValueEmpty() instead.
CKEditor 1.0.0-beta.2
Craft Commerce 2.1.3.1
Events 1.0.1
Field Manager 2.0.5
Linkit 1.1.11
SEOmatic 3.1.49
Smith 1.0.0
Sprout Active 2.0.9
Stripe for Craft Commerce 1.2.1
Currently, it is possible for a CMS editor to use CKEditor features that perhaps the developer had intended. This is because even if an item isn't present in the toolbar it doesn't mean you can't use that feature and can still use other editor functionality to include certain formatting or content.
For example:
I think this is because of the way this plugin loads all of its plugins upfront.
ckeditor/src/web/assets/ckeditor/src/ckeditor.js
Lines 61 to 105 in fcc641b
According to the CKEditor docs things like autoformatting will only work if a related plugin is included e.g. the ** autoformatting short for bold will only work if the Bold plugin is loaded.
Would it be possible to conditionally add/remove plugins at runtime based on the toolbar items included?
We can manually remove plugins by passing in a custom config but it would be more intuitive if the available features followed the toolbar.
return {
removePlugins: [
'AutoImage',
'BlockQuote',
'Code',
'CodeBlock',
'Heading',
'HorizontalLine',
'MediaEmbed',
'TodoList',
'Underline',
],
}
See title
.ck-editor__editable
element has the accessible name “Editor editing area: main” and doesn’t reference instructions, errors, etc., as other fields do.aria-describedby
If I select the source code option and then try to save the entry (with the source code open), the browser crashes.
Hi.
When i add a new text block and typing some random text it does not show up in the preview window. Can't see any errors in the console.
If I then save the entry in Live Preview mode it says that the field is empty and I have to re-enter the text. My text block is required.
Craft CMS RC 8 and CKEditor 1.0.0-beta.2.
I noticed that the wordCount option in the plugin's configuration does not seem to be doing anything, despite appearing as an autocomplete option. I am unsure if this is due to a missing NPM package in the plugin or some other issue.
In addition, I am curious about the availability of PRO add-ons for CKEditor within this plugin. For instance, are or will the minimap and comments features be available, and if so, how's CKEditor pro add-on licensing taking care of?
Steps to reproduce:
/admin/entries/contentPages/slug-name/
/admin/entries/contentPages/slug-name/versions/163
Versions:
Adding a table works as expected, but if you thereafter want to add a column or row that is not possible.
It can be solved by this added to the config:
return {
table: {
contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
}
}
These options do however seem very sensible to enable by default.
When I try to make bullets, the actual bullets don't appear, and the text doesn't get indented.
You can see the video here:
The CKE field is inside of a Matrix field, but I'm not sure if that really makes a difference.
Lists in CKEditor are missing padding. It seems like Tailwind reset is removing the margin and padding from all ul
and ol
elements in the control panel. (I'm assuming this CSS is being loaded by Craft itself but please let me know if I should be looking into my other plugins instead)
When upgrading/converting to CKEditor, the markup for existing images with captions changes and the figure and figcaption elements get deleted.
Not sure if this is something I need to fix in HtmlPurifier, but I can embed new images in CKEditor which uses figure elements and these do persist.
<figure><img src="/uploads/shared/1200x630.png?v=1625830523#asset:74:url" alt="OG image" data-image="4ogpunopbfm4"><figcaption>Caption for this image</figcaption></figure>
./craft ckeditor/convert
, open the new CKEditor field<p>
<img src="/uploads/shared/1200x630.png?v=1625830523#asset:74:url" alt="OG image">Caption for this image
</p>
{
"Attr.AllowedFrameTargets": [
"_blank"
],
"Attr.EnableID": true,
"HTML.AllowedComments": [
"pagebreak"
],
"HTML.SafeIframe": true,
"URI.SafeIframeRegexp": "%^(https?:)?//(www.youtube.com/embed/|www.youtube-nocookie.com/embed/|www.youtube.com/watch|player.vimeo.com/video/|fast.wistia.net/embed/)%"
}
My client is requesting optoins in the toolbar that are not there including:
change text alignment
when editing links shoudl be able to set the target i.e. target="_blank"
I can't find this in the documentation. If it's not available now, how soon? also would we lose any data by switching from ckeditor to redactor if we needed to?
I am currently running Craft CMS 3.0.0-RC13
.
When I try to install ckeditor
using composer require craftcms/ckeditor
, I get:
[InvalidArgumentException]
Could not find a version of package craftcms/ckeditor matching your minimum-stability (stable). Require it with an ex
plicit version constraint allowing its desired stability.
My Composer version is 1.6.3
.
However, using composer require craftcms/ckeditor:1.0.0-beta.2
works.
The last release was in January 2018, even though there are commits through march this year. We do actually make use of this. Should we be migrating away from it?
Hello,
love the implementation so far, except that there is no way to add image assets in the CP in Craft 3 after installing the plugin. I can’t find any information on how to make it work with Craft’s asset configuration and the official CKEditor documentation is quite rocket-science to me when it comes to enabling basic image functionality.
Any hints?
ckeditor 1.0.0-beta.2
craft 3.0.1
I'm using the ckeditor and found this bug when setting a conditional to only display content if the field contains data.
{% if entry.overview|length %}
<h2>Asset Overview</h2>
<div class="overview">
{{ entry.overview }}
</div><!-- /.overview -->
{% endif %}
On the front end I expect nothing to display, but that doens't happen because ckeditor is outputting this
<p> </p>
Please advise
Using a custom config, if I set a custom heading option ("subtitle" in this example), the view class I set is being stripped on entry save. Disabling or enabling the "Purity HTML" option on the field has no effect.
Oddly, if I create a style definition and add the style selection option to the toolbar, the classes persist on save as expected (for both the heading option alone, and a paragraph set to the subtitle style.
Config is as follows:
return {
heading: {
options: [
{
model: 'subtitle',
view: {
name: 'p',
classes: 'ck-heading_subtitle'
},
title: 'Subtitle',
class: 'ck-heading_subtitle'
},
{ model: 'heading1', view: 'h1', title: 'Large Heading', class: 'ck-heading_heading1' },
{ model: 'heading2', view: 'h2', title: 'Small Heading', class: 'ck-heading_heading2' },
{ model: 'paragraph', view: 'p', title: 'Paragraph', class: 'ck-heading_paragraph' },
]
},
style: {
definitions: [
{
name: 'Subtitle',
element: 'p',
classes: [ 'ck-heading_subtitle' ]
},
],
}
}
I would like Subtitle to be a heading option, not a styling option, but have its class persist on save. Am I misunderstanding how to configure CKeditor, or is this a bug?
"craftcms/ckeditor": "^3.2",
"craftcms/cms": "^4.4.0",
"doublesecretagency/craft-cpcss": "^2.6",
"mmikkel/retcon": "^2.6",
"nystudio107/craft-imageoptimize": "^4.0",
"nystudio107/craft-minify": "4.0.0-beta.2",
"nystudio107/craft-retour": "^4.1",
"nystudio107/craft-seomatic": "^4.0",
"servd/craft-asset-storage": "^3.3",
"spicyweb/craft-neo": "^3.7",
"verbb/field-manager": "^3.0",
"vlucas/phpdotenv": "^5.4.0"
When the plugin is set to use CKEditor 4, the field will appear to lose its value and become unresponsive when it is dragged, such as within a Matrix block. Thankfully, the source <textarea>
element will have already been updated, so no content is actually lost.
https://cdn.ckeditor.com/4.16.0/standard/ckeditor.js
.Likely also affects Neo and Super Table.
Changes are not saved in CKEditor field while in "source" mode.
The changes should be saved.
The changes are lost.
If you switch back to "normal" editing mode before saving, the changes are saved.
Craft CMS 4.4.7.1
No response
No response
No response
No response
CKEditor 3.2.0
When using shift + enter we don't get a single line-break but a new p tag.
We are using craftcms/ckeditor 1.0.0-beta.2 with Craft 3.4.9 and any content of CKEditor does not get saved.
Have a look at the content of that field again. It is empty. If something was in the field from earlier Craft Version, it will not be overwritten but stays there.
Based on what it says here, I'm trying to apply custom styles to the editor (for a specific field). I have this line in the "Initialization Code" field for the CKEditor field in question:
import '/assets/css/ckeditor.css';
When I load that field (say, in an entry editing screen), CKEditor fails to initialize, and I get this console error:
VM4946:2 Uncaught SyntaxError: Cannot use import statement outside a module
at m (jquery.js:133)
at Oe (jquery.js:6114)
at b.fn.init.append (jquery.js:6250)
at s.constructor.initUi (main.js?v=1623931468:13)
at s.constructor.addBlock (main.js?v=1623931468:13)
at s.constructor.init (main.js?v=1623931468:12)
at s.constructor.constructor (garnish.js:764)
at s.constructor (garnish.js:40)
at new s.constructor (garnish.js:40)
at Object.createInput (main.js?v=1623931468:1)
I'm a humble HTML & CSS dev, and my JS is weaksauce. What am I doing wrong? And why is it so complicated? 😖
In the Craft CMS CKEditor plugin I added some extra configuration so that a link can open in a new window. Instead of a configuration where an absolute URL always is opening in a new tab.
Config
"link": { "decorators": { "openInNewTab": { "label": "Open in a new tab", "mode": "manual" } } }
Selecting h1 gives you a h2 in the source
h2 -> h3
and so on.
Now that CKEditor 5 is officially released, this repository should be updated from the alpha 2 build.
Hello,
I'm getting error when trying to upload image. It's showing empty dialog when clicking on "Browser the server" button.
I'm using creditor 4.9.1https://cdn.ckeditor.com/4.9.1/full/ckeditor.js
Steps to reproduce:
Versions:
[Is it|Will it be] possible to custom the options available in the toolbar? [Is there|Will there be] a source mode option to edit HTML directly? Thanks!
If we make changes to a ckeditor field in source mode and immediately save the entry, those changes are not taken into account.
For changes to be taken into account it's necessary to switch back to WYSIWYG and then save.
=> Changes are lost
I've made a small video showing the behaviour:
Please let me know if this question should be moved to the Craftcms repo. It isn't specific to the CKEditor plugin, but I found it while working on the plugin, so I entered it here.
When trying to initialize a custom build for CKEditor, I noticed that the code was being executed before the textarea fields were created (even on the window load event). I assume that Craft and a plugin (Neo) are doing a bunch of JS work as well on load to layout the page. I did hacky things to make it work. I could probably figure a semi better implementation, but it would still be fragile. Are there any better solutions than iterating over the page?
Note: I attempted to load the JS via the asset bundle (I thought maybe that would load last - No idea why it would, but I tried it).
I've been taking this for a spin today and the two most important features I see missing are:
Thanks!
No image resize handles are shown in the editor and config options for resize buttons don't work. Is this feature missing intentionally ?
We have a Neo field with a 'Copy' block that includes a CKeditor field.
Most changes, such as bold, italic, headings, anchors etc save, but text alignment and font colour don't save. When the entry is saved those styles are removed to a default left alignment and black text.
When adding this option the expected behaviour would be that only external links get the target="blank"
attribute, however, all links get it.
Config:
return {
link: {
addTargetToExternalLinks: true,
},
}
Workaround is to set targets manually, using this config:
return {
"link": {
"decorators": {
"openInNewTab": {
"attributes": {
"target": "_blank"
},
"label": "Open in a new tab",
"mode": "manual"
}
}
}
}
I have a CKeditor field inside a matrix. When I make a new entry, and add the block with the CKeditor field inside, it just shows an unstyled textarea, there is no initialisation. It does work fine when the entry gets saved and reloaded.
Currently, the Insert Link button in the CraftCMS CKEditor plugin has two actions: the left action is to insert a custom link, and the right action is to open a dropdown to insert an entry, asset, or category.
Ideally, the button would have only one action that shows a dropdown with all available options. If this is not possible, I suggest adding an "insert a custom link" option to the dropdown so that all options are contained within it.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.