当前位置: 首页 > news >正文

安装富文本组件

安装vue-ueditor-wrap@3.x:


vue-ueditor-wrap@3.x:一个“包装”了 UEditor 的 Vue 组件,支持通过 v-model 来绑定富文本编辑器的内容,让 UEditor 的使用简单到像 Input 框一样。省去了初始化 UEditor、手动调用 getContent,setContent 等繁琐的步骤。

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

下载 UEditorPlus

下载 仓库 的dist文件夹,并放到public下,重命名为UEditorPlus

在main.js注册组件

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

最后使用v-model:

<template><div class="content"><vue-ueditor-wrap v-model="content" editor-id="editor" :config="editorConfig":editorDependencies="['ueditor.config.js', 'ueditor.all.js']" style="height:500px;" /></div>
</template>
<script setup>
import { ref } from 'vue';
let content = ref('<p>Hello UEditorPlus</p>')
let editorConfig = {serverUrl: '后端服务,下面后端的上传接口',// 配置UEditorPlus的惊天资源UEDITOR_HOME_URL: '/UEditorPlus/'
}
</script>

原创作者:吴小糖

创作时间:2023.11.4

相关文章:

安装富文本组件

安装vue-ueditor-wrap3.x&#xff1a; vue-ueditor-wrap3.x&#xff1a;一个“包装”了 UEditor 的 Vue 组件&#xff0c;支持通过 v-model 来绑定富文本编辑器的内容&#xff0c;让 UEditor 的使用简单到像 Input 框一样。省去了初始化 UEditor、手动调用 getContent&#xff…...

Tomcat下载地址(详细)

Apache Tomcat - Apache Tomcat 8 Software Downloadshttps://tomcat.apache.org/download-80.cgi2.找到Archives 3.选择下载的把版本 4.选择具体下载那个版本 5. 6.一般选择tar.gz结尾的压缩包...

领星ERP如何无需API开发轻松连接OA、电商、营销、CRM、用户运营、推广、客服等近千款系统

领星ERP&#xff08;LINGXING&#xff09;是一款专业的一站式亚马逊管理系统&#xff0c;帮助卖家构建完整的数据化运营闭环。&#xff0c;致力于为跨境电商卖家提供精细化运营和业财一体化的解决方案。 官网&#xff1a;https://erp.lingxing.com 集简云无代码集成平台&…...

Django实战项目-学习任务系统-自定义URL拦截器

接着上期代码框架&#xff0c;6个主要功能基本实现&#xff0c;剩下的就是细节点的完善优化了。 首先增加URL拦截器&#xff0c;你不会希望没有登录用户就可以进入用户主页各种功能的&#xff0c;所以增加URL拦截器可以解决这个问题。 Django框架本身也有URL拦截器&#xff0…...

[已解决]该主机与 Cloudera Manager Server 失去联系的时间过长。 该主机未与 Host Monitor 建立联系。

问题 调整hvie 的参数后导致该主机与 Cloudera Manager Server 失去联系的时间过长 思路 主机离家出走了&#xff01; 出现问题后立马参数修改回来&#xff1b; 但是还是发现有这样的报错&#xff1a; 网上百度&#xff0c;各种操作&#xff0c;大概总结为2点&#xff1a…...

通过在Z平面放置零极点的来设计数字滤波器

文章来源地址&#xff1a;https://www.yii666.com/blog/393376.html 通过在Z平面放置零极点的来设计数字滤波器 要求&#xff1a;设计一款高通滤波器&#xff0c;用在音频信号处理过程中&#xff0c;滤掉100Hz以下的信号。 实现方法&#xff1a;通过在Z平面放置零极点的来设…...

linux环境docker部署nginx对生产日志按日切割并压缩处理

linux环境docker部署nginx对生产日志按日切割并压缩处理 1、脚本文件 # 创建脚本文件 mkdir log_slice_task.sh # 编辑脚本文件 vim log_slice_task.sh#! /bin/bash # 定时切割日志脚本 LOG_ACCESS_FILE"/日志文件路径/access.log" LOG_FAIL_FILE"/日志文件路…...

【Spring Boot】发送邮件功能

发送邮件功能 一.pom.xml文件添加邮件依赖二.发送邮件信息&#xff08;1&#xff09;固定配置在application.yml&#xff08;2&#xff09;发送邮箱配成活&#xff08;3&#xff09;底层发送邮件方法&#xff08;4&#xff09;QQ邮箱开通smtp服务&#xff08;5&#xff09;网易…...

ELK问题整理

ELK问题整理 1、logstash启动报错 $ journalctl -xe | grep logstash Sep 13 16:37:23 am02 logstash[298460]: could not find java; set JAVA_HOME or ensure java is in PATH Sep 13 16:37:23 am02 systemd[1]: logstash.service: main process exited, codeexited, sta…...

《黑客帝国:破解编程密码》——探索编程世界的奥秘

文章目录 前言黑客帝国代码雨UbuntuLinux世界的奥秘如何在Ubuntu中查看系统信息科普推荐书籍后记 前言 在电影《黑客帝国》问世后&#xff0c;它不仅带来了震撼视觉体验&#xff0c;更在技术和编程领域产生了深远的影响。这部电影&#xff0c;让人们对计算机和编程的认识进一步…...

