Questions tagged [ckeditor5]

CKEditor 5 is a set of ready-to-use rich text editors created with a powerful framework that enables you to create any kind of text editing solution and include real-time collaborative editing inside. Use this tag for any CKEditor 5 related questions. Use the "ckeditor4.x" tag for questions about CKEditor 4.

CKEditor 5 is written in ES6 (ECMAScript 2015) and it uses a custom data model with a virtual DOM. Thanks to implementing Operational Transformation it is real-time collaboration-ready. Its plugin-based, modular architecture and schema-less core make it highly extensible and flexible. It has a beautiful UI that you can easily customize to fit your needs.

CKEditor 5 is distributed as ready-to-use builds which you can install from npm, download as .zip packages or load from the CDN. Every "build" provides a single type of editor with a set of features and a default configuration. CKEditor 5 Builds allow you to quickly and easily initialize one of the many types of editors in your application.

At the same time, CKEditor 5 is also a framework for creating custom-made rich text editing solutions. You can customize the existing builds or build your own editors and features by using the CKEditor 5 Framework.

Asking questions

When posting a new question, please mention your specific version, build and plugins used.

Note: As a product, CKEditor 5 is a successor of ckeditor4.x, (and earlier, fckeditor), but it has been redesigned from the grounds up, with a different architecture, so there is no direct upgrade path. Read more about migration.

Resources

739 questions

votes

20 answers

How to set the height of CKEditor 5 (Classic Editor)

In CKEditor 4 to change the editor height there was a configuration option: config.height. How do I change the height of CKEditor 5? (the Classic Editor)

ckeditor ckeditor5

asked Oct 04 '17 at 07:31

Wiktor Walc

4,800
2
20
31

votes

2 answers

