内容编辑器也称为富文本编辑器,是主网站中用于内容修改编辑的重要工具,现目前可供大家使用的编辑器也非常多。Vue3框架又是时下非常流行的程序开发工具,那么如何将二者相结合,并且能尽量做到通用呢?今天和大家一起来分享关于在Vue3框架下使用内容编辑器的设置和代码,并且是可以通用的。
1、最终实现的效果
2. 下载富文本编辑器依赖
// 这里使用的是wangEditor富文本编辑器 npm install @wangeditor/editor @wangeditor/editor-for-vue // 或 yane add @wangeditor/editor @wangeditor/editor-for-vue
3. 使用富文本编辑器
<!-- * @Author: wangzhiyu * @version: 1.0.0 * @Date: 2024-04-7 11:04:25 * @LastEditTime: 2024-04-08 21:44:20 * @Descripttion: 富文本编辑器组件 --> <template> <div style="border: 1px solid #ccc; width: 50%; margin: 100px auto"> <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" mode="default" /> <Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig" mode="default" @onCreated="handleCreated" @customPaste="customPaste" /> </div> <el-button style="margin: 0 auto" @click="getEditorHTML">获取富文本HTML内容</el-button> </template> <script setup> // 引入富文本编辑器CSS import '@wangeditor/editor/dist/css/style.css'; import { onBeforeUnmount, ref, shallowRef } from 'vue'; // 导入富文本编辑器的组件 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'; // 编辑器实例,必须用 shallowRef const editorRef = shallowRef(); // 内容 HTML const valueHtml = ref('<p>hello <strong>hello world</strong></p>'); const toolbarConfig = {}; const editorConfig = ref({ placeholder: '请输入内容...', MENU_CONF: {} }); // 自定义图片上传 editorConfig.value.MENU_CONF['uploadImage'] = { async customUpload(file, insertFn) { console.log('上传图片', file); // 将上传的file图片转换为base64 const base64 = URL.createObjectURL(file); // 这里的file为上传的图片对象,insertFn传入 insertFn(base64, 'img'); }, }; // 自定义视频上传 editorConfig.value.MENU_CONF['uploadVideo'] = { async customUpload(file, insertFn) { console.log('上传视频', file); }, }; // 富文本编辑器生成后触发 const handleCreated = editor => { editorRef.value = editor; // 记录 editor 实例,重要! console.log(editorConfig.value.MENU_CONF, 'editorConfig.value'); }; // 监听富文本编辑器粘贴行为 const customPaste = (editor, event, callback) => { // 获取粘贴的纯文本 const text = event.clipboardData.getData('text/plain'); if (text) { editor.insertText(text); event.preventDefault(); callback(false); } }; // 获取富文本html内容 const getEditorHTML = () => { console.log(editorRef.value.getHtml()); }; // 组件销毁时,也及时销毁编辑器 onBeforeUnmount(() => { const editor = editorRef.value; if (editor == null) return; editor.destroy(); }); </script>
4、注意事项
注意在富文本编辑器中粘贴图片或者上传图片时,会自动触发editorConfig.value.MENU_CONF['uploadImage']回调函数,需要在这个回调函数中处理文件上传,然后再调用inserFn函数将url加载到富文本编辑器中。注意在组件销毁的同时销毁富文本编辑器。富文本编辑器的实例必须为shallowRef。
好了,以上内容就是在Vue3框架中加入内容编辑器的方法,你也可以按照你自己使用的编辑器也做相应的调整。