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

vue3.3-TinyMCE:TinyMCE富文本编辑器基础使用

一、TinyMCE官网

GitHub - tinymce/tinymce

TinyMCE中文文档中文手册

二、官网介绍

TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有:UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。

TinyMCE的优势:

开源可商用,基于LGPL2.1

插件丰富,自带插件基本涵盖日常所需功能(示例看下面的Demo-2)

接口丰富,可扩展性强,有能力可以无限拓展功能

界面好看,符合现代审美

提供经典、内联、沉浸无干扰三种模式(详见“介绍与入门”)

对标准支持优秀(自v5开始)

多语言支持,官网可下载几十种语言。

三、TinyMCE有三种模式

经典模式:基于表单,使用表单某字段填充内容,编辑器始终作为表单的一部分。

内联模式(inline):将编辑视图与阅读视图合二为一,当其被点击后,元素才会被编辑器替换,而不是编辑器始终可见。

沉浸无干扰模式(distraction-free):所谓‘沉浸模式’感觉就是TinyMCE强行将inline模式解释成了另一种风格。我们也不要揭穿它,假装不知道就好了。

重要的是,当使用内联模式时,TinyMCE没有使用iframe将编辑的内容与页面隔离,这样做的好处是内容可继承页面的CSS样式。编辑的内容将完全按照页面规定好的样式显示,从而提供真正的“所见即所得”的编辑体验。

四、vue3.3.4 + ts 集成 TinyMCE

要在Vue 3.3.4 + TypeScript项目中集成TinyMCE,可以按照以下步骤进行操作:

4.1、安装TinyMCE

使用npm或yarn安装最新版本的TinyMCE:

pnpm add tinymce @tinymce/tinymce-vue

4.2、业务页面使用

<template><div class="container"><div class="container-tinymce"><Editor ref="tinymceEle" id="tinymceEle" :init="{plugins: 'link image code table'}" v-model="content"></Editor></div></div>
</template><script setup lang="ts">
import Editor from '@tinymce/tinymce-vue'
let content:any = ref('')
</script><style scoped lang="less">
</style>

4.3、浏览器测试

看了好多资料,有的写的很复杂,实践下来,就是这么简单,更多tinymce插件集成待补充~

五、更多插件集成

待补充

参考链接

tinymce图片上传-腾讯云开发者社区-腾讯云

vue项目使用tinymce-腾讯云开发者社区-腾讯云

vue3 中 tinymce+tinymce-vue 富文本编辑器使用_vue富文本编辑器插件_MENGCAIXIU520的博客-CSDN博客

【Vue3】tinymce富文本编辑器的使用

相关文章:

vue3.3-TinyMCE:TinyMCE富文本编辑器基础使用

一、TinyMCE官网 GitHub - tinymce/tinymce TinyMCE中文文档中文手册 二、官网介绍 TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有&#xff1a;UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。 TinyMCE的优势&…...

基于以太坊+IPFS的去中心化数据交易方法及平台

自己的论文&#xff0c;哎费事 目录 基于以太坊IPFS的去中心化数据交易方法及平台 基于以太坊IPFS的去中心化数据交易方法及平台 摘要&#xff1a; 数据交易过程中存在数据权属不明和数据安全问题。本文开发了一种基于以太坊IPFS的去中心化数据交易方法及平台。方法包括&am…...

NestJS 的 拦截器 学习

拦截器会用到RxJs&#xff0c;所以在学习拦截器之前可以先了解一下它。 拦截器是使用Injectable()装饰器装饰的类并且实现了接口NestInterceptor。 拦截器受到 AOP(面向切面编程)技术的启发&#xff0c;具有如下的功能&#xff1a; 在方法执行之前/之后绑定额外的逻辑转换函…...

Spring AOP 中的代理对象是怎么创建出来的?

文章目录 1. AOP 用法2. 原理分析2.1 doCreateBean2.2 postProcessAfterInitialization2.3 getAdvicesAndAdvisorsForBean2.3.1 findCandidateAdvisors2.3.2 findAdvisorsThatCanApply2.3.3 extendAdvisors 2.4 createProxy 今天和小伙伴们聊一聊 Spring AOP 中的代理对象是怎么…...

