富文本编辑存储及显示 vue+springBoot

1.前言

最近项目中需要实现对资讯文章等的编辑与存储

前端语言：vue，组件：element，富文本编辑器（vue-ueditor-wrap）

后端语言：springBoot

2.项目需求

需求：前端通过富文本编辑器对文章资讯进行编辑，保存在数据库中，显示时原样式显示。

3.实现

3.1前端

3.1.1安装依赖vue-ueditor-wrap

npm i vue-ueditor-wrap

3.1.2下载ueditor并将其复制到public目录下 

下载链接     vue-ueditor-wrap

将解压的文件夹重命名为 UEditor 并移动到项目的静态资源目录下， Vue CLI（v3+）创建的项目，静态资源目录就是 public。

3.1.3注册组件

// main.js
import { createApp } from 'vue';
import VueUeditorWrap from 'vue-ueditor-wrap';
import App from './App.vue';

createApp(App).use(VueUeditorWrap).mount('#app');

3.1.4绑定

  
    
       
    
    

      取消
      保存
     
  

  setup() {
    const { proxy } = getCurrentInstance();
    const state = reactive({
      content: '你好',
      editorConfig: {},
      shopAddForm: {
      },
    });
    // 表单提交
    const submitForm = () => {
      const shopInfo = {};
      shopInfo.detail = state.content;
      shopInfo.title = '博客发表';
      console.log(shopInfo);
      proxy.$api.addBlob(shopInfo).then(({ data }) => {
        if (!data.code) {
          console.log('新增成功');
        }
      });
    };
    return {
      ...toRefs(state),
      submitForm,
    };
  },
  created() {
    this.editorConfig = {
      // 访问 UEditor 静态资源的根路径，可参考常见问题1
      UEDITOR_HOME_URL: '/UEditor/',
      // 服务端接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
      serverUrl: '//ueditor.szcloudplus.com/cos',
    };
  },

3.1.5展示结果

富文本编辑器正常显示，数据已经绑定

 3.1.6数据传递

前台通过v-model绑定的元素将数据连同form表单一起传给后台，绑定的数据在传递时是以dom元素的形式进行传递的。

 

显示 

4.后端 

后端就是简单的增删改查操作

唯一注意点，DB数据存储，将DB存储字段设置为LONGTEXT，以免报长度不够错误

domain中设置长度

/**
 * 详情
 */
@Column(name = "detail",length=100000)
private String detail;

至此，简单的富文本编辑实现。