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

vue中使用富文本编辑器

vue中使用富文本编辑器(wangEditor)

wangEditor官网地址:https://www.wangeditor.com/

使用示例

<template><div class="app-container"><div class="box"><div class="editor-tool"><Toolbarstyle="border-bottom: 1px solid #ccc":editor="editorRef":defaultConfig="toolbarConfig"mode="default"/><Editorstyle="height: 300px; overflow-y: hidden;"v-model="valueHtml":defaultConfig="editorConfig"mode="default"@onCreated="handleCreated"/></div><div class="btn"><el-button type="primary" @click="isOpen = true">编辑器内容</el-button></div><Demo v-model:myValue="isOpen"  v-model:content="valueHtml"/></div></div>
</template><script lang="ts" setup>
import { onBeforeUnmount, ref, shallowRef} from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { uploadImage } from "@/api/cabinet/index.js";
import { getToken } from '@/utils/auth'
import Demo from '@/components/Demo.vue'
import '@wangeditor/editor/dist/css/style.css' // 引入 css
const editorRef = shallowRef()
const valueHtml = ref(null) //富文本里面内容,传给后端
const toolbarConfig = {} //工具栏配置
const editorConfig = { //内容区域配置placeholder: '请输入内容',MENU_CONF: {}
}
const isOpen = ref(false) //弹窗是否打开
const url = 'http://192.168.31.74:9080/opc-cloud-dev'
const handleCreated = (editor) => {editorRef.value = editor // 记录 editor 实例,重要!
}
type InsertFnType = (url: string, alt: string, href: string) => void
editorConfig.MENU_CONF["uploadImage"] = { //文件上传// server: "/dev-api/file/picUp/upFile",// headers: {//   Authorization: `Bearer ${getToken()}`,// },async customUpload(file: File, insertFn: InsertFnType) {  // TS 语法-自定义文件上传,用来自己写逻辑调后端接口// file 即选中的文件// 自己实现上传,并得到图片 url alt href// 最后插入图片const formData = new FormData()formData.append('file', file)uploadImage(formData).then((response) => {insertFn(url+response.data.url, 'xxxx', url+response.data.url)});}
};
</script><style lang="scss" scoped>
.app-container{height: calc(100vh - 50px);background: #EFF3F3;padding: 24px;.box {width: 100%;height: 100%;background-color: #fff;padding: 20px;.editor-tool{z-index: 999;width: 100%;height: auto;border: 1px solid #ccc;margin-bottom: 30px;}.btn {width: 100%;display: flex;justify-content: center;}}
}
</style>
<template><el-dialogv-model="isShow"title="Tips"width="1300px"><span>{{ isShow }}</span><div class="view" v-html="dialogContent"></div><el-button @click="handleQuery">确定</el-button>
</el-dialog>
</template><script lang="ts" setup>
import { ref, defineProps, computed, defineEmits, inject } from 'vue'
interface Props {myValue: booleancontent: any
}
const props = withDefaults(defineProps<Props>(), {myValue: true,content: null
})
const emits = defineEmits(['update:myValue'])
const isShow = computed({get: () => props.myValue,set: (value: any) => {emits('update:myValue', value)}
})
const dialogContent = computed({get: () => props.content,set: (value: any) => {}
})  
const handleQuery = async () => {console.log('编辑器内容', dialogContent.value);}
</script><style lang="scss" scoped></style>

相关文章:

vue中使用富文本编辑器

vue中使用富文本编辑器&#xff08;wangEditor&#xff09; wangEditor官网地址&#xff1a;https://www.wangeditor.com/ 使用示例 <template><div class"app-container"><div class"box"><div class"editor-tool">&l…...

13.(开发工具篇github)如何在GitHub上上传本地项目

一:创建GitHub账户并安装Git 二:创建一个新的仓库(repository) 三、拉取代码 git clone https://github.com/ainier-max/myboot.git git clone git@github.com:ainier-max/myboot.git四、拷贝代码到拉取后的工程 五、上传代码 (1)添加所有文件到暂存...