【优选算法系列】【专题六模拟】第一节.1576. 替换所有的问号和495. 提莫攻击

文章目录 前言一、替换所有的问号 1.1 题目描述 1.2 题目解析 1.2.1 算法原理 1.2.2 代码编写二、提莫攻击 2.1 题目描述 2.2 题目解析 2.2.1 算法原理 2.2.2 代码编写总结 前言 一、替换所有的问号 1.1…...

路由器基础(十二):IPSEC VPN配置

一、IPSec VPN基本知识 完整的IPSec协议由加密、摘要、对称密钥交换、安全协议四个部分组成。 两台路由器要建立IPSecVPN连接&#xff0c;就需要保证各自采用加密、摘要、对称密钥 交换、安全协议的参数一致。但是IPSec协议并没有确保这些参数一致的手段。 同时&#xff0c;IP…...

Python 获取cpu、内存利用率

获取cpu、内存利用率 # -*- coding: latin1 -*- import psutil cpuPercent 0 psutil.cpu_percent() while True:vm psutil.virtual_memory()memoryPercent vm.percentcpuPercent psutil.cpu_percent(1) *10print("cpuPercent:"str(cpuPercent)" %")prin…...

Apache ECharts简介和相关操作

文章目录 一、Apache ECharts介绍二、快速入门1.下载echarts.js文件2.新建index.html文件3.准备一个DOM容器用于显示图表4.完整代码展示5.相关配置 三、演示效果四、总结 一、Apache ECharts介绍 Apache ECharts 是一款基于 Javascript 的数据可视化图表库&#xff0c;提供直观…...

怎么看待工信部牵头推动人形机器人发展

1&#xff0c;工信部牵头&#xff0c;而不是科技部牵头&#xff0c;有些蹊跷&#xff0c;科技部应该比工信部更了解科技发展趋势&#xff0c;工信部比科技部更了解工业发展趋势&#xff0c;这是用工业倒逼科技进步。 2&#xff0c;人的优势不是身体&#xff0c;而是精神&#…...

Hikari源码分析

总结 连接池关系 1、HikariDataSource构建函数->生成HikariPool对象->调用HikariPool的getConection得到连接 2、HikariPool包含ConcurrentBag 3、ConcurrentBag保存连接&#xff1a;三个集合threadList、sharedList、handoffQueue 4、ConcurrentBag管理连接&#xff1…...

修改YOLOv5的模型结构

YOLOv5 模型结构 C3模块结构图 修改目标 修改目标是移除C3模块concat后的卷积操作 YOLOv5的模型存储在项目目录下的models目录中。 一些以yaml为后缀的文件保存了一些模型的超参数&#xff0c;通过不同的参数&#xff0c;形成了yolov5s,yolov5n,yolov5l等不同参数等级&#…...

React 与 React Native 区别

React 与 React Native 区别 同样的实现一个点击按钮&#xff0c;更换姓名和年龄的值的功能。两部分代码不同 React代码 import React, { useState } from react import ./Button.cssexport function UseStateWithoutFunc() {const [name, setName] useState(何遇)const [a…...

Android 12.0 系统system模块开启禁用adb push和adb pull传输文件功能

1.使用场景 在进行12.0的系统定制化开发中,在一些产品中由于一些开发的功能比较重要,防止技术点外泄在出货产品中,禁用 adb pull 和adb push等命令 来获取系统system下的jar 和apk 等文件,所以需要禁用这些命令,接下来实现这些功能 2.系统system模块开启禁用adb push和ad…...

基于单片机的衣物消毒清洗机系统设计

收藏和点赞&#xff0c;您的关注是我创作的动力 文章目录 概要 一、系统总体设计2.2 功能分析2.3 系统框架设计 二、硬件电路设计3.1 电源模块的设计 三、 软件设计4.1 系统整体流程4.4 软件整体流程实物图 四、 结论五、 文章目录 概要 基于单片机的衣物消毒清洗机可以应用在…...

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

css的定位(position)详解:相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

NFT模式:数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

NLP学习路线图(二十三):长短期记忆网络(LSTM)

在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角&#xff0c;以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向&#xff0c;距离坐标原点x个像素;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐标原点y个像素。 坐标体系-像素 …...

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

Spring是如何解决Bean的循环依赖:三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中,Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌,形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路,例如: 双向依赖:Bean A 依赖 Bean B,同时 Bean B 也依赖 Bean A(A↔B)。链条循环: Bean A → Bean…...

协议转换利器,profinet转ethercat网关的两大派系,各有千秋

随着工业以太网的发展&#xff0c;其高效、便捷、协议开放、易于冗余等诸多优点&#xff0c;被越来越多的工业现场所采用。西门子SIMATIC S7-1200/1500系列PLC集成有Profinet接口&#xff0c;具有实时性、开放性&#xff0c;使用TCP/IP和IT标准&#xff0c;符合基于工业以太网的…...

文件上传漏洞防御全攻略

要全面防范文件上传漏洞&#xff0c;需构建多层防御体系&#xff0c;结合技术验证、存储隔离与权限控制&#xff1a; &#x1f512; 一、基础防护层 前端校验&#xff08;仅辅助&#xff09; 通过JavaScript限制文件后缀名&#xff08;白名单&#xff09;和大小&#xff0c;提…...