SspringBoot3+Vue3实现富文本编译器

安装wangeditor5

npm install @wangeditor/editor --save
npm install @wangeditor/editor-for-vue@next --save

 引入和使用wangeditor5

import '@wangeditor/editor/dist/css/style.css'//引入css
import {onBeforeUnmount,shallowRef} from "vue";
import {Editor,Toolbar} from '@wangeditor/editor-for-vue'

在表格里面预览图片

<el-table-column label="封面">
          <template #default="scope">
            <!-- 使用 el-image 标签显示图片 -->
            <el-image v-if="scope.row.fengMian" :src="scope.row.fengMian" :preview-src-list=[scope.row.fengMian] preview-teleported style="width: 90px; height: 80px; " />
          </template>
        </el-table-column>

 集成富文本

初始化（表单中）

wangEditor5富文本字段可以直接与form中的字段使用v-model进行绑定

<div style="border: 1px solid #ccc;width: 100%">
            <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editorRef"
                :mode="mode"
            />
            <Editor
                style="height: 500px;overflow-y: hidden"
                v-model="data.form.neiRong"
                :mode="mode"
                :defaultConfig="editorConfig"
                @onCreated="handleCreated"
            />
          </div>

初始化文本

/*wangeditor5初始化*/
const baseurl= 'http://localhost:8080'
const editorRef=shallowRef()//编辑器实例，必须用shallowRef
const mode= 'default'
const editorConfig={ MENU_CONF:{} }
//图片上传配置
editorConfig.MENU_CONF['uploadImage'] = {
  server:baseurl + '/files/wang/upload',//服务器上传接口
  fieldName:'file'//服务器图片上传接口参数
}
//组件销毁时，也及时销毁编辑器，否则可能会造成内存泄漏
onBeforeUnmount(()=>{
  const editor=editorRef.value
  if (editor == null) return
  editor.destroy()
})
//记录editor实例，重要！
const handleCreated = (editor) =>{
  editorRef.value=editor
}
/*wangeditor5初始化结束*/

表格里面查看内容

<el-table-column label="内容">
          <template #default="scope">
            <el-button type="primary" @click="view(scope.row.neiRong)">查看内容</el-button>
          </template>
        </el-table-column>

const view = (neiRong) =>{
  data.neiRong=neiRong
  data.viewVisible=true
}
const data=reactive({
    viewVisible:false,
})

富文本对应的后端文件上传接口

@PostMapping("/wang/upload")
    public Map<String,Object> wangEditorUpload(MultipartFile file){
        String originalFilename = file.getOriginalFilename(); //xxx.png
        if (!FileUtil.isDirectory(filePath)){//如果目录不存在需要先创建目录
            FileUtil.mkdir(filePath);//创建一个files目录
        }
        //提供文件存储的完整的路径
        //给文件名加一个唯一的标识
        String fileName=System.currentTimeMillis() + "_" +originalFilename;//1234566721_xxx.png
        String realPath=filePath+fileName;
        try{
            FileUtil.writeBytes(file.getBytes(),realPath);
        } catch (IOException e) {
            e.printStackTrace();
            throw new CustomException("500","文件上传失败");
        }
        //返回一个网络链接
        //http://localhost:8080/files/download/xxx.png
        String url="http://localhost:8080/files/download/"+fileName;
        Map<String,Object> resMap= new HashMap<>();
        List<Map<String,Object>> list= new ArrayList<>();
        Map<String,Object> urlMap= new HashMap<>();
        urlMap.put("url",url);
        list.add(urlMap);
        resMap.put("error",0);
        resMap.put("data",list);
        return resMap;
    }

内容弹窗

<el-dialog title="内容" v-model="data.viewVisible" width="50%" :close-on-click-modal="false" destroy-on-close>
      <div class="editor-content-view" style="padding: 20px" v-html="data.neiRong"></div>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="data.viewVisible = false">关闭</el-button>
      </span>
      </template>
    </el-dialog>