vue3中状态适配

写一个函数&#xff0c;在函数中定义一个对象 用于存放键值对&#xff0c;最后返回指定状态所对应的的值&#xff0c;即对象[指定状态] 的 对象的值。 在模板中把状态传入 // vue3 setup语法糖中 const formatXXXState (xxxState)>{const stateMap {键1: 值1,键2: 值2,.…...

uniapp h5 端 router.base设置history后仍有#号

manifest.json文件设置&#xff1a; "h5": { "router": { "base": "./", "mode": "history" }, }按相对路径发行时路由模式强制为hash模式&#xff0c;不支持history模式&#xff08;两者相悖&#xff09;…...

上网行为监管软件(上网行为管理软件通常具有哪些功能)

在我们的日常生活中&#xff0c;互联网已经成为了我们获取信息、交流思想、进行工作和娱乐的重要平台。然而&#xff0c;随着互联网的普及和使用&#xff0c;网络安全问题也日益突出&#xff0c;尤其是个人隐私保护和网络行为的规范。在这个背景下&#xff0c;上网行为审计软件…...

C#中的for和foreach的探究与学习

一:语句及表示方法 for语句: for(初始表达式;条件表达式;增量表达式) {循环体 }foreach语句: foreach(数据类型 变量 in 数组或集合) {循环体 }理解 1.从程序逻辑上理解,foreach是通过指针偏移实现的(最初在-1位置,每循环一次,指针就便宜一个单位),而for循环是通...

【ES6知识】Promise 对象

文章目录 1.1 概述1.2 静态方法1.3 实例方法1.4 Promise 拒绝事件 1.1 概述 Promise 对象用于表示一个异步操作的最终完成&#xff08;或失败&#xff09;及其结果值。是异步编程的一种解决方案&#xff08;可以解决回调地狱问题&#xff09;。 一个 Promise 对象代表一个在这…...

【Git】配置SSH密钥实现Git操作免密

背景 在使用Git推送代码的时候&#xff0c;会默认需要输入密码。如果经常推送代码&#xff0c;那就需要经常输入密码&#xff0c;比较繁琐。所以Git也提供了免密登录的功能。 Git本身支持两种协议对远程Git仓库进行访问&#xff1a;HTTPS、SSH。两种方式有一定的区别&#xf…...

AI能给百融云带来什么?

一大堆有关ChatGPT的利好消息出现之后&#xff0c;市场的反应难得的跟投资者预期站在了一起&#xff0c;AIGC也终于有了跑赢CPO的苗头。二级市场的逻辑不用重复&#xff0c;毕竟AI已经炒了大半年&#xff0c;但有没有发现一个问题&#xff1f;就是在不知不觉中&#xff0c;AI应…...

AI创作系统ChatGPT商业运营版源码+AI绘画/支持GPT联网提问/支持Midjourney绘画+Prompt应用+支持国内AI提问模型

一、AI创作系统 SparkAi创作系统是基于国外很火的ChatGPT进行开发的Ai智能问答系统。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI创作ChatGPT&#xff1f;小编这里写一个详细图文教程吧&am…...

vue.draggable拖拽,项目中三个表格互相拖拽的实例操作,前端分页等更多小技巧~

vue.draggable中文文档 - itxst.com官网在这里&#xff0c;感兴趣的小伙伴可以看看。 NPM或yarn安装方式 yarn add vuedraggable npm i -S vuedraggable UMD浏览器直接引用JS方式 <script src"https://www.itxst.com/package/vue/vue.min.js"></script&…...

400G DR4 QSFP-DD光模块:数据中心应用全攻略

在当今数字化时代&#xff0c;对于企业和供应商来说&#xff0c;高速数据传输至关重要。随着对更快数据传输的需求不断攀升&#xff0c;400G DR4 QSFP-DD光模块已经成为高速网络的最新解决方案。本文将全面介绍400G DR4 QSFP-DD光模块在数据中心应用中的优势和技术规范。 什么…...

