富文本编辑器的实现与回显

文本编辑器实现-wangeditor

写之前记得安装wangeditor插件,到时候报错别赖我

import “@wangeditor/editor/dist/css/style.css”;
import { Editor, Toolbar } from “@wangeditor/editor-for-vue”;

defineOptions({name: "BaseEditor"
});const mode = "default";
// 编辑器实例,必须用 shallowRef
const editorRef = shallowRef();// 内容 HTML
const valueHtml = ref("<p>你好</p>");// 模拟 ajax 异步获取内容
onMounted(() => {});const editorConfig = { placeholder: "请输入内容..." };const handleCreated = editor => {// 记录 editor 实例,重要!editorRef.value = editor;
};// 组件销毁时,也及时销毁编辑器
onBeforeUnmount(() => {const editor = editorRef.value;if (editor == null) return;editor.destroy();
});
    <div class="wangeditor"><Toolbar :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" style="border-bottom: 1px solid #ccc" /><Editor v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode" style="height: 300px; overflow-y: hidden"@onCreated="handleCreated" /></div>

回显

<p v-html="valueHtml"></p>
v-html绑定编辑器的数据

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

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

相关文章

关于在x64系统下使用MSSQL导入导出工具读取Excel报错的一个坑

从Excel导入数据到MSSQL是个高频需求。很多人&#xff0c;包括我&#xff0c;习惯打开ssms&#xff0c;从数据库点右键&#xff0c;任务&#xff0c;导入数据唤起导入操作&#xff0c;然后发现报错“未在本地计算机上注册 Microsoft.ACE.OLEDB.16.0提供程序”。 这个坑倒是很好…

高防CDN安全防护系统在业务方面的应用

在当今数字化的时代&#xff0c;网络安全问题日益严峻&#xff0c;保护网站和数据免受攻击变得至关重要。CDN安全防护系统作为一种有效的解决方案&#xff0c;受到了广泛关注。小德将向您介绍CDN安全防护系统的原理、应用场景以及使用方法&#xff0c;助您更好地保障网络安全。…

去除表格中的网格线

去除表格中的网格线 在excel中如何得到下图2的效果 点开视图&#xff0c;去除网格线 最后输出为图片

「L2C」型行业从线索到成交,听懂客户之「声」是关键

存量经营时代下&#xff0c;营销变得越来越难。无论是稳流量&#xff0c;或是促活跃&#xff0c;转化率就是难以提升。 相比传统快消行业&#xff0c;线索型&#xff08;L2C&#xff0c;Leads to Cash&#xff09;行业因为客单价高、决策周期长、用户触点分散等特性&#xff0…

CRM系统中的联系人是什么?如何进行联系人管理?

上手CRM系统前掌握专业术语是必要的功课&#xff0c;在第一次使用CRM系统时小编和大家一样&#xff0c;分不清楚线索、联系人、客户、商机之间的关系&#xff0c;今天我们就来着重分享一下CRM中联系人是什么&#xff1f;如何进行联系人管理&#xff1f; CRM系统联系人是指能够…

2023年国自然植物科学相关面上项目信息公布(小麦、大麦、棉花、大豆、玉米)

2024年申报国自然项目基金撰写及技巧http://mp.weixin.qq.com/s?__bizMzA4NTAwMTY1NA&mid2247575761&idx1&sn32dbacd3393f3b76a1e0668e4b8b3c89&chksm9fdd7c08a8aaf51ec31d4790067bb57751a09947eeb7e728b8c008d26b89adba37e0cab32a62&scene21#wechat_redi…

梨花声音课堂,真诚和情感展现家庭生活场景,易使观众产生共鸣

在为家庭剧的配音工作时&#xff0c;配音员要能够传递出剧中角色在日常生活中所经历的情感波动&#xff0c;以及家庭关系中的温情、矛盾和解决问题的过程。家庭剧着重描绘亲情纽带和人物间的真挚交往&#xff0c;因此配音的真实感和情感表达尤为重要。以下是针对家庭剧配音的几…

毕业设计2049网上选课系统JSP【程序源码+文档+调试运行】

摘要 本文详细介绍了一个网上选课系统的设计与实现过程。该系统主要分为学生用户、管理员和教师用户三个模块&#xff0c;涵盖了用户登录、在线选课、信息管理、密码修改等功能。通过对系统功能的分析&#xff0c;进行了数据库设计和界面设计&#xff0c;并进行了测试和优化。…

Java线程的学习