解决@Scope(“prototype“)不生效的问题

目录 Scope(“prototype“)不生效Scope(“prototype“)正确用法——解决Bean多例问题 1.问题&#xff0c;Spring管理的某个Bean需要使用多例2.问题升级3. Spring给出的解决问题的办法&#xff08;解决Bean链中某个Bean需要多例的问题&#xff09; Scope(“prototype“)不生效 …...

Mybatis 知识点

Mybatis 知识点 1.1 Mybatis 简介 1.1.1 什么是 Mybatis Mybatis 是一款优秀的持久层框架支持定制化 SQL、存储过程及高级映射Mybatis 几乎避免了所有的 JDBC 代码和手动设置参数以及获取结果集MyBatis 可以使用简单的 XML 或注解来配置和映射原生类型、接口和 Java 的 POJO…...

PHP中关于is,between,in等运算符的用法是什么?

我们学习了解了这么多关于PHP的知识&#xff0c;不知道你们对PHP中关于is&#xff0c;between&#xff0c;in等运算符的用法是什么&#xff1f;是否已经完全掌握了呢&#xff0c;如果没有&#xff0c;那就跟随本篇文章一起继续学习吧 相关推荐&#xff1a;关于PHP中的增删改如…...

2023-07-29:华清远见嵌入式2017年线下班:文件IO笔记

这里写目录标题 华清远见嵌入式2017年线下班&#xff1a;文件IO笔记文件权限文件IO文件创建和打开操作文件关闭操作出错处理创建设备文件 || create || 老师自己忘了文件读操作练习&#xff1a;计算文件的大小&#xff1f;文件写操作练习&#xff1a;打开file1和file2&#xff…...

2023年第四届“华数杯”数学建模思路 - 复盘:光照强度计算的优化模型

文章目录 0 赛题思路1 问题要求2 假设约定3 符号约定4 建立模型5 模型求解6 实现代码 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 问题要求 现在已知一个教室长为15米&#xff0c;宽为12米&#xff0…...

Typescript第七章 处理错误(返回null,抛出异常,返回异常,Option类型)

第七章 处理错误 Typescript竭尽所能&#xff0c;把运行时异常转移到编译时。Typescript是功能丰富的系统&#xff0c;加上强大的静态和符号分析能力&#xff0c;包揽了大量辛苦的工作。 但是有些问题是无法避免的&#xff0c;比如网络和文件系统异常&#xff0c;解析用户输入…...

Qt库xcb问题

首先在~/.bashrc中加入 export QT_DEBUG_PLUGINS1然后看具体的报错 查看某个库链接的库&#xff1a; ldd libqxcb.so然后找到真正缺少的库&#xff0c;再在路径下搜索&#xff0c;然后建立软链接。 https://blog.csdn.net/LOVEmy134611/article/details/107212845 https://…...

C++ | 哈希表的实现与unordered_set/unordered_map的封装

目录 前言 一、哈希 1、哈希的概念 2、哈希函数 &#xff08;1&#xff09;直接定址法 &#xff08;2&#xff09;除留余数法 &#xff08;3&#xff09;平方取中法&#xff08;了解&#xff09; &#xff08;4&#xff09;随机数法&#xff08;了解&#xff09; 3、哈…...

【漏洞挖掘】Xray+rad自动化批量漏洞挖掘

文章目录 前言一、挖掘方法二、使用步骤工具安装使用方法开始挖掘 总结 前言 自动化漏洞挖掘是指利用计算机程序和工具来扫描、分析和检测应用程序、网络和系统中的安全漏洞的过程。这种方法可以帮助安全专家和研究人员更高效地发现和修复潜在的安全威胁&#xff0c;从而提高整…...

Swagger UI教程 API 文档和Node的使用

在团队开发中&#xff0c;一个好的 API 文档可以减少很多交流成本&#xff0c;也可以使一个新人快速上手业务。 前言 swagger ui是一个API在线文档生成和测试的利器&#xff0c;目前发现最好用的。为什么好用&#xff1f;Demo 传送门 支持API自动生成同步的在线文档 这些文档可…...

P5691 [NOI2001] 方程的解数

