javascript - CKEditor 5 insert image by external url - Stack Overflow

admin管理员组

文章数量:1352175

I am wondering how to insert an image by it's URL only (a user gets it from some other website). I need to implement a simple img src="" in CKEditor 5. The problem is that by default, the editor requires me to upload an image while I need to insert an external url.

I have read many related topics (1, 2, 3) but did not find a problem similar to mine. I even do not need the special button, maybe I can somehow just type img src="myurl" (directly typing it inside the editor did not work for me yet) inside CKEditor and then make it to be perceived like an html code after I apply @Html.Raw(Model.Text) to the whole text I have stored in database from CKeditor textarea.

That is what I get after inserting data from the editor to a webpage. I think it is because tags are perceived as text due to security reasons.

P.S. Stack overflow image insertion tool allows to upload image by its url when I click link from the web in dialog. So I want something similar in CKEditor 5.

Will be very grateful for any help!

I am wondering how to insert an image by it's URL only (a user gets it from some other website). I need to implement a simple img src="" in CKEditor 5. The problem is that by default, the editor requires me to upload an image while I need to insert an external url.

I have read many related topics (1, 2, 3) but did not find a problem similar to mine. I even do not need the special button, maybe I can somehow just type img src="myurl" (directly typing it inside the editor did not work for me yet) inside CKEditor and then make it to be perceived like an html code after I apply @Html.Raw(Model.Text) to the whole text I have stored in database from CKeditor textarea.

That is what I get after inserting data from the editor to a webpage. I think it is because tags are perceived as text due to security reasons.

P.S. Stack overflow image insertion tool allows to upload image by its url when I click link from the web in dialog. So I want something similar in CKEditor 5.

Will be very grateful for any help!

• javascript
• image
• asp-core
• ckeditor
• ckeditor5

Share Improve this question Follow edited Apr 25, 2020 at 17:42 Michahell 5,07155 gold badges3434 silver badges4646 bronze badges asked Aug 1, 2018 at 21:45 BogdanBogdan 9141212 silver badges2020 bronze badges 8

• When you add an external image what does your browser's console report? – Lee Taylor Commented Aug 1, 2018 at 21:47
• 1 No, what does your browser's console state? This is accessed by pressing F12 on most browsers. – Lee Taylor Commented Aug 1, 2018 at 21:49
• 1 It looks like you're adding text to your CKEditor, rather than HTML. But without seeing your code... – Lee Taylor Commented Aug 1, 2018 at 21:56
• 2 See this answer for a basic way of adding an image: stackoverflow./a/16580702/933198 – Lee Taylor Commented Aug 1, 2018 at 22:02
• 1 Thank you very much, I understand the idea, it answers my question! – Bogdan Commented Aug 1, 2018 at 22:06

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 5

There's a very simple and concise explanation on how to implement this feature, on their documentation: https://ckeditor./docs/ckeditor5/latest/framework/guides/creating-simple-plugin.html

import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import Image from '@ckeditor/ckeditor5-image/src/image';
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';

import imageIcon from '@ckeditor/ckeditor5-core/theme/icons/image.svg';

class InsertImage extends Plugin {
    init() {
        const editor = this.editor;

        editor.ui.ponentFactory.add( 'insertImage', locale => {
            const view = new ButtonView( locale );

            view.set( {
                label: 'Insert image',
                icon: imageIcon,
                tooltip: true
            } );

            // Callback executed once the image is clicked.
            view.on( 'execute', () => {
                const imageUrl = prompt( 'Image URL' );

                editor.model.change( writer => {
                    const imageElement = writer.createElement( 'image', {
                        src: imageUrl
                    } );

                    // Insert the image in the current selection location.
                    editor.model.insertContent( imageElement, editor.model.document.selection );
                } );
            } );

            return view;
        } );
    }
}

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Essentials, Paragraph, Bold, Italic, Image, InsertImage, ImageCaption ],
        toolbar: [ 'bold', 'italic', 'insertImage' ]
    } )
    .then( editor => {
        console.log( 'Editor was initialized', editor );
    } )
    .catch( error => {
        console.error( error.stack );
    } );

The final result:

I hope it was helpful. :)

CKEditor 5 now has this feature as part of a built-in plugin in all predefined builds.

It's quite easy to configure to appear in your editor's toolbar (if you aren't using the super-build):

import { ImageInsert } from '@ckeditor/ckeditor5-image';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ /* ... */ , ImageInsert ],
        toolbar: [ /* ... */ , 'insertImage' ]
    } )

本文标签： javascriptCKEditor 5 insert image by external urlStack Overflow