WangEditor在Vue前端的应用

1、在Vue项目中安装WangEditor
对于Vue2:
npm install @wangeditor/editor-for-vue --save
或者 yarn add @wangeditor/editor-for-vue
对于Vue3:
npm install @wangeditor/editor-for-vue@next --save
或者 yarn add @wangeditor/editor-for-vue@next
2、将WangEditor封装成组件WangEditor.vue

<template><div><div><button @click="insertText">insert text</button><button @click="printHtml">print html</button><button @click="disable">disable</button></div><div style="border: 1px solid #ccc; margin-top: 10px"><Toolbar:editor="editorRef":defaultConfig="toolbarConfig":mode="mode"style="border-bottom: 1px solid #ccc"/><Editor:defaultConfig="editorConfig":mode="mode"v-model="valueHtml"style="height: 400px; overflow-y: hidden"@onCreated="handleCreated"@onChange="handleChange" @onDestroyed="handleDestroyed" @onFocus="handleFocus" @onBlur="handleBlur" @customAlert="customAlert" @customPaste="customPaste" /> </div> <div style="margin-top: 10px"> <textarea v-model="valueHtml" readonly style="width: 100%; height: 200px; outline: none" ></textarea> </div> </div> </template> <script> import '@wangeditor/editor/dist/css/style.css';import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue';import { Editor, Toolbar } from '@wangeditor/editor-for-vue';export default {components: { Editor, Toolbar },setup() {// 编辑器实例,必须用 shallowRef,重要!const editorRef = shallowRef();// 内容 HTMLconst valueHtml = ref('<p>hello</p>');// 模拟 ajax 异步获取内容onMounted(() => {setTimeout(() => {valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>';}, 1500);});const toolbarConfig = {};const editorConfig = { placeholder: '请输入内容...' };// 组件销毁时,也及时销毁编辑器,重要!onBeforeUnmount(() => {const editor = editorRef.value;if (editor == null) return;editor.destroy();});// 编辑器回调函数const handleCreated = (editor) => {console.log('created', editor);editorRef.value = editor; // 记录 editor 实例,重要!};const handleChange = (editor) => {console.log('change:', editor.getHtml());};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);// 自定义插入内容editor.insertText('xxx');// 返回值(注意,vue 事件的返回值,不能用 return)callback(false); // 返回 false ,阻止默认粘贴行为// callback(true) // 返回 true ,继续默认的粘贴行为};const insertText = () => {const editor = editorRef.value;if (editor == null) return;editor.insertText('hello world');};const printHtml = () => {const editor = editorRef.value;if (editor == null) return;console.log(editor.getHtml());};const disable = () => {const editor = editorRef.value;if (editor == null) return;editor.disable()};return {editorRef,mode: 'default',valueHtml,toolbarConfig,editorConfig,handleCreated,handleChange,handleDestroyed,handleFocus,handleBlur,customAlert,customPaste,insertText,printHtml,disable};},};</script>

3、调用组件

<template><div><WangEditor></WangEditor></div>
</template><script setup>
import WangEditor from './WangEditor.vue'
</script>

4、运行效果
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/124765.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java“牵手”易贝商品列表数据,关键词搜索易贝商品数据接口,易贝API申请指南

ebay商城是一个网上购物平台&#xff0c;售卖各类商品&#xff0c;包括服装、鞋类、家居用品、美妆产品、电子产品等。要获取ebay商品列表和商品详情页面数据&#xff0c;您可以通过开放平台的接口或者直接访问ebay商城的网页来获取商品详情信息。以下是两种常用方法的介绍&…

酷开系统游戏空间,开启大屏娱乐新玩法

在这个充满科技感和无限创意的时代&#xff0c;游戏已经成为我们生活的一部分。而随时着科技的不断发展&#xff0c;以及游戏爱好者的游戏需求在不断提高&#xff0c;促使游戏体验也向更加丰富多彩的方向发展。显然&#xff0c;酷开科技早已经认识到游戏发展的新蓝图&#xff0…

Android离线文字识别-tesseract4android调用

Android在线文字识别可以调阿里云的接口Android文字识别-阿里云OCR调用__花花的博客-CSDN博客 需要离线文字识别的话&#xff0c;可以调tesseract4android。个人测试效果不是特别理想&#xff0c;但是速度真的很快&#xff0c;VIVO S10后摄照片&#xff0c;80ms内识别完成。现…

阿里巴巴推出D.Design文生图网站(免费10-20张图)

简介&#xff1a; d.design是阿里巴巴推出的一个基于人工智能的设计工具&#xff0c;可以帮助用户轻松创建3D模型和场景。该工具提供了丰富的素材库和功能&#xff0c;可以满足用户的各种需求。 ​堆友堆友是Alibaba Design打造的设计师全成长周期服务平台&#xff0c;围绕品质…

汽车技术发展趋势及我国节能与新能源汽车技术

一、世界汽车技术发展趋势 汽车技术正向着低碳化、信息化、智能化方向发展&#xff1b;“三化”趋势成为世界主要汽车强国、主要车企共同的战略选择。 主要汽车战略及方向 在“三化”趋势下&#xff0c;各汽车强国在汽车节能技术、新能源汽车技术、智能网联汽车技术等方面持续…

第十八课、Qt 下载、安装与配置

功能描述&#xff1a;介绍了 Qt 的下载、安装和配置的全部过程&#xff0c;并对关键页面选项进行了详细说明 一、Qt 的下载 Qt 官方下载地址&#xff1a;https://www.qt.io/zh-cn/downloadhttps://download.qt.io/https://download.qt.io/https://www.qt.io/zh-cn/download进入…

2023数学建模国赛选题建议及BC题思路

