富文本编辑存储及显示 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绑定

<div class="bottom_box">
  <el-form :model="shopAddForm" :inline="true"
    label-width="160px" label-position="left" class="form_style">
    <el-form-item label="新增博客" prop="content">
       <vue-ueditor-wrap v-model="content"
        :config="editorConfig"
        editor-id="editor-demo-01"></vue-ueditor-wrap>
    </el-form-item>
    <div style="margin: 0 0 16px 424px">
      <el-button @click="$router.back(-1)">取消</el-button>
      <el-button type="primary" style="margin-left: 24px"
         @click="submitForm">保存</el-button>
     </div>
  </el-form>
</div>

  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元素的形式进行传递的。

 

显示 

<el-form-item label="博客" prop="detail">
   <p v-html="shopAddForm.detail"></p>
</el-form-item>

4.后端 

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

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

domain中设置长度

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

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