WangEditor数据保存和数据渲染页面

1.WangEditor编辑框中数据的获取

 WangEditor中返回的数据有两个格式

        一种是JSON格式的（将数据封装成一个数组，一个数组元素代表一个标签）

        另外一种是HTML格式的字符串（包含各种各样的标签的字符串）

 const handleCreated = (editor) => {
        console.log(editor.children)
        const content = editor.children
        // const editor1 = createEditor({ content }) // `content` 即为 JSON 内容
        // const html = editor1.getHtml() // 获取相对于的HTML
        // console.log(html) // HTML类型的字符串
        ArticleContent.value = editor.children;
        editorRef.value = editor
}

 当我们获取到了数据，就要把它存储到数据库中

2.设计数据库

无论是HTML还是JSON数据我们都可以把它看为一个字符串，但是编辑框中可以无限的输入下去，我们选择存储数据较多的text类型，有人可能有要说了，如果text也存储不下怎么办呢？我了解到方法有两种

        1.可以将一个长文章按章节截成一小段一小段的存储起来

        2.还可以将文章转换为HTML文件存储到数据库中

这两种方法大家自行查找资料实现一下

我的文章篇幅不是很大就直接使用字符串实现了

其中的content就是富文本框的数据，采用了text类型

3.后端代码的实现

 我使用的是java实现的这个是entity类 可以看到text类型对应的java的String

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.time.LocalDateTime;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Article {
    private int id;
    private String title;
    private String author;
    private LocalDateTime createDate;
    private LocalDateTime updateDate;
    private String content;
    private int moduleId;
    private int like;
    private int read;
}

具体的功能实现自己编写

4.数据保存到数据库

前端后端数据库都有了，我们要对数据进行处理一番在进行添加到数据库中

 我这边使用时wangEditor的JSON格式数据，所以我通过JSON.stringify(你的数据存放变量)将JSON数据转换为字符串类型，然后传入到你的api接口当中就可以了

import {insertArticle} from '../../api/articles/articles';
    const addArticle = () =>{
      const content = JSON.stringify(ArticleContent.value);
      const title = ArticleTitle.value; 
      const moduleId = Number(Id.value);    
      insertArticle(
        title,
        content,
        moduleId,
        "1"
     )
      .then(res=>{
        console.log(res)
      })
      
    }

5.数据获取及其数据处理

数据的获取就是数据库的正常查操作

得到的数据应该是这样的一种格式，一个巨长无比的字符串

我们通过JSON.parse(你那个巨长字符串)将它从字符串再次转换为JSON格式

const getArticleById = () =>{
        selectArticleById(id)
        .then(res=>{
            Article.value = res;
            Article.value.content = JSON.parse(res.content);
            renderContent()
        })
    }

 6.渲染到页面

当我们拥有这个JSON数据时，恭喜你来到了最后一步数据渲染

我采用的是vue项目

我们在页面上写一个这样的盒子 v-html = “你存放JSON数据的变量”

<div v-html="renderedContent"></div>

 导入 createEditor 

我这是在两个页面当中所以又创建了一个Editior

import { createEditor } from '@wangeditor/editor'

const renderContent = () => {
      const content = Article.value.content; // 将 JSON 数据转换为对象
      const editor = createEditor({ content }); // 创建editor 对象 `content` 即为 JSON 内容
      const html = editor.getHtml();  //JSON转换为HTML格式
      renderedContent.value = html; // 存入到渲染的变量当中
      console.log(renderedContent.value)
};

将JSON转换为HTML格式之后v-html可以直接渲染到页面当中

这样就实现了这样一个功能，前提是要安装wangEditor依赖

该文章有讲解怎么安装wangEdit，还详细介绍了上传图片的功能https://blog.youkuaiyun.com/weixin_69799831/article/details/144811621?spm=1001.2014.3001.5501