[NOI2001] 方程的解数 题目描述 已知一个 n n n 元高次方程&#xff1a; ∑ i 1 n k i x i p i 0 \sum\limits_{i1}^n k_ix_i^{p_i} 0 i1∑n​ki​xipi​​0 其中&#xff1a; x 1 , x 2 , … , x n x_1, x_2, \dots ,x_n x1​,x2​,…,xn​ 是未知数&#xff0c; k 1 ,…...

rust里用什么表示字节类型?

在Rust中&#xff0c;字节可以使用 u8 类型来表示。 u8 是一个无符号8位整数类型&#xff0c;可以表示0到255之间的值&#xff0c;对应于一个字节的范围。 以下是一个示例&#xff0c;演示了如何声明和使用字节&#xff1a; fn main() {let byte: u8 65; // 表示字母A的ASCI…...

CMake简介

文章目录 为什么需要头文件为什么 C 需要声明头文件 - 批量插入几行代码的硬核方式头文件进阶 - 递归地使用头文件 CMake什么是编译器多文件编译与链接CMake 的命令行调用为什么需要库&#xff08;library&#xff09;CMake 中的静态库与动态库CMake 中的子模块子模块的头文件如…...

[threejs]相机与坐标

搞清相机和坐标的关系在threejs初期很重要&#xff0c;否则有可能会出现写了代码&#xff0c;运行时一片漆黑的现象&#xff0c;这种情况就有可能是因为你相机没弄对。 先来看一下threejs中的坐标(世界坐标) 坐标轴好理解&#xff0c;大家只需要知道在three中不同颜色代表的轴…...

Qt信号与槽机制的基石-MOC详解

引入 上篇讲到了信号与槽就是实现的观察者模式&#xff0c;那具体如何生成映射表就是moc做的事情。 一、moc简介 1. moc的定义 moc 全称是 Meta-Object Compiler&#xff0c;也就是“元对象编译器”&#xff0c;它主要用于处理C源文件中的非标准C代码。Qt 程序在交由标准编…...

关于单体架构缓存刷新实现方案

背景 如果各位看官是分布式项目应该都采用分布式缓存了&#xff0c;例如redis等&#xff0c;分布式缓存不在本次讨论范围哈&#xff1b;我个人建议是&#xff0c;如果是用户量比较大&#xff0c;建议采用分布式缓存机制&#xff0c;后期可以很容易前后到分布式服务或微服务。 …...

安宝特方案丨XRSOP人员作业标准化管理平台:AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

Python爬虫(一):爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

云原生玩法三问:构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由&#xff1a;大部分的转换软件需要收费&#xff0c;要么功能不齐全&#xff0c;而开会员又用不了几次浪费钱&#xff0c;借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

前端中slice和splic的区别

1. slice slice 用于从数组中提取一部分元素&#xff0c;返回一个新的数组。 特点&#xff1a; 不修改原数组&#xff1a;slice 不会改变原数组&#xff0c;而是返回一个新的数组。提取数组的部分&#xff1a;slice 会根据指定的开始索引和结束索引提取数组的一部分。不包含…...

MFE(微前端) Module Federation:Webpack.config.js文件中每个属性的含义解释

以Module Federation 插件详为例&#xff0c;Webpack.config.js它可能的配置和含义如下&#xff1a; 前言 Module Federation 的Webpack.config.js核心配置包括&#xff1a; name filename&#xff08;定义应用标识&#xff09; remotes&#xff08;引用远程模块&#xff0…...

Java求职者面试指南:Spring、Spring Boot、Spring MVC与MyBatis技术解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、Spring MVC与MyBatis技术解析 一、第一轮基础概念问题 1. Spring框架的核心容器是什么&#xff1f;它的作用是什么&#xff1f; Spring框架的核心容器是IoC&#xff08;控制反转&#xff09;容器。它的主要作用是管理对…...

6️⃣Go 语言中的哈希、加密与序列化:通往区块链世界的钥匙

Go 语言中的哈希、加密与序列化:通往区块链世界的钥匙 一、前言:离区块链还有多远? 区块链听起来可能遥不可及,似乎是只有密码学专家和资深工程师才能涉足的领域。但事实上,构建一个区块链的核心并不复杂,尤其当你已经掌握了一门系统编程语言,比如 Go。 要真正理解区…...