不灭的焱

革命尚未成功,同志仍须努力下载JDK17

作者:php-note.com  发布于:2022-06-17 11:01  分类:HTML/CSS/JS  编辑

CKEditor4

当前版本为CKEditor4.13.0

下载CKEditor4

选择基础组件(Basic

我们这里只用到了图片的上传,因此选择基础组件

进入CKEditor4官网

2.选择图片上传插件

注意⚠️:选择File Browser

3.下载

将下载好的文件,解压后放入对应的目录中

引入并使用

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>A Simple Page with CKEditor</title>
        <!-- 确保引入的CKEditor文件路径正确 -->
        <script src="../ckeditor.js"></script>
    </head>
    <body>
        <form>
            <textarea name="editor1" id="editor1" rows="10" cols="80">
                This is my textarea to be replaced with CKEditor.
            </textarea>
            <script>
                // 使用CKEditor替换 <textarea id="editor1">
                // 实例化,使用默认配置
                CKEDITOR.replace( 'editor1' );
            </script>
        </form>
    </body>
</html>

相关配置

配置插件

1.展开ckeditor目录找到samples目录下的index.html文件,用浏览器打开

2.点击右上角的TOOLBAR CONFIGURATOR

3.勾选或者取消你想要的插件,然后点击Get toolbar config按钮,得到你想要的配置文件

4.复制该配置

5.找到ckeditor目录下的config.js文件

6.将刚复制的配置,粘贴到config.js文件中

添加上传tag

此时点击图片按钮我们发现,仍然不能上传图片

需要在刚刚的config.js中添加两个配置

config.extraPlugins = 'uploadimage'
config.filebrowserImageUploadUrl =
  'https://192.168.0.1/api/ECategoryDetail/UploadImg'
  //filebrowserImageUploadUrl 替换成你需要上传的服务器地址

我们再次点击图片按钮时候,便发现弹窗中多了上传的tag

隐藏浏览服务器按钮

我们可能无法浏览服务器上的图片,当我们点击浏览服务器按钮时,可能会出现空白页面

因此,为了实际体验,我们可能需要隐藏浏览服务器按钮

我们根据ckeditor/plugins/image2/dialogs路径找到image2.js文件

搜索关键字browseServer找到下行

label:f.lang.common.browseServer,hidden:!0

在其中添加style:"display:none",如下:

label:f.lang.common.browseServer,style:"display:none",hidden:!0

效果如下:

上传图片时,如何修改上传地址

在上面的配置里,我们添加了一条配置用来上传文件config.filebrowserImageUploadUrl如果不做任何修改,当我们点击上传到服务器时,他会默认使用该地址上传图片。

但这样很不灵活,通过查看文档,我们发现可以通过监听事件fileUploadRequest来做上传前的操作。

editor.on( 'fileUploadRequest', function( evt ) {
     var fileLoader = evt.data.fileLoader,
        formData = new FormData(),
        xhr = fileLoader.xhr;

    xhr.open( 'PUT', fileLoader.uploadUrl, true );
    formData.append( 'upload', fileLoader.file, fileLoader.fileName );
    fileLoader.xhr.send( formData );

    // Prevented the default behavior.
    evt.stop();
} );

修改fileLoader.uploadUrl即可,当然你也可以做其他操作,例如增加或修改消息头。

如何修改服务器的返回结果

服务器返回的结构有时候不是我们想要的,因此,可能需要对之进行修改。通过对事件fileUploadResponse进行监听即可。

editor.on( 'fileUploadResponse', function( evt ) {
    // Prevent the default response handler.
    evt.stop();

    // Get XHR and response.
    var data = evt.data,
        xhr = data.fileLoader.xhr,
        response = xhr.responseText.split( '|' );

    if ( response[ 1 ] ) {
        // An error occurred during upload.
        data.message = response[ 1 ];
        evt.cancel();
    } else {
        data.url = response[ 0 ];
    }
} );

注意⚠️:

对其事件的监听一般放在CKeditor实例完成后instanceReady,因此如下使用:

CKEDITOR.on('instanceReady', function(e) {
      console.log('CKEDITOR初始化', e.editor)

      e.editor.widgets.on('instanceCreated', function(params) {
        console.log('editor创建', params)
      })
      var upload = e.editor.uploadRepository
      upload.on('instanceCreated', function(eve) {
        alert('112233')
      })
      e.editor.on('change', function(change) {
        console.log('change', change)
      })
      e.editor.on( 'fileUploadRequest', function( evt ) {
        console.log(evt)
      }
      e.editor.on( 'fileUploadResponse', function( evt ) {
         console.log(evt)
      }
}

 

 

参考:

CKeditor4 上传图片一条龙服务

[荐]CKEditor4.7之使用实现图片上传功能

[荐]ThinkPHP使用CKEditor4富文本编辑器

CkEditor批量上传图片(java) 原创

 




2022年最新完全版CKeditor v4.18.0,修改成可上传图片

1、修改配置文件config.js,增加如下选项:

config.extraPlugins = 'uploadimage';
config.filebrowserImageUploadUrl = '/widget/ckeditor/uploadImage';

2、Java服务端接收上传文件(图片)资源

(1) UploadConfig.java

package com.wanma.framework_web.config;

/**
 * 上传文件配置
 */
public interface UploadConfig {
    // 允许上传的文件类型
    String[] imgTypes = new String[]{
            "image/jpeg",
            "image/gif",
            "image/png"
    };
}

(2) CkeditorForm.java

编辑器默认会传2个参数到后端:ckCsrfToken 和 upload

package com.wanma.framework_web.widget.ckeditor;

import lombok.Data;
import org.springframework.web.multipart.MultipartFile;

@Data
public class CkeditorForm {
    private String ckCsrfToken;
    private MultipartFile upload;
}

(3) CkeditorUploadController.java

package com.wanma.framework_web.widget.ckeditor;

import cn.hutool.core.date.DateUtil;
import cn.hutool.core.io.FileUtil;
import cn.hutool.core.util.ArrayUtil;
import cn.hutool.core.util.ObjectUtil;
import cn.hutool.crypto.SecureUtil;
import com.wanma.framework_web.config.UploadConfig;
import com.wanma.framework_web.constant.UrlConst;
import com.wanma.framework_web.controller.BaseController;
import com.wanma.framework_web.entity.SysFile;
import com.wanma.framework_web.entity.SysUserFile;
import com.wanma.framework_web.service.ISysFileService;
import com.wanma.framework_web.service.ISysUserFileService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import javax.annotation.Resource;

@Slf4j
@Controller
public class CkeditorUploadController extends BaseController {
    @Resource
    private ISysFileService iBaseFileService;

    @Resource
    private ISysUserFileService iUserFileService;

    /**
     * 上传 图片
     */
    @ResponseBody
    @RequestMapping(UrlConst.widget_ckeditor_uploadImage)
    public String uploadImage(
            Model model,
            @Value("${setting.uploadRootPath}") String uploadRootPath, // 上传文件保存路径
            CkeditorForm ckeditorForm
    ) {

        try {
            // 创建根目录
            if (!FileUtil.exist(uploadRootPath)) {
                FileUtil.mkdir(uploadRootPath);
            }

            // 检测文件类型,只能上传常用图片类型
            String contentType = ckeditorForm.getUpload().getContentType();
            if (!ArrayUtil.contains(UploadConfig.imgTypes, contentType)) {
                return """
                        {
                            "uploaded": 0,
                            "error": {
                                "message": "只能上传常用类型的图片"
                            }
                        }
                        """;
            }

            // 文件对象
            MultipartFile file = ckeditorForm.getUpload();

            // 扩展名
            String fileName = file.getOriginalFilename();
            String fileExt = FileUtil.extName(fileName);

            // 是否已存在
            String md5 = SecureUtil.md5(file.getInputStream());
            SysFile oldFile = this.iBaseFileService.getByMd5(md5);
            String fileUrl;
            int fileId;
            if (ObjectUtil.isEmpty(oldFile)) {
                // 保存文件
                String saveName = md5 + "." + fileExt;
                String savePath = DateUtil.date().toString("yyyy/MM/dd");
                String uploadDir = uploadRootPath + FileUtil.FILE_SEPARATOR + savePath;

                FileUtil.mkdir(uploadDir);
                String targeFilePath = uploadDir + FileUtil.FILE_SEPARATOR + saveName;
                FileUtil.writeBytes(file.getBytes(), targeFilePath);

                // 保存到数据库
                SysFile baseFile = new SysFile();
                baseFile.setName(file.getOriginalFilename());
                baseFile.setType(file.getContentType());
                baseFile.setExt(FileUtil.extName(file.getOriginalFilename()));
                baseFile.setSize(file.getSize());
                baseFile.setMd5(md5);
                baseFile.setSavePath(savePath);
                baseFile.setSaveName(saveName);
                this.iBaseFileService.save(baseFile);
                fileUrl = "/" + savePath + "/" + saveName;
                fileId = baseFile.getId();
            } else {
                fileId = oldFile.getId();
                fileUrl = "/" + oldFile.getSavePath() + "/" + oldFile.getSaveName();
            }

            // 插入 用户文件表
            SysUserFile userFile = new SysUserFile();
            userFile.setUserId(this.getLoginUserId(model));
            userFile.setFileId(fileId);
            userFile.setFileName(file.getOriginalFilename());
            userFile.setFileUrl(fileUrl);
            this.iUserFileService.save(userFile);

            return """
                    {
                       "uploaded": 1,
                       "fileName": "#fileName#",
                       "url": "#fileUrl#"
                    }
                    """.replace("#fileName#", fileName)
                    .replace("#fileUrl#", fileUrl);
        } catch (Exception e) {
            log.error("上传图片发生错误:" + e.getMessage());
            return """
                    {
                        "uploaded": 0,
                        "error": {
                            "message": "上传图片发生错误"
                        }
                    }
                    """;
        }
    }
}

【注意】

4.10版本之后,官方文档要求图片上传成功后,返回json格式,示例如下:

(1) 上传成功返回:

{
    "uploaded": 1,
    "fileName": "demo.jpg",
    "url": "/files/demo.jpg"
}
{
    "uploaded": 1,
    "fileName": "test.jpg",
    "url": "/files/test.jpg",
    "error": {
        "message": "A file with the same name already exists. The uploaded file was renamed to \"test.jpg\"."
    }
}

(2) 上传失败返回:

{
    "uploaded": 0,
    "error": {
        "message": "The file is too big."
    }
}