Vue3 使用 富文本编辑器 wangeditor/editor-for-vue 配置详解

已于 2024-09-04 18:31:10 修改
阅读量4.2k 收藏 17
点赞数 6
分类专栏： vue3 文章标签： vue.js 前端 javascript
于 2024-09-04 16:39:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45563734/article/details/141895845
版权

Vue3 使用 富文本编辑器 wangeditor/editor-for-vue 配置详解

先上官网地址 wangEditor 5 点这里

  1. wangeditor 主要API

配置功能栏


		let toolbarConfig = {
			toolbarKeys: [ 
					"bold", // 字体加粗 
					"underline", // 字体下划线 
					"italic", // 字体斜体 
					"through", // 字体删除线 
					"code", // 字体代码 
					"sub", // 下标 "sup", // 上标 
					"clearStyle", // 清除字体样式 
					"color", // 字体颜色 
					"bgColor", // 背景颜色 
					"fontSize", // 字体大小 
					"fontFamily", // 字体 
					// "indent", // 增加缩进 
					// "delIndent", // 减少缩进 
					// "justifyLeft", // 左对齐 
					// "justifyRight", // 右对齐 
					// "justifyCenter", // 居中对齐 
					// "justifyJustify", // 两端对齐 
					'|', // 分割线
					"lineHeight", // 行间距 
					"insertImage", // 插入图片 
					"deleteImage", // 删除图片 
					"editImage", // 编辑图片 
					"viewImageLink", // 查看图片链接 
					"imageWidth30", // 图片宽度30% 
					"imageWidth50", // 图片宽度50% 
					"imageWidth100", // 图片宽度100% 
					"divider", // 分隔线 
					"emotion", // 表情 
					"insertLink", // 插入链接 
					"editLink", // 编辑链接 
					"unLink", // 取消链接 
					"viewLink", // 查看链接 
					"codeBlock", // 代码块 
					"blockquote", // 引用块 
					'|',
					"headerSelect", // 头部类型选择 
					"header1", // 头部1 
					"header2", // 头部2 
					"header3", // 头部3 
					"header4", // 头部4 
					"header5", // 头部5 
					"todo", // 待办事项 
					"redo", // 重做 
					"undo", // 撤销 
					"fullScreen", // 全屏 
					"enter", // 换行 
					"bulletedList", // 无序列表 
					"numberedList", // 有序列表 
					"insertTable", // 插入表格 
					"deleteTable", // 删除表格 
					"insertTableRow", // 插入表格行 
					"deleteTableRow", // 删除表格行 
					"insertTableCol", // 插入表格列 
					"deleteTableCol", // 删除表格列 
					"tableHeader", // 表格标题 
					"tableFullWidth", // 表格全宽 
					// "insertVideo", // 插入视频 
					// "uploadVideo", // 上传视频 
					"editVideoSize", // 编辑视频大小 
					"uploadImage", // 上传图片 
					"codeSelectLang", // 选择代码语言 
					// 设置为下拉选择    ---------------------------------------   一下代码为下拉样式
					{
						key: 'group-video',
						title: '视频',  // 下拉名称
						iconSvg:
							'<svg viewBox="0 0 1024 1024"><path d="M981.184 160.096C837.568 139.456 678.848 128 512 128S186.432 139.456 42.816 160.096C15.296 267.808 0 386.848 0 512s15.264 244.16 42.816 351.904C186.464 884.544 345.152 896 512 896s325.568-11.456 469.184-32.096C1008.704 756.192 1024 637.152 1024 512s-15.264-244.16-42.816-351.904zM384 704V320l320 192-320 192z"></path></svg>',   // 下拉图标
						menuKeys: ['insertVideo', 'uploadVideo'],  // 插入视屏  // 视屏上传
					},
					'|',
							{
					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'], // 对齐的四种方式
				},
				{
					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'], // 缩进的两种方式
				},
			]
		};

在这里插入图片描述
在这里插入图片描述