自动驾驶:路径规划概述

自动驾驶&#xff1a;路径规划概述 全局路径规划Dijkstra算法A*算法RRT&#xff08;随机快速探索树&#xff09;算法PRM&#xff08;概率路线图&#xff09;算法 局部路径规划DWA&#xff08;动态窗口法&#xff09;算法TEB&#xff08;时间弹性带&#xff09;算法Lattice Plan…...

vlc将本地文件推流成ts实时流

推流 打开vlc &#xff0c;打开 媒体----打开网络串流 选择文件选项卡&#xff0c;打开本地文件 点击添加&#xff0c;选择本地的mp3文件 选择串流 点击下拉框&#xff0c;选择udp&#xff0c;点击右边的【添加】按钮 输入媒体流输出地址&#xff0c;点击【下一个】 选择正确的…...

C# 自定义控件库之Lable组合控件

1、创建类库 2、在类库中添加用户控件&#xff08;Window窗体&#xff09; 3、控件视图 4、后台代码 namespace UILib {public partial class DeviceInfoV : UserControl{public DeviceInfoV(){InitializeComponent();ParameterInitialize();}#region 初始化private void Par…...

解密防关联指纹浏览器:联盟营销领域的秘密武器

联盟营销在今天的数字化时代越来越受欢迎。然而&#xff0c;联盟营销也面临着一些挑战&#xff0c;其中之一就是账号关联问题。本文将介绍如何利用防关联指纹浏览器来提升联盟营销的效果和安全性。 一、什么是防关联指纹浏览器&#xff1f; 防关联指纹浏览器是一种工具&#…...

asp.net core mvc Razor +dapper 增删改查,分页(保姆教程)

说明&#xff1a;本demo使用sqlserver数据库&#xff0c;dapper orm框架 完成一张学生信息表的增删改查&#xff0c;前端部分使用的是Razor视图&#xff0c; Linq分页 HtmlHelper。&#xff08;代码随便写的&#xff0c;具体可以自己优化&#xff09; //实现效果如下&#xff0…...

网络安全——自学(黑客)方法

如果你想自学网络安全&#xff0c;首先你必须了解什么是网络安全&#xff01;&#xff0c;什么是黑客&#xff01;&#xff01; 1.无论网络、Web、移动、桌面、云等哪个领域&#xff0c;都有攻与防两面性&#xff0c;例如 Web 安全技术&#xff0c;既有 Web 渗透2.也有 Web 防…...

秋招算法岗,面试复盘

面试锦囊之面经分享系列&#xff0c;持续更新中 欢迎后台回复『面试』加入讨论组交流噢 楼主秋招主要投算法岗&#xff08;偏NLP方向&#xff09;和数据岗方向&#xff0c;下面分享我的一些面试经历。 一、科大讯飞&#xff08;NLP&#xff09; 简要介绍自己Python里面哈希表…...

AI类APP能做什么

AI类APP可以实现多种功能&#xff0c;涵盖了各种领域和用途。以下是一些常见的AI类APP示例以及它们主要实现的功能&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1.语音助手&#xff08;Voice Assis…...

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

C++:std::is_convertible

C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

三维GIS开发cesium智慧地铁教程(5)Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

LeetCode - 394. 字符串解码

题目 394. 字符串解码 - 力扣&#xff08;LeetCode&#xff09; 思路 使用两个栈&#xff1a;一个存储重复次数&#xff0c;一个存储字符串 遍历输入字符串&#xff1a; 数字处理&#xff1a;遇到数字时&#xff0c;累积计算重复次数左括号处理&#xff1a;保存当前状态&a…...

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...

C#学习第29天:表达式树(Expression Trees)

目录 什么是表达式树&#xff1f; 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持&#xff1a; 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...

Vite中定义@软链接

在webpack中可以直接通过符号表示src路径&#xff0c;但是vite中默认不可以。 如何实现&#xff1a; vite中提供了resolve.alias&#xff1a;通过别名在指向一个具体的路径 在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...