本来我以为这可能只是Java里的一小块知识点&#xff0c;但当我搜索自己关注的Up主的网课时&#xff0c;觉得还是开一个系列来记录好了。我的记录绝不仅仅是照搬课程中的内容&#xff0c;我会带上自己的理解以及示例代码、并且是按照本人的专业课老师上课的节奏来记录&#xff0…

Redisson 分布式锁实战应用解析

文章目录 前言一、Redisson介绍二、Redisson的使用1.1 引入依赖1.2 编写配置1.3 示例测试_011.4 示例测试_02 三、Redisson源码分析2.1 加锁源码2.2 看门狗机制 前言 分布式锁主要是解决分布式系统下数据一致性的问题。在单机的环境下&#xff0c;应用是在同一进程下的&#x…

多线程面试总结

1. 创建线程有哪几种方式 创建线程有三种方式&#xff0c;分别是继承Thread类、实现Runnable接口、实现Callable接口。 通过继承Thread类来创建并启动线程的步骤如下&#xff1a; 定义Thread类的子类&#xff0c;并重写该类的run()方法&#xff0c;该run()方法将作为线程执行…

【报错记录】解决使用Kotlin写的SpringBoot项目使用Aspect切面无法生效的问题

前言 为了能在SpringBoot使用Kotlin&#xff0c;真的是各种坑都彩礼一遍&#xff0c;这次遇到的问题是Aspect无法对Kotlin代码生效。我这里的使用场景是使用切面切Controller中的方法&#xff0c;用来对接口进行一些初始化和收尾工作。 Aspect在Controller类还是Java代码的时…

迁新址 启新程|美创科技杭州总部乔迁仪式圆满举行

“迁新址 启新程” 2023年11月21日 美创科技杭州总部乔迁仪式隆重举行 杭州未来科技城管委会、余杭国投集团、浙江省网络空间安全协会、浙江鸿程、华睿投资、金艮投资、如山资本、赛伯乐投资、宽带资本、普华投资、国中创投、密码资本、东方富海、之江商学、阿里云、联通&…

cc linux用root用户执行chmod 777 -R ./提示 Operation not permitted怎么办?

如果你作为 root 用户执行 chmod 777 -R ./ 命令时收到 “Operation not permitted” 错误&#xff0c;可能有几个原因&#xff1a; 不可更改 (Immutable) 文件属性&#xff1a; 文件可能被设置为不可更改。即使是 root 用户也不能修改这些文件的权限。使用 lsattr 命令查看文件…

Oracle与Redis Enterprise协同,作为企业缓存解决方案

来源&#xff1a;虹科云科技 虹科干货丨Oracle与Redis Enterprise协同&#xff0c;作为企业缓存解决方案 欢迎关注虹科&#xff0c;为您提供最新资讯&#xff01; 单独使用Oracle作为企业缓存数据库时&#xff0c;会出现哪些问题呢&#xff1f;使用Redis Enterprise与Oracle共…

js数组其他的方法

目录 1、map&#xff08;&#xff09; 2、find&#xff08;&#xff09; 3、findIndex() 4、 some&#xff08;&#xff09; 5、every&#xff08;&#xff09; 6、reverse() 7、reduce&#xff08;&#xff09; 8、 forEach() 9、filter( ) 10、reduceRight() 1、m…

在 go 的项目中使用验证器

1&#xff1a;使用validate 包验证&#xff1a; 安装包&#xff1a; go get github.com/go-playground/validator/v10 package controllerimport ("fmt""github.com/gin-gonic/gin""github.com/go-playground/validator/v10""net/http&quo…

java中基本数据类型的最大值最小值理解

文章目录 概要主要内容 概要 今天在复习java的Java基础常见面试题时对java中基本数据类型的上下限有了一些思考&#xff0c;接下来我会结合自身的理解进行讲述 主要内容 Java 中有 8 种基本数据类型&#xff0c;分别为&#xff1a;6 种数字类型&#xff1a; 4 种整数型&…

掌握Java核心技术的经典例题解析!

问题&#xff1a;请解释一下基于UDP协议的网络编程是什么&#xff1f; 答案&#xff1a;基于UDP协议的网络编程是一种在网络中使用UDP协议进行数据通信的编程方法。UDP&#xff08;User Datagram Protocol&#xff09;是一种简单的传输层协议&#xff0c;与TCP协议相比&#x…

unity android 打包问题解决

gradle编译问题 打开 gradle所在路径&#xff0c;如&#xff1a;C:\Program Files\Unity 2020.3.30f1c1\Editor\Data\PlaybackEngines\AndroidPlayer\Tools\GradleTemplates&#xff0c; 编辑baseProjectTemplate.gradle&#xff0c;替换成阿里云的源 // GENERATED BY UNITY.…