本文共 5445 字，大约阅读时间需要 18 分钟。

一、前言

在一些页面中，进行 发表文章、评论等功能，都要涉及到富文本编辑器，

如 CSDN 的 markdown 编辑器 使用传统的 textarea 标签是远远满足不了需求的， 现在流行的富文本编辑器主要有两个，ckeditor 和 百度的 UEditor， ① 前者比较简单，可以先感受一下富文本编辑器。 ② 后者功能更加强大，可以单图、多图上传，还可以截图、代码高亮等特性，但是使用起来不太通用、简单。

二、代码示例

下面来个 [文本读写]

1、前端

简单的界面 edit.html

效果如下：

2、后台

由于逻辑比较简单，为了方便，使用 SpringBoot，并且 省略了 service 层

① 实体

package com.cun.bean;import java.util.Date;import javax.persistence.Column;import javax.persistence.Entity;import javax.persistence.GeneratedValue;import javax.persistence.Id;import javax.persistence.Table;@Table(name = "t_diary")@Entitypublic class Diary {
       public Diary() {        super();        // TODO Auto-generated constructor stub    }    @Id    @GeneratedValue    private Integer diaryId;    @Column(length=60)    private String title;    private String content;    private Date releaseDate;    private Integer typeId = -1;    public Diary(String title, String content, int typeId) {        super();        this.title = title;        this.content = content;        this.typeId = typeId;    }    public Integer getDiaryId() {        return diaryId;    }    public void setDiaryId(Integer diaryId) {        this.diaryId = diaryId;    }    public String getTitle() {        return title;    }    public void setTitle(String title) {        this.title = title;    }    public String getContent() {        return content;    }    public void setContent(String content) {        this.content = content;    }    public Date getReleaseDate() {        return releaseDate;    }    public void setReleaseDate(Date releaseDate) {        this.releaseDate = releaseDate;    }    public Integer getTypeId() {        return typeId;    }    public void setTypeId(Integer typeId) {        this.typeId = typeId;    }}

② dao

package com.cun.dao;import org.springframework.data.jpa.repository.JpaRepository;import com.cun.bean.Diary;public interface DiaryDao extends JpaRepository
   
     {
   }
   

③ 控制

package com.cun.controller;import java.util.Date;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.PathVariable;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.ResponseBody;import com.cun.bean.Diary;import com.cun.dao.DiaryDao;@Controller@RequestMapping("/diary")public class DiaryController {    @Autowired    private DiaryDao diaryDao;    @ResponseBody    @RequestMapping("/sub")    public void sub(String edi) {        Diary diary = new Diary();        diary.setContent(edi);        Date date = new Date();        diary.setReleaseDate(date);        diaryDao.save(diary);    }    @ResponseBody    @RequestMapping("/get/{id}")    public String getText(@PathVariable("id") Integer id) {        return diaryDao.findOne(id).getContent();    }}

其他 pom、application 配置，不是重点，省略

三、功能简单演示

1、输入文本

点击提交

2、查看数据库

数据已经存进去了，并且是带有样式标签的

3、显示文本

在浏览器输入链接，这个 RequestMapping 使用 rest 风格

可见浏览器显示的文本，是刚才输入的文本样式

四、ckeditor实现图片上传

图片上传，要使用 ckeditor 完整版，效果图如下

先点击 则显示如下，可见图片上传默认是关闭的

1、启动图片上传

①修改 image.js

在下面这个地方

下面设置为开启

② 再次打开，则多了个上传

2、配置图片上传请求，

① 修改 config.js，例如按下面这样修改，

CKEDITOR.editorConfig = function( config ) {
         // Define changes to default configuration here. For example:      // config.language = 'fr';      // config.uiColor = '#AADC6E';      //设置自己图片上传的Controller的RequestMapping，注意是配置在函数里边      config.filebrowserUploadUrl="/edit/ckeditorUpload"; };

②编写 Controller

package com.cun.controller;import java.io.File;import org.apache.commons.io.FileUtils;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.multipart.MultipartFile;@Controller@RequestMapping("/edit")public class CkeditorController {
       // 注意路径格式，一般为项目路径下的一个文件夹里边，项目发布到linux服务器上又得改了    String imageFilePath = "C://LLLLLLLLLLLLLLLLLLL/20180209/TestCkeditor/src/main/webapp/static/myImage/";    /**     * 进入编辑器页面     * @return     */    @RequestMapping("/ckeditor")    public String editor() {        return "edit";    }    /**     * 编辑器图片上传实现     * @param file     * @param CKEditorFuncNum     * @return     * @throws Exception     */    @ResponseBody    @RequestMapping("/ckeditorUpload")    //名字upload是固定的，有兴趣，可以打开浏览器查看元素验证    public String ckeditorUpload(@RequestParam("upload") MultipartFile file, String CKEditorFuncNum) throws Exception {        // 获取文件名        String fileName = file.getOriginalFilename();        // 获取文件的后缀名        String suffixName = fileName.substring(fileName.lastIndexOf("."));        //实际处理肯定是要加上一段唯一的字符串（如现在时间），这里简单加 cun        String newFileName = "cun" + suffixName;        //使用架包 common-io实现图片上传        FileUtils.copyInputStreamToFile(file.getInputStream(), new File(imageFilePath + newFileName));        //实现图片回显，基本上是固定代码，只需改路劲即可        StringBuffer sb = new StringBuffer();        sb.append("");        return sb.toString();    }}

3、效果

① 打开该富文本编辑器的 ② 选择你要上传的图片，我选择仙剑三一张照片~~ ③ 点击上传到服务器，能进入如下的界面，表示成功了 ④ 额外，不妨看一下图片有没有上传到设置对应的目录，是有的！

五、小结

1、使用起来还是很简单的，使应用更具有人性化

2、本项目的简单版源代码：https://github.com/larger5/SpringBoot-Ckeditor.git 3、本项目的完整版源代码：https://github.com/larger5/SpringBoot-Ckeditor2.git

转载地址：https://larger5.blog.csdn.net/article/details/79399187 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！