What is Reddit's opinion of CKEditor?

CKEditor had this rant a few years ago, that starts with:

> Every once in a while some developer notices that there’s still no perfect WYSIWYG editor for the web on the market

It took them years...

https://ckeditor.com/blog/ContentEditable-The-Good-the-Bad-and-the-Ugly/

As good as it is, CKEditor 5 costs about $1 per user per month. If you have 1000 users you'd be paying about $12000 USD per year which is quite frankly ridiculous.

https://ckeditor.com/ckeditor-5/pricing/

There is also a very handy checklist if anybody is interested! https://ckeditor.com/blog/Web-accessibility-testing-DIY/ Stay accessible y'all.

What I did with ckeditor was upload the image with the uploadimage plugin, and have the image link inserted instead of the base64 representation.

https://ckeditor.com/addon/uploadimage

You are gonna run into this problem with any editor I'm guessing.

First of, apparently there is already a react component version of CKeditor, if that suits you: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html

If that doesn't work for you:

Extract the folder from online-builder somewhere and install dependencies:

npm install

build the files:

npm run build

The files you need are inside the build folder, copy them into the public folder inside your react application directory. Still in public folder, open index.html and add a script tag to header to load ckeditor.js

Now, from any react component you can access the ckeditor from the window object.

Go back to the folder from the online-builder and get inside the sample folder, open index.html and there is a script below the page with content starting like:

