Vue富文本编辑器使用教程

1.安装

yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --saveyarn add @wangeditor/editor-for-vue@next
# 或者 npm install @wangeditor/editor-for-vue@next --save

2.创建组件

在components下创建富文本编辑器组件

组件内部详情代码（已整理好）

<template><div style="border: 1px solid #ccc"><Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode"/><Editor style="height: 150px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode"@onCreated="handleCreated" @onChange="updateHtml"/></div>
</template>
<script>
import '@wangeditor/editor/dist/css/style.css' // 引入 cssimport {onBeforeUnmount, ref, shallowRef, onMounted, watch} from 'vue'
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'export default {components: {Editor, Toolbar},props: ['html'],setup(props, {emit}) {// 编辑器实例，必须用 shallowRefconst editorRef = shallowRef()// 内容 HTMLconst valueHtml = ref(props.html)watch(props, (newValue, oldValue) => {valueHtml.value = newValue.html})// 模拟 ajax 异步获取内容// onMounted(() => {//   setTimeout(() => {//     valueHtml.value = '<p></p>'//   }, 1500)// })const updateHtml = (val) => {emit('change', valueHtml.value)}const toolbarConfig = {toolbarKeys: ['bold', // 加粗'italic', // 斜体'through', // 删除线'underline', // 下划线'bulletedList', // 无序列表'numberedList', // 有序列表'color', // 文字颜色'insertLink', // 插入链接'fontSize', // 字体大小'lineHeight', // 行高'uploadImage', // 上传图片'delIndent', // 缩进'indent', // 增进'deleteImage',//删除图片'divider', // 分割线'insertImage', // 网络图片'insertTable', // 插入表格'justifyCenter', // 居中对齐'justifyJustify', // 两端对齐'justifyLeft', // 左对齐'justifyRight', // 右对齐'undo', // 撤销'redo', // 重做'clearStyle', // 清除格式'fullScreen' // 全屏],excludeKeys: ['bgColor', // 背景色'blockquote', // 引用'codeBlock', // 代码段'emotion', // 表情'fontFamily', // 字体'headerSelect' // 标题]}const editorConfig = {placeholder: '请输入内容...',}// 组件销毁时，也及时销毁编辑器onBeforeUnmount(() => {const editor = editorRef.valueif (editor == null) returneditor.destroy()})const handleCreated = (editor) => {editorRef.value = editor // 记录 editor 实例，重要！}return {editorRef,valueHtml,mode: 'default',toolbarConfig,editorConfig,handleCreated, updateHtml}}
}
</script>

以上已经配置好了父子组件传值，之后就可以直接调用来进行使用了

调用部分

 <MyEditor @change="(html) => { add.formModel.description = html }" :html="add.formModel.description"/>

Vue富文本编辑器使用教程相关推荐

Vue 富文本编辑器插件 vue-quill-editor 坑！
Vue3 + vue-quill-editor 安装步骤: vue3 安装vue-quill-editor npm install @vueup/vue-quill vue2 安装vue-quill- ...
ueditor html中使用方法,vue集成百度UEditor富文本编辑器使用教程
在前端开发的项目中,难免会遇到需要在页面上集成一个富文本编辑器.那么,如果你有这个需求,希望可以帮助到你. vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简.于 ...
Vue富文本编辑器vue-quill-editor-使用-bug问题-教程
vue-quill-editor npm install vue-quill-editor –save or yarn add vue-quill-editor 文件中使用 <template& ...
vue富文本编辑器 Vue-Quill-Editor
主流富文本编辑器对比前言:vue中很多项目都需要用到富文本编辑器,在使用了ueditor和tinymce后,发现并不理想.所以果断使用vue-quill-editor来实现. wangEditor( ...
Element Tiptap Editor - 免费开源的 Vue 富文本编辑器，专门为搭配 Element UI 使用优化，使用很简单
一款很容易上手配置的富文本编辑器,和 Element plus 一起使用效果非常好,还能自定义功能. 关于 Element Tiptap Editor Element Tiptap Editor 是一 ...
Vue富文本编辑器代码高亮
之前在Vue-awesome上面找富文本编辑器的插件,找了排名第一的vue-quill-editor,排名第一应该是相对比较好用的. 首先下载到自己的项目中 npm install vue-quill ...
vue 富文本编辑器kindeditor使用粘贴图片自动上传图片功能
Kindeditor 的使用这里不再陈述,在KindEditor.create执行时,传入afterCreate方法,在afterCreate的方法里面进行图片上传的功能,这里使用的谷歌浏览器,其他浏 ...
特别好用的Vue富文本编辑器wangEditor自己使用案例组件，附源码，直接使用
前言:已组件化,引入即可使用,包含本地图片上传可拖拽大小.效果图如下:附源码 1.首先老规矩,引入下面两个包 npm i @wangeditor/editor --save npm i @wanged ...
vue富文本编辑器中样式冲突和不能修改的问题
在vue项目中,富文本回显通常采用的是v-html指令来渲染html字符串.但是在回显的过程中,发现了一些问题,以此记录下来. 1.富文本(tinyMec)在编辑的时候采用的是iframe隔离,这样的 ...
vue 富文本编辑器 quill （含代码高亮、自定义字体、汉化、鼠标悬浮提示、组件封装等）
基本使用安装依赖 npm i quill .vue文件 <div ref="editor" :style="finalStyle"></di ...

Vue富文本编辑器使用教程

Vue富文本编辑器使用教程

1.安装

2.创建组件

在components下创建富文本编辑器组件

以上已经配置好了父子组件传值，之后就可以直接调用来进行使用了

调用部分

Vue富文本编辑器使用教程相关推荐

最新文章

热门文章