【Vue3tinymce】Vue3使用tinymce富文本编辑器
前言
注: vue2请绕道。
- tinymce官网
https://www.tiny.cloud/
- 备用地址: The Most Advanced WYSIWYG HTML Editor | Trusted Rich Text Editor | TinyMCETinyMCE is the most advanced WYSIWYG HTML editor designed to simplify website content creation. The rich text editing platform that helped launched Atlassian, Medium, Evernote and more.
https://www.tiny.cloud/
下载tinymce
官网例子https://www.tiny.cloud/docs/tinymce/6/vue-cloud/
npm install --save "@tinymce/tinymce-vue"
开始使用
api-key :去官方申请key,免费的,注册账号就行。
key申请地址https://www.tiny.cloud/my-account/dashboard/
如果不填有效key,会弹出提示,影响体验。
下面是我自个配置的基本功能。
更多功能参考官网即可。
<template><Editor api-key="写你的key" :init="init" />
</template><script setup>
import { reactive } from "vue";
import Editor from "@tinymce/tinymce-vue";const init = reactive({plugins: "lists link image table code help wordcount",content_css: "tinymce-5", //主题tinymce-5-dark || tinymce-5 || default || writer || document || darkcustom_undo_redo_levels: 50, //回退数量end_container_on_empty_block: true, //块级文本是否换行keep_styles: true, //回车是否保存原有样式,例如code块回车是否截断menubar: false,//是否开启顶部菜单 > false 关闭菜单 | 'edit insert view format table tools help' 菜单按照这里排序 | 参考:https://www.tiny.cloud/docs/tinymce/6/menus-configuration-options/toolbar_mode: 'wrap',//功能栏是否换行 > | wrap 换行 | scrolling 滚动 | sliding 省略toolbar_location: 'top',//菜单栏位置 > bottom 底部 | top 顶部style_formats_merge: true,//是否开启默认功能elementpath: false,//是否展示编辑层级 > p spanresize: true,//调整宽高 > true 调整高 | false 不可调整宽高 | both 宽高可调language: 'zh_CN',//中文// 自定义快捷将text_patterns: [{ start: "---", replacement: "<hr/>" },{ start: "--", replacement: "—" },{ start: "-", replacement: "—" },{ start: "(c)", replacement: "©" },{ start: "//brb", replacement: "Be Right Back" },{start: "//h",replacement:'<h1 style="color: blue">Heading here</h1> <h2>Author: Name here</h2> <p><em>Date: 01/01/2000</em></p> <hr />',},],// 自定义指令text_patterns_lookup: (ctx) => {const parentTag = ctx.block.nodeName.toLowerCase();if (parentTag === "pre" || parentTag === "p") {return [{ start: "`", end: "`", format: "code" }];} else if (parentTag === "p") {return [{ start: "*", end: "*", format: "bold" }];} else if (parentTag === "span") {return [// ctx.text is the string from the start of the block to the cursor{ start: "brb", replacement: ctx.text + ": Be Right Back" },];} else {return [];}},
});
</script>
效果图
网上的tinymce博客真的离谱,简直就是糊弄人,害人不浅,害的我折腾了一天,还是官方例子靠谱。
网上的教程居然是,先下载npm install --save "@tinymce/tinymce-vue",然后再下载tinymce,然后然后,复制node_modules/tinymce目录下的文件到到public目录下,然后再开始引入并使用tinymce。
这是个啥操作,明明已经集成了在vue3已经集成了@tinymce/tinymce-vue,却还要下载一次tinymce,属实把我整懵了。
但这不是最重要的,最重要的是,还要复制node_modules/tinymce目录下的文件到public公共资源里去,简直就是离了个超级大谱,看了半天,看的我怀疑自己。设置中文还要去下载xxx文件,复制到public/xxxx/xxx目录下,我也是无语了。
官方设置中文直接配置 language: 'zh_CN'就可以了。
最要命的是全网tinymce博客一个样,都是cv。
【Vue3tinymce】Vue3使用tinymce富文本编辑器相关推荐
- 在vue3.0项目中使用tinymce富文本编辑器
目录 一.安装 二.完整代码 三.事项说明 四.参考文档 之前看了好几篇关于 vue项目中使用 tinymce的文章, import引入大量 tinymce插件, /node_modules/ti ...
- vue 是否有word编辑控件_GitHub - C84882428/editor-ui: vue集成 tinymce 富文本编辑器,增加导入 word 模板...
editor-ui vue 集成 tinymce 富文本编辑器 自定义 tinymce 富文本编辑器, 在原来的编辑器中增加上传 word 模板 最终展示效果: 主要代码: 整体思路: 1,在编辑器原 ...
- tinymce富文本编辑器的使用
tinymce富文本编辑器的使用 1.基本介绍 tinymce富文本官网:https://www.tiny.cloud/ 中文文档:http://tinymce.ax-z.cn/ tinymce-np ...
- tinymce富文本编辑器扩展插件-设置段落间距
项目中使用到tinymce富文本编辑器,由于官方并没有设置段落间距插件,所以自己开发了一个段落间距扩展插件.可以将其配置为toolbar,也可以配置成菜单项. 使用方法: 方式一: 1. 使用npm安 ...
- tinymce富文本编辑器的视频插件如何上传本地视频
最近使用了tinymce富文本编辑器的视频上传功能,发现默认只能填写视频链接,不能上传本地的视频.为此,我专门研究下如何上传本地视频. 版本:tinymce版本是^5.0.16,@tinymce/ti ...
- Layui 使用 TinyMCE 富文本编辑器
Layui 使用 TinyMCE 富文本编辑器 Layui 使用 TinyMCE 富文本编辑器 1.进入 Layui 第三方组件平台下载该拓展组件 2.写一个测试 Demo 3.调用 TinyMCE ...
- TinyMCE富文本编辑器自动链接插件 AutoLink配置
TinyMCE富文本编辑器 AutoLink 插件默认是不支持全角字符的,意味着你就算是全角字符,也必须要在字符后面跟随一个空格,然后再跟随网址,这时候地址才会自动转换为超链接 a 标签 通过如下设置 ...
- Tinymce富文本编辑器图片上传即编辑配置详解
Tinymce富文本编辑器 本站使用的也是Tinymce富文本编辑器,非常的好用,就是图片上传和编辑配置上有点麻烦,当时没有看完Tinymce官网的资料,导致浪费了点时间,下面就把图片上传的配置分享给 ...
- tinymce富文本编辑器做评论区
今天分享一下tinymce富文本编辑器做评论区的全过程. 文章目录 一.介绍 1.最终效果 2.功能介绍 3.主要项目包版本介绍: 二.每个功能的实现 1.自定义toolbar的功能区 ①对应的样式以 ...
最新文章
- 喀什市2021年高考成绩查询,2021年新疆高考查分网站查分网址:http://www.xjzk.gov.cn/...
- jQuery URL Decoder Plugin
- ArchLinux安装图文教程(2017.06.15)
- 开箱即用,Knative 给您极致的容器 Serverless 体验
- 咖啡日报入驻PMCAFF App安卓端
- tensorflow基本概念
- nginx coredump 不产生core文件
- 来,Consul 服务发现入个门(一看就会的那种)
- 人生几张纸,看透一辈子
- CodeSmith连接Mysql配置
- tp框架引入第三方sdk的经验总结
- Mysql语句字符串拼接
- 英语视听说第六版答案
- 3D房地产营销PPT模板
- 切图工具:输出512*512切片大小的切片
- LoadRunner 11安装和使用
- 【笨方法学PAT】1116 Come on! Let's C (20 分)
- 前端VUE面试题总结
- 2022兴福村镇银行人员招聘专项练习题及答案
- java数组循环_java数组,遍历数组
热门文章
- OpenWrt开发必备软件模块——无线技术与PPPoE
- 关于天地图的瓦片下载
- oracle 数据块修复工具,BBED (Oracle Block Brower and EDitor Tool) :数据块修复工具
- numba 报错 SystemError: initialization of _internal failed without raising an exception
- LBM模拟方法学习篇1:安装Xshell和Xftp
- JAVA生成二维码-zxing
- 英语作文写写学校计算机房,我的学校英语作文3篇
- 蓝牙MESH网关_支持三大通信协议,小米米家智能多模网关发布
- CentOS 5.2下安装网卡驱动
- 没有这种心态,你就别想着赚钱?