CKEditor 5 通过外部 url 插入图像答案

【问题标题】：CKEditor 5 insert image by external urlCKEditor 5 通过外部 url 插入图像
【发布时间】：2019-01-09 13:54:51
【问题描述】：

我想知道如何仅通过 URL 插入图像（用户从其他网站获取）。我需要在CKEditor 5中实现一个简单的img src=""。问题是默认情况下，编辑器要求我上传图片，而我需要插入外部url。

我已经阅读了许多相关主题（1、2、3）但没有发现与我类似的问题。我什至不需要特殊按钮，也许我可以以某种方式在 CKEditor 中键入 img src="myurl" （直接在编辑器中输入对我来说还不起作用），然后使其成为在我将 @Html.Raw(Model.Text) 应用到我从 CKeditor textarea 存储在数据库中的整个文本之后，感觉就像一个 html 代码。

这是我将数据从编辑器插入网页后得到的。我认为这是因为出于安全原因，标签被视为文本。

附：当我在对话框中单击 来自网络的链接 时，堆栈溢出图像插入工具允许通过其 url 上传图像。所以我想在 CKEditor 5 中使用类似的东西。

非常感谢您的帮助！

【问题讨论】：

当您添加外部图像时，您的浏览器控制台会报告什么？
不，您的浏览器控制台状态如何？在大多数浏览器上按 F12 即可访问。
看起来您正在向 CKEditor 添加文本，而不是 HTML。但是没有看到你的代码......
查看此答案以了解添加图像的基本方法：stackoverflow.com/a/16580702/933198
非常感谢，我理解这个想法，它回答了我的问题！

标签： javascript image asp.net-core ckeditor ckeditor5

【解决方案1】：

在他们的文档中有一个关于如何实现此功能的非常简单明了的解释：https://ckeditor.com/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.componentFactory.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 );
    } );

最终结果：

希望对您有所帮助。 :)

【讨论】：