富文本笔记：WangEditor.md

最新推荐文章于 2024-07-31 15:57:48 发布

横竖撇折点

最新推荐文章于 2024-07-31 15:57:48 发布

阅读量900

点赞数

分类专栏：全栈工程师实战：从 0 开发云笔记

本文链接：https://blog.csdn.net/qq_41089021/article/details/108728365

版权

本文档介绍了如何在Keller云笔记中使用WangEditor实现富文本笔记的编辑和显示。从安装组件、业务流程到前后端代码实现，详细阐述了编辑器的集成与使用，包括编辑器的基本功能、接口定义、组件封装和效果测试。

摘要由CSDN通过智能技术生成

前言

通过前面两篇的学习，我们实现了在用户主页显示用户笔记本列表，并且在每次选中新的笔记本时展示笔记本中的笔记。接下来，我们将展示并编辑用户的笔记，本篇将实现富文本类型的笔记的编辑和展示功能。

知识准备

编辑富文本笔记，就需要了解一下支持 Vue.js 的富文本笔记组件。百度一下、Google 一下都能发现很多优秀的编辑器，这些编辑器各有特点，基本使用方法是类似的：

加载组件
设置内容
处理图片、视频等上传工作
获取内容

本篇以常用的轻量级编辑器 WangEditor 举例，详细介绍富文本笔记的显示和编辑工作。

WangEditor

要了解一款编辑器，比较简单快捷的方法就是看它的界面布局和效果显示，下图是 WangEditor 编辑器的实际展现效果：

如图所示，它支持一些常用的效果，如：

有序列表、无序列表
H1 到 H5、超链接、引用、代码块
下划线、删除线、加粗、斜体、不同字体
文字颜色、文字背景颜色、emoji 表情
表格、图片、视频

这些操作基本上能满足平时使用富文本编辑的需求，官网地址：

http://www.wangeditor.com/

Keller 云笔记中依然使用 npm 命令安装 WangEditor 组件：

npm install wangeditor

业务流程

富文本笔记编辑效果如下：

对应的业务流程说明：

用户选择打开一个笔记
当选择的是一个富文本笔记时，在右侧展示该笔记的内容，同时右上角有一个编辑图标
用户点击编辑图标，加载富文本笔记编辑器
编辑过程中，用户可以点击右上角的保存图标，保存笔记

服务端代码实现

本篇涉及到的服务端代码，只有 NoteController 和 NoteService 两个类的改动。

NoteController：添加获取、保存笔记内容的接口
NoteService：处理获取、保存笔记内容的业务逻辑

Controller

在 NoteController.java 中添加 get 方法用以获取笔记内容：

        /**
     * 获取笔记详情
     * @param kellerUserId  从 JWT 中解析到的用户 ID
     * @param noteId    用户的笔记 ID
     * @return
     */
    @GetMapping
    public ResponseEntity get(Integer kellerUserId,Integer noteId){
        if(StringUtils.isEmpty(kellerUserId,noteId)){
            return Response.badRequest();
        }
        return Response.ok(service.get(kellerUserId,noteId));
    }

在 NoteController.java 中添加 save 方法用以保存笔记内容：

        /**
     * 保存笔记内容
     * @param kellerUserId  必填
     * @param noteId        必填
     * @param text          纯文本内容
     * @param html          Html 内容
     * @return
     */
    @PostMapping("/save")
    public ResponseEntity save(Integer kellerUserId,Integer noteId,String text,String html){
        if(StringUtils.isEmpty(kellerUserId,noteId) ){
            return Response.badRequest();
        }
        if(text == null){
            text = "";
        }
        if(html == null){
            html =