首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在CKEditor 5经典版中使用url图像插入对话框而不是上传

在CKEditor 5经典版中,使用url图像插入对话框而不是上传的方法如下:

  1. 首先,确保你已经按照CKEditor 5的文档安装并配置了经典版编辑器。
  2. 打开你的HTML文件,并将以下代码添加到你希望显示编辑器的位置:
代码语言:txt
复制
<div id="editor"></div>
  1. 在JavaScript代码中,初始化CKEditor 5编辑器并配置插件。你需要引入@ckeditor/ckeditor5-build-classic@ckeditor/ckeditor5-image这两个包。
代码语言:txt
复制
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import Image from '@ckeditor/ckeditor5-image/src/image';

ClassicEditor.create( document.querySelector( '#editor' ), {
    plugins: [ Image ],
    toolbar: [ 'imageTextAlternative', '|', 'imageStyle:full', 'imageStyle:side' ],
    image: {
        toolbar: [ 'imageTextAlternative', '|', 'imageStyle:full', 'imageStyle:side' ],
        styles: [
            'full',
            'side'
        ]
    }
} )
    .then( editor => {
        console.log( 'Editor was initialized', editor );
    } )
    .catch( error => {
        console.error( error.stack );
    } );
  1. 上述代码中,我们使用@ckeditor/ckeditor5-image插件来处理图像操作。这个插件提供了一个默认的上传图像对话框,但我们希望使用url图像插入对话框。为了实现这一点,我们需要在配置中定义自定义对话框。
代码语言:txt
复制
ClassicEditor.create( document.querySelector( '#editor' ), {
    // ...
    image: {
        toolbar: [ 'imageTextAlternative', '|', 'imageStyle:full', 'imageStyle:side', '|', 'imageInsert', 'imageRemove' ],
        styles: [ 'full', 'side' ],
        customConfig: '',
    }
} )
    .then( editor => {
        editor.plugins.get( 'FileRepository' ).createUploadAdapter = function( loader ) {
            return new MyUploadAdapter( loader );
        };

        console.log( 'Editor was initialized', editor );
    } )
    .catch( error => {
        console.error( error.stack );
    } );
  1. 然后,在同一个JavaScript文件中,定义MyUploadAdapter类来替代默认的上传适配器。这个类将处理从url插入图像。
代码语言:txt
复制
class MyUploadAdapter {
    constructor( loader ) {
        this.loader = loader;
    }

    upload() {
        // 不执行任何上传操作,直接返回一个包含url的Promise对象
        return this.loader.file.then( file => {
            return new Promise( ( resolve, reject ) => {
                const reader = new FileReader();

                reader.onload = () => {
                    resolve( { default: reader.result } );
                };

                reader.onerror = error => {
                    reject( error );
                };

                reader.readAsDataURL( file );
            } );
        } );
    }

    abort() {
        // 不执行任何操作
    }
}
  1. 最后,你就可以在CKEditor 5经典版中使用url图像插入对话框了。

需要注意的是,CKEditor 5经典版不直接提供url图像插入对话框的功能,上述方法是通过自定义上传适配器来实现的。如果你想使用其他定制化的功能,可以根据CKEditor 5的文档进行相应的调整和修改。