编辑器配置

	//编辑器配置
		let editorConfig = {
			placeholder: '请输入内容...', // 配置编辑器 placeholder
			readOnly: false, // 配置编辑器是否只读，默认为 false
			autoFocus: true, // 配置编辑器默认是否 focus ，默认为 true
			scroll: true, // 配置编辑器是否支持滚动，默认为 true
			maxLength: 1000,  // 最大输入length
			hoverbarKeys：{
			    'link': {
			        // 重写 link 元素的 hoverbar
			        menuKeys: ['editLink', 'unLink', 'viewLink'],
			    },
			    'image': {
			        // 清空 image 元素的 hoverbar
			        menuKeys: [],
			    }
			},
            onMaxLength:(editor)=>{
                 // 当达到 maxlength 限制时，触发该回调函数
            },
            onCreated: (editor) => {  
				// 编辑器创建完毕时的回调函数。
			},
			onChange: (editor) => {  
				// 编辑器内容、选区变化时的回调函数。
			},
			onDestroyed: (editor) => {  
				// 编辑器销毁时的回调函数。
			},
			onFocus: (editor) => {  
				// 编辑器 focus 时的回调函数。
			},
			onBlur: (editor) => {  
				// 编辑器 blur 时的回调函数。
			},
			customPaste: (editor) => {  
				// 编辑器 blur 时的回调函数。
			},
			customAlert: (s,t) => {  
				// 自定义编辑器 alert 
			}

			// 所有的菜单配置，都要在 MENU_CONF 属性下
			MENU_CONF: {
			    // 插入图片
				insertImage: {
					onInsertedImage(){
					
					},
				},
				// 配置上传图片
				uploadImage: {
					customUpload: (file, insertFn)=>{
                       // 上传图片的方法
                    },
				},
				// 配置上传视频
				uploadVideo: {
					customUpload:  (file, insertFn)=>{
                       // 上传视频的方法
                    },
				},
			},
		};

以上为基本常用的一些配置

  1. 使用方法

插件安装

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

组件封装

// 组件封装
// WangEditor.vue

<template>
	<div style="border: 1px solid #ccc" v-loading="loading" element-loading-text="文件上传中...">
		<div style="color: red; padding-left: 18px">注：视频最佳宽度700-900</div>
		<Toolbar style="border-bottom: 1px solid #ccc" class="count-yc-box-title" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />

		<Editor
			style="min-height: 250px; overflow-y: hidden"
			v-model="valueHtml"
			:defaultConfig="editorConfig"
			:mode="mode"
			@onCreated="handleCreated"
			class="count-yc-box"
		/>
	</div>
