Vue3富文本组件UEditor ,vue-ueditor-wrap@3.x

一、Vue 中UEditor

2.0版本跟3.0版本不兼容

重点安装版本不同

使用详细介绍:

vue-ueditor-wrap - Vue + UEditor + v-model双向绑定

二、安装流程

1.安装

# vue-ueditor-wrap v3 仅支持 Vue 3
npm i vue-ueditor-wrap@3.x -S
# or
yarn add vue-ueditor-wrap@3.x

2.全局引入 ,注册组件

// main.js
import { createApp } from 'vue';
import VueUeditorWrap from 'vue-ueditor-wrap';
import App from './App.vue';createApp(App).use(VueUeditorWrap).mount('#app');

3.使用 v-model 绑定属性

<vue-ueditor-wrap v-model="msg" :config="editorConfig" editor-id="editor-demo-01"></vue-ueditor-wrap>

import { ref } from 'vue';export default {setup() {const msg = ref('<h2>Hello World!</h2>');return {msg,};},created() {// 更多 UEditor 配置,参考 http://fex.baidu.com/ueditor/#start-configthis.editorConfig = {UEDITOR_HOME_URL: '/UEditor/', // 访问 UEditor 静态资源的根路径,可参考常见问题1serverUrl: '//ueditor.zhenghaochuan.com/cos', // 服务端接口(这个地址是我为了方便各位体验文件上传功能搭建的临时接口,请勿在生产环境使用!!!)};},
};

更多:

基于Vue的移动端UI框架整理

Vue2报错opensslErrorStack: [ ‘error:03000086:digital envelope routines::initialization error‘ ]

Vue组件(二)父组件、子组件通信/传值

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

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

相关文章

[C#]winform制作仪表盘好用的表盘控件和使用方法

【仪表盘一般创建流程】 在C#中制作仪表盘文案&#xff08;通常指仪表盘上的文本、数字或指标显示&#xff09;涉及到使用图形用户界面&#xff08;GUI&#xff09;组件&#xff0c;比如Windows Forms、WPF (Windows Presentation Foundation) 或 ASP.NET 等。以下是一个使用W…

测试:JMeter如何获取非json格式的响应参数

JMeter如何获取非json格式的响应参数 在 JMeter 中获取非 JSON 格式的响应参数通常涉及使用后置处理器来提取这些参数。以下是一些常见的方法来获取不同类型的响应数据&#xff1a; 正则表达式提取器&#xff1a; 适用于提取文本、HTML、XML 等格式中的特定文本。使用正则表达…

docker compose部署mall

安装环境软件 1.拉取镜像 docker pull mysql:5.7 docker pull redis:7 docker pull nginx:1.22 docker pull rabbitmq:3.9-management docker pull elasticsearch:7.17.3 docker pull kibana:7.17.3 docker pull logstash:7.17.3 docker pull mongo:4 docker pull minio/mini…

Linux开发:PAM2 配置文件

PAM配置文件是用于粘合应用程序和PAM服务模块,通过其中的配置,可以动态的选择PAM服务模块,从而增加认证的可配置性和灵活性。 PAM配置文件通常保存在/etc/pam.d/目录下,当应用程序进行认证时,会选择对应的PAM配置文件,而PAM配置文件又对PAM服务具体使用哪些模块(动态链…

APEX开发过程中需要注意的小细节2

开发时遇到首次获取租户号失败的问题 以为是触发顺序问题&#xff0c;所以设置两个动态操作&#xff0c;一个事件是“更改”&#xff0c;另一个是“单击”&#xff0c; 但还是没有解决&#xff0c; 后来终于找到解决方法:在校验前执行取值 果然成功执行&#xff01; 动态查询年…

【推荐算法】userid是否需要建模

看到一个din的源码&#xff0c;将userid也构建了emb table。 于是调研了一下。即推荐算法需要建模userid吗&#xff1f; 深度学习推荐算法中user-id和item-id是否需要放入模型中作为特征进行训练呢&#xff1f; 深度学习推荐算法中user-id和item-id是否需要放入模型中作为特…

Linux查询指令

查看物理CPU型号&#xff1a; cat /proc/cpuinfo | grep name | cut -f2 -d: | uniq -c 查看物理CPU个数 cat /proc/cpuinfo| grep “physical id”| sort| uniq| wc -l 查看每个物理CPU中core的个数(即核数) cat /proc/cpuinfo| grep “cpu cores”| uniq 查看逻辑CPU的…

Zookeeper集群搭建(3台)

准备工作 1、提前安装好hadoop102、hadoop103、hadoop104三台机器&#xff0c;参照&#xff1a;CentOS7集群环境搭建&#xff08;3台&#xff09;-CSDN博客 2、提前下载好Zookeeper安装包并上传到/opt/software上、安装包&#xff0c;链接&#xff1a;https://pan.baidu.com/…

图书系统的Web实现(含源码)

源码地址https://gitee.com/an-indestructible-blade/project 注意事项&#xff1a; BorrowBooksWeb\src\main\resources路径下的application.yml文件里面的url&#xff0c;username&#xff0c;password这三个属性和自己的数据库保持一致。 浏览器访问url:http://127.0.0.1:…

软考 系统分析师系列知识点之信息系统战略规划方法(4)

接前一篇文章&#xff1a;软考 系统分析师系列知识点之信息系统战略规划方法&#xff08;3&#xff09; 所属章节&#xff1a; 第7章. 企业信息化战略与实施 第4节. 信息系统战略规划方法 7.4.2 关键成功因素法 关键成功因素&#xff08;Critical Success Factors&#xff0c…

virtio笔记

最近在看虚拟化相关的东西&#xff0c;以virtio-console为例&#xff0c;记录下。 此文只是学习笔记&#xff0c;文中肯定有不少错误&#xff0c;不要参考 devicemd侧&#xff1a; virtio_console.c中&#xff0c;初始化会对port->cb赋值为 viritio_console_control_tx&am…

Unity3D学习之UI系统——UGUI

文章目录 1. 前言2 六大基础组件概述3 Canvas——渲染模式的控制3.1 Canvas作用3.2 Canvas的渲染模式3.2.1 Screen Space -Overlay 覆盖模式3.2.2 Screen Space - Camera 摄像机模式3.2.3 World Space 4 CanvasScaler ——画布缩放控制器4.1 Constant Pixel Size 恒定像素模式4…

考研数据结构笔记(5)

单链表的查找 按位查找(O(n))按值查找(O(n))单链表长度(O(n))小结 基于带头结点的代码 按位查找(O(n)) 按值查找(O(n)) 单链表长度(O(n)) 小结

五官行为检测(表情基)解决方案提供商

随着人工智能技术的日益成熟&#xff0c;情感识别与行为分析在企业界的应用逐渐广泛。美摄科技作为业内领先的五官行为检测&#xff08;表情基&#xff09;解决方案提供商&#xff0c;致力于为企业提供高效、精准的情感识别与行为分析服务。 美摄科技的五官行为检测&#xff0…

【lesson47】进程通信之system V(共享内存)补充知识

文章目录 补充知识 补充知识 进行通信的key值问题&#xff0c;进程要通信的对方进程怎么能保证对方能看到&#xff0c;并且看到的就是该进程创建的共享内存的。 所以就通过key值来标识共享内存&#xff0c;key值是几不重要&#xff0c;只要在系统里是唯一的即可。 这样server和…

【C语言】变量与常量

一、变量的定义与名称 变量定义的一般形式&#xff1a;<数据类型名称><变量名称>; int price0&#xff1b; •这一行&#xff0c;定义了一个变量。变量的名字是price&#xff0c;类型是int&#xff0c;初始值是0。 •变量是一个保存数据的地方&#xff0c;当我们需…

CentOS7集群配置免密登录

准备工作 提前开启三台虚拟机hadoop102、hadoop103,hadoop104,关于三台虚拟机的安装可以参考&#xff1a;https://mp.csdn.net/mp_blog/creation/editor/136010108 配置免密登录 一、分别修改三台机器的hosts,配置主机映射关系 vim /etc/hosts 文件中输入以下内容&#xf…

利用Pybind11封装Python版的WiringPi!

原版的WiringPi是一个用于树莓派的GPIO库&#xff0c;用C语言开发&#xff0c;仓库地址&#xff1a;https://github.com/WiringPi/WiringPi。该库允许用户以编程方式访问和控制树莓派的GPIO引脚。而随着Python在嵌入式设备上的快速发展&#xff0c;其对底层引脚的操作也变得越来…

【人工智能】聊聊Transformer,深度学习的一股清流(13)

嘿&#xff0c;大家好&#xff01;今天我们来聊一聊深度学习领域的一位“大明星”——Transformer模型。这个模型的提出可不得了&#xff0c;让自然语言处理领域焕发了新生。 在深度学习领域&#xff0c;Transformer模型架构的引入标志着一场革命&#xff0c;它改变了自然语言处…

linux系统定时任务管理

crontab使用 一、crontab简介 crontab 这个指令所设置的工作将会循环的一直进行下去&#xff01;可循环的时间为分钟、小时、每周、每月或每年等。crontab 除了可以使用指令执行外&#xff0c;亦可编辑 /etc/crontab 来支持。 至于让 crontab 可以生效的服务则是 crond 这个服…