以上就是在CKEditor 5经典版中使用url图像插入对话框的方法。关于CKEditor 5的更多信息和其他插件的使用,请参考腾讯云CKEditor产品介绍链接地址:https://cloud.tencent.com/product/ck-editor

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • C#学习笔记—— 常用控件说明及其属性、事件

    1、 窗体 的属性 1、常用属性 (1)Name属性:用来获取或设置窗体的名称,在应用程序中可通过Name属性来引用窗体。 (2) WindowState属性: 用来获取或设置窗体的窗口状态。 取值有三种: Normal (窗体正常显示)、 Minimized(窗体以最小化形式显示)和 Maximized(窗体以最大化形式显示)。 (3)StartPosition属性:用来获取或设置运行时窗体的起始位置。其取值及含义如表9-1 所示。默认的起始位置是WindowsDefaultLocation。 (4)Text属性:该属性是一个字符串属性,用来设置或返回在窗口标题栏中显示的文字。 (5)Width属性:用来获取或设置窗体的宽度。 (6)Height属性:用来获取或设置窗体的高度。 (7)Left属性:用来获取或设置窗体的左边缘的x坐标(以像素为单位)。 (8)Top属性:用来获取或设置窗体的上边缘的y坐标(以像素为单位)。 (9)ControlBox属性:用来获取或设置一个值,该值指示在该窗体的标题栏中是否显示控制框。值为true时将显示控制框,值为false时不显示控制框。 (10)MaximizeBox属性:用来获取或设置一个值,该值指示是否在窗体的标题栏中显示最大化按钮。值为 true时显示最大化按钮,值为false时不显示最大化按钮。 (11)MinimizeBox 属性:用来获取或设置一个值,该值指示是否在窗体的标题栏中显示最小化按钮。值为 true时显示最小化按钮,值为false时不显示最小化按钮。 (12)AcceptButton 属性:该属性用来获取或设置一个值,该值是一个按钮的名称,当按 Enter 键时就相当于单击了窗体上的该按钮。 (13)CancelButton 属性:该属性用来获取或设置一个值,该值是一个按钮的名称,当按 Esc 键时就相当于单击了窗体上的该按钮。 (14)Modal 属性:该属性用来设置窗体是否为有模式显示窗体。如果有模式地显示该窗体,该属性值为true;否则为 false。当有模式地显示窗体时,只能对模式窗体上的对象进行输入。必须隐藏或关闭模式窗体(通常是响应某个用户操作),然后才能对另一窗体进行输入。有模式显示的窗体通常用做应用程序中的对话框。 (15)ActiveControl属性:用来获取或设置容器控件中的活动控件。窗体也是一种容器控件。 (16)ActiveMdiChild属性:用来获取多文档界面(MDI)的当前活动子窗口。 (17)AutoScroll 属性:用来获取或设置一个值,该值指示窗体是否实现自动滚动。如果此属性值设置为true,则当任何控件位于窗体工作区之外时,会在该窗体上显示滚动条。另外当自动滚动打开时,窗体的工作区自动滚动,以使具有输入焦点的控件可见。 (18)BackColor属性:用来获取或设置窗体的背景色。 (19)BackgroundImage属性:用来获取或设置窗体的背景图像。 (20)Enabled 属性:用来获取或设置一个值,该值指示控件是否可以对用户交互作出响应。如果控件可以对用户交互作出响应,则为 true;否则为false。默认值为true。 (21)Font属性:用来获取或设置控件显示的文本的字体。 (22)ForeColor属性:用来获取或设置控件的前景色。 (23)IsMdiChild属性:获取一个值,该值指示该窗体是否为多文档界面(MDI)子窗体。值为 true时,是子窗体,值为false时,不是子窗体。 (24)IsMdiContainer 属性:获取或设置一个值,该值指示窗体是否为多文档界面(MDI)中的子窗体的容器。值为true时,是子窗体的容器,值为false时,不是子窗体的容器。 (25)KeyPreview属性:用来获取或设置一个值,该值指示在将按键事件传递到具有焦点的控件前,窗体是否将接收该事件。值为true时,窗体将接收按键事件,值为false时,窗体不接收按键事件。 (26)MdiChildren属性:数组属性。数组中的每个元素表示以此窗体作为父级的多文档界面(MDI)子窗体。 (27)MdiParent属性:用来获取或设置此窗体的当前多文档界面(MDI)父窗体。 (28)ShowInTaskbar属性:用来获取或设置一个值,该值指示是否在Windows任务栏中显示窗体。 (29)Visible属性:用于获取或设置一个值,该值指示是否显示该窗体或控件。值为true 时显示窗体或控件,为 false时不显示。 (30)Capture属性:如果该属性值为true,则鼠标就会被限定只由此控件响应,不管鼠标是否在此控件的范围内。 2、常用的方法 下面介绍一些窗体的最常用方法。 (1)Show方法:该方法的作用是让窗体显示出来,其调用格式为: 窗体名.

    02
    领券