</template>
<script>
//script标签中引入
import '@wangeditor/editor/dist/css/style.css'; // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import { defineExpose, onMounted, watch } from 'vue';
import request from '@/utils/request';   // 这个是请求封装   请更换为你的地址
export default {
	components: { Editor, Toolbar },
	props: {
		editValue: {
			type: String,
			default: '',
		},
	},
	setup(props, { emit }) {
		emits: ['select'];
		// 编辑器实例，必须用 shallowRef
		const editorRef = shallowRef();
		console.log(editorRef, 'editor.getAllMenuKeys()');
		// 内容 HTML
		const valueHtml = ref('');
		const loading = ref(false);

		watch(
			() => props.editValue,
			(val) => {
				//当编辑器的内容发生变化时，把值传给父组件
				valueHtml.value = props.editValue;
			},
			{
				deep: true,
				immediate: true,
			}
		);
		//配置功能栏
		let toolbarConfig = {
			toolbarKeys: [
				'headerSelect',
				'header1',
				'header2',
				'header3',
				{
					key: 'group-video',
					title: '视频',
					iconSvg:
						'<svg viewBox="0 0 1024 1024"><path d="M981.184 160.096C837.568 139.456 678.848 128 512 128S186.432 139.456 42.816 160.096C15.296 267.808 0 386.848 0 512s15.264 244.16 42.816 351.904C186.464 884.544 345.152 896 512 896s325.568-11.456 469.184-32.096C1008.704 756.192 1024 637.152 1024 512s-15.264-244.16-42.816-351.904zM384 704V320l320 192-320 192z"></path></svg>',
					menuKeys: ['insertVideo', 'uploadVideo'],
				},
				'blockquote',
				'|',
				'bold',
				'underline',
				'italic',
				'lineHeight',
				{
					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);
			loading.value = true;
			request({
				url: '/common/file/upload',
				headers: {
					'Content-Type': 'multipart/form-data',
				},
				method: 'post',
				timeout: 50000,
				data: formData,
			})
				.then((res) => {
					if (res.code === 200) {
						const src = res.data.fileUrl;
						insertFn(src, '百度 logo', src);
						loading.value = false;
					} else {
						loading.value = false;
					}
				})
				.catch(() => {
					loading.value = false;
				});
		}

		function getOnInsertedImage(imageNode) {
			uploadImageList.value.push(imageNode);
		}

		//编辑器配置
		let editorConfig = {
			placeholder: '请输入内容...',
			// 所有的菜单配置，都要在 MENU_CONF 属性下
			MENU_CONF: {
				insertImage: {
					onInsertedImage: getOnInsertedImage(),
				},
				// 配置上传图片
				uploadImage: {
					customUpload: update,
				},
				uploadVideo: {
					customUpload: update,
				},
			},
		};

		// 组件销毁时，也及时销毁编辑器
		onBeforeUnmount(() => {
			const editor = editorRef.value;
			if (editor == null) return;
			editor.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);
		};

		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) => {
			console.log(`【自定义提示】${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,
			valueHtml,
		});

		return {
			editorRef,
			valueHtml,
			mode: 'default', // 或 'simple'
			toolbarConfig,
			editorConfig,
			handleCreated,
			handleChange,
			handleDestroyed,
			handleFocus,
			handleBlur,
			customAlert,
			customPaste,
			abc,
			loading,
		};
	},
};
</script>

组件使用

<template>
    <el-form ref="ruleFormRef" :model="ruleForm" class="demo-ruleForm" label-width="80px">
      <el-form-item label="内容" prop="content" v-if="ruleForm.radio1 == 1" class="label-befor">
            <WangEditor class="WangEditor" @select="getRich" ref="childrenRef" :editValue="editValue" />
        </el-form-item>
    </el-form>
</template>
  
<script setup>
import { onMounted, reactive, ref, watch, nextTick } from 'vue'

import WangEditor from '@/custom/WangEditor.vue'

const props = defineProps({
  // 父页面传递的数据
    dataRow: {
        type: Object,
        default: () => {
            return { "title": "", "languageType": 1, "contentType": 1, "content": "", "remark": null }
        }
    },
})
const ruleFormRef = ref()
const ruleForm = reactive({
    content: "",
})
const editValue = ref("")

watch(props, (newUser, oldUser) => {
    if (props.dataRow && props.dataRow.id) {
      // 富文本回显
        ruleForm.content = props.dataRow.content
        editValue.value = ruleForm.content
    }
}, {
    deep: true,
    immediate: true
});

//当编辑器的内容更新时，获取该值
const getRich = function (value) {
    ruleForm.content = value
}
defineExpose({
    ruleForm,
})
</script>

上图
在这里插入图片描述

以上的代码封装 以及使用方法可直接复制使用 但需要修改你自己的上传接口。

以上就是wangeditor/editor-for-vue 基本配置详解，希望可以帮到您！

你的眼睛會笑
关注
专栏目录
Vue3中使用富文本编辑器
m0_51431448的博客
10-20 2741
在vue3中我们可以使用@wangeditor/editor、@wangeditor/editor-for-vue来实现其功能。
Vue3 富文本编辑器插件wangEditor
m0_46627407的博客
08-30 3735
Vue3 富文本编辑器插件wangEditor
vue3-wangeditor:基于Wangeditor富文本编辑器，用于Vue3.x的组件
04-02
vue3-wangeditor :open_book:项目介绍 vue3-wangeditor是一种基于wangEditor二次封装的Vue3.x的Web富文本编辑器，轻量，简洁，易用，开源免费。 兼容常见的PC浏览器：Chrome，Firefox，Safar，Edge，QQ浏览器，IE11。 不支持移动端。 wangEditor当前是v4版本。 内置了代码高亮插件highlight.js ，使用的主题是Lioshi :light_bulb:注意 基于wangeditor默认配置，修改了我自己的替代配置 focus: false // 是否自动聚焦到编辑器，默认是 true ，我改成 false emotions: [ ] // 添加了大部分常见的 emoji 表情 languageTab: ' ' // 编辑器中按下 tab 键默认添加 4 个空格，我的习惯是 2 格 menuTooltipPosition: 'do
轻量级富文本编辑器wangEditor结合vue使用方法示例
10-17
在我们项目中，有些时候需要使用富文本编辑器。本文将以百度开发的Ueditor结合Vue.js介绍一下。非常具有实用价值，需要的朋友可以参考下
Vue3 富文本：WangEditor
最新发布
zhzjn的博客
10-10 379
开源 Web 富文本编辑器，开箱即用，配置简单。
node-modules/@wangeditor/editor-for-vue
07-13
node_modules/@wangeditor/editor-for-vue
vue富文本编辑器 vue-quill-editor.js quill版本1.3.6
07-01
vue富文本编辑器vue-quill-editor.js quill版本1.3.6 使用教程 ： vue-quill-editor富文本编辑器使用方法，最全，含部分源码解读，含图片上传，如果页面有多个富文本，图片上传解决方案 https://blog.csdn.net/cplvfx/article/details/125557966
Vue3项目中使用富文本编辑器
weixin_42560947的博客
11-21 6554
Vue3项目中使用富文本编辑器
vue3中使用wangeditor
qq_25519615的博客
11-30 4233
看了的官方文档，觉得很多的配置项很难找，对刚刚想用wangeditor的小伙伴不友好，于是站在开发使用的角度上来写写稍微详细一点点的使用说明，本案例只对我项目上需要的一些功能进行讲解，至于其他的api还需要自行研究官方文档才行，先来看看最终效果。
vue3中使用富文本编辑器【wangEditor】
05-17 3689
开源 Web 富文本编辑器，开箱即用，配置简单。
Vue3中使用的富文本编辑器（详细实现流程）
贫僧法号依平
04-09 8219
有不少的前端需求都需要使用到富文本编辑器,但是富文本编辑器百花齐放,每次使用可能都会重新找一个编辑器,所以有了这篇文章. 当项目中需要使用到富文本编辑器时,可以直接按照这篇文章的步骤进行,不出意外的话应该可以满足你的绝大多数需求。
vue3中使用WangEditor
wam923259736的博客
07-26 4361
Vue3使用WangEditor
vue-editor:vue可视化编辑器 可视化编辑器
05-18
测试 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
vue中使用wangeditor富文本编辑器
云霸屏CSDN官方博客
11-19 6292
需要知道富文本编辑器是所见即所得的文本编辑器，简单来说就是文本上面写的行内样式，那我们该怎样保存这些行内样式呢，在这里我是写成了组件的形式。return中写上如下代码，需要注意的时上传图片后，后端必须返回url图片的链接，否则编辑器中不会显示图片。研究一番发现弱国想要怎加或者修改编辑器的功能首先要获取这个功能的key。到这里其实基本功能已经实现了，那我们怎么保存，编辑器中的内容呢。这个时候编辑器的功能已经实现了 如下图。这个时候就可以看到每个功能的key了。就可以实现你想要的功能了，如下图。
Vue 3 富文本编辑器组件详解
2401_86113453的博客
09-02 3011
本文所述的Vue组件旨在提供一个可高度自定义的富文本编辑器。富文本内容编辑工具栏配置自定义图片上传与插入通过v-model实现双向数据绑定异步加载并渲染图片在富文本编辑器中，模态框（如图片上传、链接插入等）是常见的交互元素。为了让这些模态框符合我们的UI风格，我们通常需要自定义它们的样式和位置。图片上传是富文本编辑器中的重要功能。通常，我们需要自定义上传逻辑，以便将图片上传到服务器，并将服务器返回的图片信息插入到编辑器中。
vue wangeditor 富文本编辑器的使用
细节怪的博客
02-17 5875
文章编辑，内容中可配置图片、视频上传、文章标题与内容分离；首行缩进2个字符；
vue3 wangEditor 使用
qq_43600406的博客
07-19 1087
工具栏的配置都存入toolbarKeys当中，可以自定义工具栏。
vue3 使用wangEditor
gaozhiqiang1988的博客
03-13 889
vue3 调用wangEditor
安装版本@wangeditor/editor-for-vue
09-13
要安装"@wangeditor/editor-for-vue"的版本，你可以使用npm或yarn命令。 使用npm命令： ```shell npm install @wangeditor/editor-for-vue ``` 使用yarn命令： ```shell yarn add @wangeditor/editor-for-vue ``` 这将会安装最新版本的"@wangeditor/editor-for-vue"包。如果你需要指定版本，可以在命令后面加上@符号和版本号，例如： ```shell npm install @wangeditor/editor-for-vue@1.0.0 ``` 或者 ```shell yarn add @wangeditor/editor-for-vue@1.0.0 ``` 这将会安装指定版本的"@wangeditor/editor-for-vue"包。记得把版本号替换成你需要的具体版本。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值