CKEditor 5 - How to insert some HTML (aka. where's the source mode)?

I want to be able to switch from WYSIWYG to plain HTML to e.g. insert IFrame with a Youtube video. So far with the standard CKEditor 5 builds there is no documentation on how to do that. Is there an equivalent of the Source Editing Area plugin but…

javascript ckeditor ckeditor5

asked Dec 09 '17 at 14:13

Marek Urbanowicz

9,057
7
48
74

votes

6 answers

How to enable image upload support in CKEditor 5?

I will use the ckeditor v5 into my project. I´ve trying to use the image plugin, but I don´t find enough informations about it. If you see the Demoe here, you easily upload images with Drag&Drop. But when I will try it with the download ballon zip…

javascript ckeditor ckeditor5

asked Oct 16 '17 at 07:39

Lukas Gund

votes

7 answers

How do I get toolbar available items in CKEDITOR 5?

I wanted to configure the toolbar in CKEDITOR 5. I took a look at the documentation. https://ckeditor5.github.io/docs/nightly/ckeditor5/latest/builds/guides/integration/configuration.html Yet, the only script related to my question is: Array.from(…

ckeditor5

asked Nov 20 '17 at 11:18

stonyau

1,764
1
16
17

votes

2 answers

Stop operation in change()

Is there a way to stop an remove operation in model.document.on('change') ? I listen to change with this code: model.document.on('change',(eventInfo,batch) => { // My code here. } And it works fine, in so far as I do get and can inspect all…

ckeditor5

asked Nov 30 '18 at 02:11

MTilsted

4,974
9
33
64

votes

3 answers

CKEditorError: ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated

import CKEditor from '@ckeditor/ckeditor5-react'; import ClassicEditor from '@ckeditor/ckeditor5-build-classic'; import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter'; Getting ckeditor 5 duplicate modules…

reactjs ckeditor ckeditor5

asked Mar 13 '20 at 08:22

Mr. Chhatrola

votes

6 answers

How to do CKEditor 5 Image Uploading?

ClassicEditor .create( editorElement, { ckfinder: { uploadUrl: 'my_server_url' } } ) .then( ... ) .catch( ... ); What should be my server response? I am using Java in the backend. Whatever my response is,…

javascript ckeditor ckeditor5

asked Mar 20 '18 at 13:39

Palaniappan RM

votes

2 answers

How to get data from CKEditor 5 instance

I know that for CKEditor 4, you can get the textarea data like this: var content = CKEDITOR.instances['comment'].getData(); How is this done for CKEditor 5?

ckeditor ckeditor5

asked Oct 18 '17 at 17:39

user3691644

votes

2 answers

Listen to event fired when the content has changed in CKEditor 5

How can I listen to the "input" event in ckeditor5 ? I would like to be able to use Observables like this: Observable.fromEvent(this.editor, "input").debounceTime(250).subscribe(() => {}); So far, I've been able to listen to some events like…

reactjs ckeditor ckeditor5

asked Jul 16 '17 at 20:48

ssougnez

4,202
9
36
65

votes

1 answer

Getting xml from ckeditor 5

How do I get the output from ckeditor as XML instead of HTML? I thought I could just use editor.data.processor=new XmlDataProcessor(); but that only seems to work for input where the editor now requires XML when calling editor.setData() but…

javascript xml ckeditor ckeditor5

asked Sep 25 '18 at 13:57

MTilsted

4,974
9
33
64

votes

5 answers

Upload adapter is not defined Issue with Image uploading in ckeditor5-angular

This question may have already answers but none of them is Angular specific. Here are some of them CKEditor 5 and Image Button How to enable image upload support in CKEditor 5? Insert image to CKeditor I am using Angular 5 and following this…

ckeditor angular5 ckeditor5

asked Aug 28 '18 at 07:38

Adnan Sheikh

votes

2 answers

Multiple textareas with CKEditor 5

I try to set CKEditor 5 to more than one

, but only the first one works.
Here is the code:
<script src="https://cdn.ckeditor.com/ckeditor5/1.0.0-alpha.2/classic/ckeditor.js"></script>
<textarea name="content0" class="editor" id="c0">This…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> 
                
                <a href="../../questions/tagged/ckeditor" class="post-tag grid--cell" title="show questions tagged 'ckeditor'" rel="tag">ckeditor</a> 
                
                <a href="../../questions/tagged/ckeditor5" class="post-tag grid--cell" title="show questions tagged 'ckeditor5'" rel="tag">ckeditor5</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Jan 07 '18 at 18:57">asked Jan 07 '18 at 18:57</time>
    <a href="../../users/7596978/pavel-prokofiev" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/7596978.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Pavel Prokofiev" onerror="onImageLoadingError(this);" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/7596978/pavel-prokofiev" class="s-user-card--link">Pavel Prokofiev</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">309</li>
            <li class="s-award-bling s-award-bling__gold" title="1 gold badge">1</li>
            <li class="s-award-bling s-award-bling__silver" title="3 silver badge">3</li>
            <li class="s-award-bling s-award-bling__bronze" title="13 bronze badge">13</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-62690188">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>9</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status ">
                <strong>4</strong> answers
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/62690188/error-could-not-find-a-declaration-file-for-module-ckeditor-ckeditor5-build-cl" class="question-hyperlink">error: Could not find a declaration file for module '@ckeditor/ckeditor5-build-classic' angular 9</a></h3>
        <div class="excerpt">I want to use ckeditor in angular 9, I followed instructions in https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/angular.html
but it shows an error where I import '@ckeditor/ckeditor5-build-classic':
Could not find a…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/angular" class="post-tag grid--cell" title="show questions tagged 'angular'" rel="tag">angular</a> 
                
                <a href="../../questions/tagged/angular9" class="post-tag grid--cell" title="show questions tagged 'angular9'" rel="tag">angular9</a> 
                
                <a href="../../questions/tagged/ckeditor5" class="post-tag grid--cell" title="show questions tagged 'ckeditor5'" rel="tag">ckeditor5</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Jul 02 '20 at 06:22">asked Jul 02 '20 at 06:22</time>
    <a href="../../users/2423999/jalaleddin-hosseini" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/2423999.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Jalaleddin Hosseini" onerror="onImageLoadingError(this);" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/2423999/jalaleddin-hosseini" class="s-user-card--link">Jalaleddin Hosseini</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">1,093</li>
            <li class="s-award-bling s-award-bling__gold" title="1 gold badge">1</li>
            <li class="s-award-bling s-award-bling__silver" title="12 silver badge">12</li>
            <li class="s-award-bling s-award-bling__bronze" title="19 bronze badge">19</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-49366292">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>9</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status ">
                <strong>1</strong> answer
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/49366292/ckeditor-5-links-set-default-target-for-links-or-edit-target" class="question-hyperlink">CKEditor 5 links: Set default target for links or edit target</a></h3>
        <div class="excerpt">In CKEditor 5 I don't see field for target attribute in link dialog.

How to add such field? Or set target=_blank as default.
Thanks
</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/ckeditor" class="post-tag grid--cell" title="show questions tagged 'ckeditor'" rel="tag">ckeditor</a> 
                
                <a href="../../questions/tagged/ckeditor5" class="post-tag grid--cell" title="show questions tagged 'ckeditor5'" rel="tag">ckeditor5</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Mar 19 '18 at 15:12">asked Mar 19 '18 at 15:12</time>
    <a href="../../users/1718285/izumeroot" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/1718285.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="izumeroot" onerror="onImageLoadingError(this);" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/1718285/izumeroot" class="s-user-card--link">izumeroot</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">391</li>
            
            <li class="s-award-bling s-award-bling__silver" title="2 silver badges">2</li>
            <li class="s-award-bling s-award-bling__bronze" title="9 bronze badges">9</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-47013985">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>9</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status answered-accepted">
                <strong>3</strong> answers
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/47013985/how-to-get-value-of-ckeditor-5" class="question-hyperlink">How to get value of CKEditor 5?</a></h3>
        <div class="excerpt">I want to be able to return the value of the CKEditor textarea, and also write my text inside it.
I used CKEditor 5 CDN. First this my code for the textarea it works fine
<script…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> 
                
                <a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a> 
                
                <a href="../../questions/tagged/textarea" class="post-tag grid--cell" title="show questions tagged 'textarea'" rel="tag">textarea</a> 
                
                <a href="../../questions/tagged/ckeditor5" class="post-tag grid--cell" title="show questions tagged 'ckeditor5'" rel="tag">ckeditor5</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Oct 30 '17 at 11:19">asked Oct 30 '17 at 11:19</time>
    <a href="../../users/8779658/latifa-khalid" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/8779658.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Latifa Khalid" onerror="onImageLoadingError(this);" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/8779658/latifa-khalid" class="s-user-card--link">Latifa Khalid</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">93</li>
            <li class="s-award-bling s-award-bling__gold" title="1 gold badge">1</li>
            <li class="s-award-bling s-award-bling__silver" title="1 silver badge">1</li>
            <li class="s-award-bling s-award-bling__bronze" title="3 bronze badge">3</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>

</div>
        </div>

</div>
        </div>
        <script src="../../static/js/stack-icons.js"></script>
        <script>
            /* replace <time class="fromnow" /> with human delta between `datetime` attr and now */
            document.addEventListener('DOMContentLoaded', function(){
                var time_elements = document.querySelectorAll("time.fromnow");
                for (var i=0; i<time_elements.length; i++) {
                    time_elements[i].innerHTML = moment(time_elements[i].getAttribute("datetime")).fromNow();
                }
            });
        </script>
        
    </body>
</html>