Vue3使用富文本框（wangeditor）

毕业涉及中使用到了富文本框，所以学习使用了wangeditor富文本框，现进行总结

1.安装

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

2.配置wangeditor组件（src/components/wangeditor.vue）

<template><div style="border: 1px solid #ccc"><Toolbarstyle="border-bottom: 1px solid #ccc":editor="editorRef":defaultConfig="toolbarConfig":mode="mode"/><Editorstyle="min-height: 250px; overflow-y: hidden;"v-model="valueHtml":defaultConfig="editorConfig":mode="mode"@onCreated="handleCreated"/></div>
</template>

//script标签中引入
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

export default {components: { Editor, Toolbar },setup(props,{emit}) {emits: ['select']// 编辑器实例，必须用 shallowRefconst editorRef = shallowRef()// 内容 HTMLconst valueHtml = ref('')//配置功能栏let toolbarConfig = {toolbarKeys: ['headerSelect','blockquote','|','bold','underline','italic',{key: 'group-more-style',title: '更多',iconSvg:'<svg viewBox="0 0 1024 1024"><path d="M204.8 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path><path d="M505.6 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path><path d="M806.4 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path></svg>',menuKeys: ['through', 'code', 'sup', 'sub']},'color','bgColor','|','fontSize',{key: 'group-justify',title: '对齐',iconSvg:'<svg viewBox="0 0 1024 1024"><path d="M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z"></path></svg>',menuKeys: ['justifyLeft', 'justifyRight', 'justifyCenter', 'justifyJustify']},'todo','fontFamily',{key: 'group-indent',title: '缩进',iconSvg:'<svg viewBox="0 0 1024 1024"><path d="M0 64h1024v128H0z m384 192h640v128H384z m0 192h640v128H384z m0 192h640v128H384zM0 832h1024v128H0z m0-128V320l256 192z"></path></svg>',menuKeys: ['indent', 'delIndent']},'|','emotion','insertLink','uploadImage','insertTable','codeBlock','divider','clearStyle','|','undo','redo',]}const uploadImageList = ref([])const saveImageList = ref([])//上传本地图片function update(file,insertFn) {let formData = new FormData()formData.append('file', file)axios.post('http://localhost:8080/api/file/upload',formData,{headers: {'Content-Type': 'multipart/form-data'}}).then(res => {if (res.data.code == 0){const src = 'http://121.37.0.16:9000/public/'+ res.data.data.fileName[0]insertFn(src, '百度 logo', src)}})}function getOnInsertedImage(imageNode){uploadImageList.value.push(imageNode)}//编辑器配置let editorConfig =  {placeholder: '请输入内容...',// 所有的菜单配置，都要在 MENU_CONF 属性下MENU_CONF: {insertImage:{onInsertedImage: getOnInsertedImage()},// 配置上传图片uploadImage: {customUpload: update}}}// 组件销毁时，也及时销毁编辑器onBeforeUnmount(() => {const editor = editorRef.valueif (editor == null) returneditor.destroy()})function copyObject(obj){return JSON.parse(JSON.stringify(obj));}const handleCreated = (editor) => {editorRef.value = editor // 记录 editor 实例，重要！saveImageList.value = editor.getElemsByType('image')uploadImageList.value = copyObject(saveImageList.value)console.log('created', editor)}watch(() => valueHtml.value,()=>{//当编辑器的内容发生变化时，把值传给父组件emit('select', valueHtml.value)})const handleChange = (editor) => { console.log('change:', editor.children) }const handleDestroyed = (editor) => { console.log('destroyed', editor) }const handleFocus = (editor) => { console.log('focus', editor) }const handleBlur = (editor) => { console.log('blur', editor) }const customAlert = (info, type) => { alert(`【自定义提示】${type} - ${info}`) }const customPaste = (editor, event, callback) => {console.log('ClipboardEvent 粘贴事件对象', event)// const html = event.clipboardData.getData('text/html') // 获取粘贴的 html// const text = event.clipboardData.getData('text/plain') // 获取粘贴的纯文本// const rtf = event.clipboardData.getData('text/rtf') // 获取 rtf 数据（如从 word wsp 复制粘贴）// 自定义插入内容editor.insertText('xxx')// 返回 false ，阻止默认粘贴行为event.preventDefault()callback(false) // 返回值（注意，vue 事件的返回值，不能用 return）// 返回 true ，继续默认的粘贴行为// callback(true)}//父组件调用子组件的方法清空编辑器内容const abc =function (){valueHtml.value = ''}//暴露该方法,defineExpose要引入defineExpose({abc})return {editorRef,valueHtml,mode: 'default', // 或 'simple'toolbarConfig,editorConfig,handleCreated,handleChange,handleDestroyed,handleFocus,handleBlur,customAlert,customPaste,abc,};}
}

3.父组件中

//引入
import WangEditor from '../../../components/WangEditor.vue'//注册
components: {WangEditor
},

<a-form-model-item :wrapper-col="{ offset: 2, span: 24 }" name="introduction"><div>课程介绍：</div><br><WangEditorclass="WangEditor"@select="getRich"ref="childrenRef"/>
</a-form-model-item>

 //当编辑器的内容更新时，获取该值
const getRich = function (value){state.introduction = valueconsole.log(value)
}//获取dom元素
const childrenRef = ref(null)······//调用子组件的方法清空编辑器内容childrenRef.value.abc()

Vue3使用富文本框（wangeditor）相关推荐

使用富文本编辑器wangEditor完成图片文件的上传
项目中一些特定的功能可能需要在页面中用到富文本编辑器来实现文件的输入上传等等,在这里用wangEditor来实现使用富文本编辑器进行文件图面的输入和上传保存,这里wangEditor也可以参考wang ...
vue中如何使用富文本框组件
富文本框,就是可以在文本框里面输入文本并携带自我编辑的一种编辑器,使用vue做项目时少不了用到富文本框组件,下面就来说说该组件的使用步骤一.首先要在vue脚手架的依赖按钮中添加新的依赖vue-qui ...
在vue3中使用富文本编辑器WangEditor
yarn add @wangeditor/editor # 或者 npm install @wangeditor/editor --saveyarn add @wangeditor/editor-fo ...
Vue cli项目，使用富文本编辑器WangEditor，8小时摸爬滚打后，弃坑Tinymce、UEditor、Quill
一共尝试了 Tinymce.UEditor.Quill等好几种编辑器,最终觉得最满意的是 WangEditor. 1.Tinymce 开源项目ElementAdmin自带的例子,图片上传竟然存的是 ...
vue中使用富文本编辑器wangEditor及踩坑
因为上传图片的问题使用过了各种富文本,最后发现还是这个比较好用.分享记录一下. 安装 npm install wangeditor --save 新建一个wangeditor.vue(组件),代码内容 ...
【WangEditor】使用富文本编辑器 WangEditor 实现用户自定义图片大小（改js源码）
效果图 1.WangEditor本身提供的 "编辑图片" 功能,调整图片大小选项只能为30%,50%,100%. 2.修改 wangEditor.js 源码后,用户可以输入自定义大 ...
vue3使用富文本编辑器wangEditor-v5（未使用composition api写法）
效果安装安装核心库和其vue组件库 yarn add @wangeditor/editor yarn add @wangeditor/editor-for-vue@next 使用v-model封装 ...
前端使用富文本编辑器wangEditor
一.npm下载终端输入 npm i wangeditor --save 二.代码此处已经把富文本编辑器抽出为组件: 组件内容: <template lang="html" ...
THINKPHP5.1使用富文本编辑器wangEditor
首先,本文中的代码在不使用AJAX的场景中. 我们需要知道几点: 0.wangEditor v3 默认只支持div方式显示出编辑器. 1.wangEditor 从v3版本开始不支持 textarea ...

Vue3使用富文本框（wangeditor）

Vue3使用富文本框（wangeditor）相关推荐

最新文章

热门文章