大家好呀&#xff0c;全国大学生数学建模竞赛今天下午开赛啦&#xff0c;在这里先带来初步的选题建议及思路。 目前团队正在写B题和C题完整论文&#xff0c;后续还会持续更新哈&#xff0c;以下只是比较简略的图文版讲解&#xff0c;团队目前正在写B、C题完整论文&#xff0c;…

在线考试组卷Word文档导出|废纸篓|支持搜索组员查看练习情况|官网上线

土著刷题微信小程序v1.16&#xff0c;主要是对系统功能的优化&#xff0c;同时迭代开发了反馈热度比较高的【在线考试组卷word文档导出】和废纸篓功能。 下面将逐条介绍一下这一版的新功能和优化点。 在线考试组卷Word文档导出 【组卷Word导出】这个功能对于线下组织考试是个刚…

LeetCode 904. 水果成篮

题目链接 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 题目解析 在你去摘水果的时候&#xff0c;你当前只能拥有两种种类的水果&#xff0c;若想拿第三种水果&#xff0c;就需要发下前两种水果中的一种。 法一&#xff1a;滑动窗口哈希表(未优化…

怎么把pdf转换成jpg图片?

怎么把pdf转换成jpg图片&#xff1f;在工作中&#xff0c;如果我们收到无法修改编辑的PDF文件&#xff0c;可能会遇到一些困难。尤其是当平台或网站只支持JPG图片格式&#xff0c;而领导又要求我们将pdf文件改为JPG格式时&#xff0c;情况就更为棘手了。这对于我们打工一族来说…

CSS基础

一、选择器 1.1 元素选择器&#xff1a; 指定元素统一格式 p {text_align: center;}1.2 id选择器&#xff1a; 当我们想精准找到某元素的时候要就id选择器 /* id选择器使用 # 来定义 */ #para1{ text-align:center;}1.3 class选择器&#xff1a; 多个元素统一类型 /* cl…

XCon2023 | 聚铭网络受邀出席并发表“安全运营中心的应用及发展”主题演讲

作为国内信息安全领域“历史最悠久、举办规模最大、知名度最高”的闭门型技术峰会&#xff0c;2023年XCon安全焦点信息安全峰会&#xff08;XFocus Information Security Conference&#xff09;在8月30日于北京盛大召开&#xff0c;本次大会以“链无境皆可能”为主题&#xff…

索尼 toio™应用创意开发征文|toio俄罗斯方块游戏

目录 引言 摘要 创意简述 准备工作&#xff5c;手工开始 代码编写&#xff5c;合理集成 使用体验&#xff5c;近乎奇妙 引言 索尼toio™编程机器人是一款引领技术创新的产品&#xff0c;为开发者提供了一个全新的编程和创造平台。toio™的设计旨在将技术、塑性和乐趣融为…

深度解读智能媒体服务的重组和进化

统一“顶设”的智能媒体服务。 邹娟&#xff5c;演讲者 大家好&#xff0c;首先欢迎各位来到LVS的阿里云专场&#xff0c;我是来自阿里云视频云的邹娟。我本次分享的主题为《从规模化到全智能&#xff1a;智能媒体服务的重组与进化》。 本次分享分为以上四部分&#xff0c;一是…

论数据库的种类

摘要 数据库是现代信息管理和数据存储的重要工具&#xff0c;几乎在各个领域都有广泛应用。不同类型的数据库适用于不同的应用场景和需求。本文将介绍几种常见的数据库种类&#xff0c;并探讨它们的特点和适用范围。 正文 一、关系型数据库&#xff08;RDBMS&#xff09; 关…

2023高教社杯数学建模E题思路代码 - 黄河水沙监测数据分析

# 1 赛题 E 题 黄河水沙监测数据分析 黄河是中华民族的母亲河。研究黄河水沙通量的变化规律对沿黄流域的环境治理、气候变 化和人民生活的影响&#xff0c; 以及对优化黄河流域水资源分配、协调人地关系、调水调沙、防洪减灾 等方面都具有重要的理论指导意义。 附件 1 给出了位…

[.NET学习笔记] - Thread.Sleep与Task.Delay在生产中应用的性能测试

场景 有个Service类&#xff0c;自己在内部实现生产者/消费者模式。即多个指令输入该服务后对象后&#xff0c;Service内部有专门的消费线程执行传入的指令。每个指令的执行间隔为1秒。这里有两部分组成&#xff0c; 工作线程的载体。new Thread与Task.Run。执行等待的方法。…

Map,List,Set 等集合以及底层数据结构

文章目录 概述一、Collection接口&#xff08;1&#xff09;List列表 —— 有序、值可重复&#xff08;2&#xff09;Set 集 —— 值不可重复 二、Map接口&#xff08;1&#xff09;HashMap —— 无序1、取模法2、Hash碰撞冲突3、解决Hash冲突 &#xff08;2&#xff09;HashTa…

2023 大学生数学建模竞赛-C题-第一问

题目&#xff1a; 在生鲜商超中&#xff0c;一般蔬菜类商品的保鲜期都比较短&#xff0c;且品相随销售时间的增加而变差&#xff0c; 大部分品种如当日未售出&#xff0c;隔日就无法再售。因此&#xff0c;商超通常会根据各商品的历史销售和需 求情况每天进行补货。 由于商超销…

优先发展非化石能源

生态兴则文明兴。面对气候变化、环境风险挑战、能源资源约束等日益严峻的全球问题&#xff0c;中国树立人类命运共同体理念&#xff0c;促进经济社会发展全面绿色转型&#xff0c;努力推动本国能源清洁低碳发展。 智慧光伏遮阳伞&#xff0c;搭配座椅设置智能补给休息区&#x…