CKeditor5上传图片-村大哥

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

沉稳的木瓜 · Python_PyCharm_Turtle- ...· 2 天前 ·

冷冷的松鼠 · 妈您人设崩了400章笔趣阁(臀控 ...· 3 月前 ·

重感情的机器人 · 《不收费的18岁戌人视频》rmvb流畅无剪切 ...· 3 月前 ·

稳重的啤酒 · FFmpeg音视频同步 | ...· 4 月前 ·

宽容的小刀 · 《汪汪队立大功 PAW Patrol》 ...· 4 月前 ·

之前一直使用的是ckeditor4版本编辑器，最近发现ckeditor5版本编辑器也挺不错，准备试试。结果在上传图片这方面发现与之前ckeditor4版本上传配置不一样了。

之前的ckeditor4版本html5 下面配置上传图片地址为：

CKEDITOR.editorConfig = function( config ) {
     config.filebrowserImageUploadUrl = '/image/ckeditorImage?type=Image';//图片上传路径
参考样的配置路径，发现ckeditor5 无法使用了，下面进行了研究发现ckeditor5配置发生了变化。
CKEditor 5图片上传地址配置
ckeditor5首先需要确定的是你构建的时候选的那个图片上传adapter，我这里以CKFinder upload adapter
图片上传配置为：
ClassicEditor
                .create( document.querySelector( '#contentHtml' ), {
                    licenseKey: '',
                    ckfinder: {
                        uploadUrl: "/ajax/form/file/uploadImage?type=Image"//图片上传路径
                .then( editor => {
                    editor.setData($('#cocntentScript').html());
                    window.editor = editor;
                .catch( error => {
                    console.error( 'Oops, something went wrong!' );
                    console.error( 'Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:' );
                    console.warn( 'Build id: l1txv9x2i4j9-f8u2t0fifydx' );
                    console.error( error );
以上ckfinder uploadUrl配置即为图片上传配置。此次图片上传部分前端搞定
CKEditor 5图片上传返回参数
返回参数与CKEditor4 相同json格式
    "uploaded":1,
    "url":"图片地址(如：/upload/xxx/abc.jpg)",
    "fileName":"图片名称（如：a.jpg）"
    "uploaded":0,
    "fileName":"abc.jpg",
    "error":{
        "number":201,
        "message":"图片超大，限制宽度500px"
至此CKEditor 5 图片返回参数介绍完毕。
                              1.引入&lt;script type="text/javascript" src="/plugin/ckeditor5/ckeditor.js"&gtl;&lt;/script&gtl;