ClassicEditor.create( document.querySelector('.editor') ...

Copy the content of that script tag entirely and paste it in a controlled useEffect. The only thing you need to change is calling the ckeditor from window.

The first parameter of create() function is the target element to append the editor, you can get it with querySelector or you can get it with useRef.

const targetNode = useRef(null)

useEffect(() => { window.ClassicEditor.create(targetNode.current, //...the rest can stay the same ) }, [])

return ( <div ref={targetNode}></div> )

Database to store content + something like TinyMCE, CKEditor or Summernote to edit/create content.

You'll need to setup and link the database to those editors.

I don't know this editor that well, but it appears that it doesn't have a "normal" DOM event model.

Going by this page:

https://ckeditor.com/docs/ckeditor4/latest/guide/dev_savedata.html

it looks like you might need to hook in to the 'change' internal event and propagate that into the DOM with some javascript code. Something maybe like this:

```js

var editor = CKEDITOR.replace( 'editor1' );
// The "change" event is fired whenever a change is made in the editor.
editor.on( 'change', function( evt ) {
// getData() returns CKEditor's HTML content.

htmx.trigger("#editor1-wrapper", "changed");
console.log( 'Total bytes: ' + evt.editor.getData().length );
});
```

where, if I understand the library correctly, you have something like this:

```html

</div>

```

You might need to do an hx-vals attribute on the wrapper as well, to include the editor. I have to say, this editors API doesn't appear to be very friendly to external tools compared to other rich text editors I have seen...

I never tried this but assuming it works since his Youtube plugin works, I assume his Video plugin also works, If you are using Django-Ckeditor, Django-Ckeditor-Video-Plugin

Thank you!

I also found this last night: https://ckeditor.com/

They also have a Django package, so I'll pick these apart and try to learn how they work. Thanks for the link!

> Really? There's nothing that does markdown? I guess markdown becomes html, but I sort of thought there would be something.

CKEditor 5 does Markdown and HTML and supports custom elements/tags and a variety of other handy features. Even has support for multiple people editing at the same time.

Bit surprised OP didn't run into/evaluate CKEditor, might have saved them some headaches

Edit: Link to CKEditor https://ckeditor.com/ckeditor-5/

Drupal 8 uses CKEditor as Texteditor by default. I am not aware of such a feature in CKEditor. But you can integrate other text editors into drupal as well. Do you know which editor you were working with which had this feature implemented?

Yes and no, it's open-source under GPL +2 and also offers free licenses to other Open Source projects/products. So yes, if your product/project is open-source compatible with GPL 2+ (if not you can always apply for a free license https://ckeditor.com/wysiwyg-editor-open-source/) but no if it's both commercial, proprietary and has more than 2 devs and 5 active users then yeah, you need a license.

Hey there! It's late but hope this helps: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs-v3.html

https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/angular.html#data

<ckeditor [data]="editorData" ...></ckeditor>

I'm late but I feel like I should drop this link here as well for fans of CKEditor 5 who are not happy with the GPL licensing.

https://ckeditor.com/wysiwyg-editor-open-source/

I've been looking into Wiki.js https://wiki.js.org/ as a Confluence clone for migrate and merge a few aging MediaWiki instances.

The WYSIWYG editor with wiki.js is based on https://ckeditor.com/ckeditor-5/ which reports great support for formulas but it isn't a feature I've tried.

The license for ckeditor is GPL, LGPL or MPL: https://ckeditor.com/docs/ckeditor4/latest/guide/dev_license.html. As long as you are developing an open source software everything is fine (see https://support.ckeditor.com/hc/en-us/articles/115002539665-Can-I-include-CKEditor-4-and-CKEditor-5-in-a-commercial-environment-) If you want to do a closed source project you have to pay. I think this is fair.

I've never heard of ckeditor before, just checked it out - apparently their free tier allows up to 5 active users - and this probably means that they track your users. Why would you recommend something like that over tinymce and other open source alternatives?

This doesn't look good as it still requires jquery installation...

I would recommend CKeditor if that would be an option, https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/angular.html

It doesn't really tell you how Google did it but you might find it interesting: https://ckeditor.com/blog/Lessons-learned-from-creating-a-rich-text-editor-with-real-time-collaboration/ CKEditor 5 also uses operational transformation for real-time collaboration.

I assume you're looking for a web-based editor? Instagram supports oembed, so you're looking for something that supports that, and then it'll also support a lot of other things you could embed, too.

For example: https://ckeditor.com/cke4/addon/oembed

Someday, wiki sites will enter the modern era and use the much friendlier CKeditor which is also open-source. Demo here: https://ckeditor.com/ckeditor-5/demo/

Much easier to make tables or anything, really, with the right build.

Both CKEditor 4 and CKEditor 5 are available under Open Source licenses. But of course these open source licenses have their own set of rules you should follow to be able to use them so really, it depends on how you are going to use it.

I suggest you read here: https://ckeditor.com/legal/ckeditor-oss-license/ and then make sure your use case is within what the license allows and if you're not sure just contact. ;)

You don’t seem to get the concept of predefined styles. Most devs will set limited styles that the user can use. Consistency is key to keep a good visual on the site. Once you have predefined a couple of titles, links, text and all, user should just use that. Ex: You don’t want a big red title. You want a title that is the same size as the other title, in black or the primary site color. Consistency!

That said, telling you that is so much a Drupal community way of handling thing. Like you are asking for something and everybody tells you to not do that. I see it happen too often :) Let’s make it work !

I think you just need the other ckeditor modules (font&size) and then download the librairies manually. I wish composer would take care of that automatically. Install the module the normal way :

https://www.drupal.org/project/ckeditor_font

And then download and put at the right place this library add on (in the root libraries folder) :

https://ckeditor.com/cke4/addon/font

Check the browser console for errors so it’s easy for us to help you out.

As ramlevdk suggested, WYSIWG is a good solution. However, I prefer CKEditor, with IMCE as my file browser. I personally find the config and UX to be a bit more like Wordpress. It's clean imo.

Download and install the CKEditor module
Download and install the CKEditor plugin and place it in a CKEditor directory in your site's libraries (/sites/all/libraries) directory
Download and install IMCE module
In the CKEditor configuration, for File Browser Settings, select IMCE as the file browser
Note: You may need to update the permissions on your files directory to allow IMCE to write to it

CKEditor is now part of core in D8, which also allows inline editing of content fields directly from the front end.

https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/ui/theme-customization.html#customization-with-css-variables

/* Overrides the border radius setting in the theme. */

--ck-border-radius: 4px;

That is not to be confused with CKEditor 5 version, which already has the React integration for quite some time. 🙂

Not for much for publishing but if you already have that setup and want to bring collaboration to content creation, I can recommend: https://ckeditor.com/collaboration/

Did you see CKEditor 5? It supports pasting images from the clipboard, of course, and has a lightweight UI. In fact, you can choose between many UIs and even build your own.

PS. Don't confuse CKEditor 4 (already mentioned by you as "good old ckedtior" 🙂) and CKEditor 5. CKEditor 5 is a complete rewrite, a different project.

I guess you're referring to the Highlight feature. It's indeed limited to just a couple markers (that you need to preconfigure). While this sounds ridiculous, that's a reflection of our attention to content semantics. This feature isn't about colors (and inline styles), but rather about applying meaning to pieces of text.

So if you looked for a background/text color feature, there's no such feature at the moment. However, we've just started working on it. I'm afraid, though, that the MVP will still be limited to a predefined palette of colors (no color picker).

We skipped the demo when creating the tutorial. We need to fix that ASAP. TBH, I didn't expect how many people will ask about that. Happy to be wrong 🤣

I uploaded my local copy of that tutorial (its state before the "Creating the UI" section) here: https://ckeditor5.github.io/misc/placeholder-demo/index.html

Regarding pricing, please contact our sales team because I don't know the answer (and it definitely depends on multiple things) 🙂.

You're completely right. Using contentEditable=false directly indeed causes a lot of issues. We've learned a lot about that back in 2013 when we introduced widgets to CKEditor 4. Widgets use contentEditable=false/true internally, but add tones of hacks on top of that to fix browser issues. I actually remember dealing with those issues one by one back then 😱. I thought there's no end to them. Selection, focus, keyboard navigation, all kind of browser quirks. The final result is great, though, and CKEditor 4 widgets are by developers in ways that we didn't imagine.

When implementing CKEditor 5 we used that experience but also took the opportunity to clean up the concept and implementation. This is most visible in the API and implementation but we were also able to handle some edge cases that could not be tackled in CKEditor 4. We know about companies which started doing really amazing things with widgets in CKEditor 5 – again, stuff that we didn't even consider when implementing them (e.g. widget inside a widget inside a widget to implement structured editing of some parts of the content).

Anyway, you can create non-editable blocks as well as non-editable inline elements in CKEditor 5. The latter links to a tutorial which implements a placeholder feature (unfortunately, there's no live demo there 😔 but we're working on it) – just like the feature that you described. I'm really curious of your feedback!

Hi there! CKEditor 5 already supports tables. Check out this demo: https://ckeditor.com/docs/ckeditor5/latest/features/table.html

One more thing that you will want to check is the React integration guide: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html. It shows how to use the CKEditor React component.

Not OP, but CKEditor is quite agnostic. It uses basic HTML tags to format text, images, and tables, and it let's you add IDs and classes that can be used to target responsive design. Responsiveness should really be done by you using mediaqueries on the content though, to avoid your editor having to mess with stuff. That's a recipe for disaster. You can target the CKEditor content wrapper to make that super easy.

A neat trick in CKEditor is autoserving correct image sizes for responsive layouts. Having said that, as a developer, you can offer a customized CKEditor menu with custom styles for editors to use. It's pretty powerful. If the user knows HTML they can use source mode to customize the HTML directly, add classes, etc.

Agreed. (Also "pink on light-grey"? I know this isn't stackoverflow but that can't be the best option? I wonder what ckeditor.com currently does for code highlighting.) Can we lift code highlighting from vim.js ?

quilljs? Not specifically react, but they have this: https://github.com/zenoamaro/react-quill

CKEditor 5 actually looks pretty promising. Again not specifically react, but looks like it plays nicely: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html - a lot more features out of the box than quilljs.

maybe not integrated with Drupal, but if you use CKEditor there's a plugin that might work: https://ckeditor.com/cke4/addon/imagemaps

if you are using ckeditor with the wysiwyg module it should be fairly easy to configure a new plugin so that users can use it in a wysiwyg

You should try the "Wappalyzer" browser plugin, it gives you an overview of the technologies used on a website (it's not 100% accurate but works fine for mainstream techs, frameworks, cms, etc).

According to it, your page uses the CKE WYSIWYG (https://ckeditor.com/) editor, but no info on visual plugins.

Per https://ckeditor.com/blog/CKEditor-4.9.2-with-a-security-patch-released/, "the vulnerability stemmed from the fact that it was possible to execute XSS inside CKEditor using the <img> tag and specially crafted HTML." The question is then, "how many ways are there to do this in Drupal?"

If you use the WYSIWYG module with CKEditor in Drupal 7, you likely downloaded CKEditor for your site. If that's the case, please DO update. You'll need to go to https://ckeditor.com/ckeditor-4/ to get the latest/fixed version.

Saw that of course. It seems I don't have these plugins installed with ckeditor5-build-classic-1.0.0-beta.1.zip via https://ckeditor.com/ckeditor-5-builds/download/ (no src folder)

Array.from( editor.ui.componentFactory.names() );

0: "undo" 1: "redo" 2: "bold" 3: "italic" 4: "heading" 5: "link" 6: "numberedList" 7: "bulletedList"

ClassicEditor.build.plugins.map( plugin => plugin.pluginName );

0: "Essentials" 1: "CKFinderUploadAdapter" 2: "Autoformat" 3: "Bold" 4: "Italic" 5: "BlockQuote" 6: "EasyImage" 7: "Heading" 8: "Image" 9: "ImageCaption" 10: "ImageStyle" 11: "ImageToolbar" 12: "ImageUpload" 13: "Link" 14: "List" 15: "Paragraph" 16: "ImageUpload"

What is Reddit's opinion of CKEditor?
From 3.5 billion Reddit comments

➔ CKEditor website

By popularity on Reddit, this Service is:

41 reviews of this app found across Reddit:

What is Reddit's opinion of CKEditor? From 3.5 billion Reddit comments

➔ CKEditor website

By popularity on Reddit, this Service is:

41 reviews of this app found across Reddit:

What is Reddit's opinion of CKEditor?
From 3.5 billion Reddit comments