Vue使用Tinymce 编辑器

目录

    • 一、下载并重新组织tinymce结构
    • 二、使用
    • 三、遇到的坑

一、下载并重新组织tinymce结构

  • 下载
npm install tinymce@^7
or
yarn add tinymce@^7

  • 重构目录

    在node_moudles里找到tinymce文件夹，把里面文件拷贝一份放到public下，如下：

-- public
	 plugins
		tinymce
			icons
			models
			plugins
			skins
			themes

在这里插入图片描述
不这么做的话 只引入tinymce是没有办法自动引入正确的插件路径，控制台会报一堆错：

Uncaught SyntaxError: Unexpected token '<' (at theme.js:1:1) 
Uncaught SyntaxError: Unexpected token '<' (at model.js:1:1) 
Uncaught SyntaxError: Unexpected token '<' (at icons.js:1:1)
  • language 、 editimage插件引入方法
    此时，还缺少language和editimage插件如果需要的话，可以从这里找language。
    editimage的话，因为是收费的，所以我在他们官网上针对editimage插件使用Demo进行爬取
    在这里插入图片描述
    然后editimage放入tinymce自己的组件里，仿照他的样子自己搞
    在这里插入图片描述
// index.js
require('./plugin.js');

// plugin.js
...

此时还会报一个错，就是editimage下的language找不到，那就把上面的文件拿过来放到对应的位置即可，所以你会看到我的文件里还多了一个language。
到此为止准备阶段算是完了。

二、使用

此时可以直接引用tinymce，自动引入会根据base_url进行查找，我们刚才把准备工作做好了，可以直接设置

<template>
	<div style="height:100vh">
		<textarea id="tinymce"></textarea>
	</div>
</template>
<script>
import tinymce from "tinymce";
export default{
	data(){
		return{
			editor:null,
		}
	},
	mounted(){
		tinymce.init({
				selector: "#tinymce",
				license_key: 'gpl',
				height:'100%',
				base_url:'plugins/tinymce/',// 设置资源根路径
				language: 'zh_CN', // 设置语言为中文
				language_url: 'plugins/tinymce/langs/zh_CN.js', // 这里的地址指向 public 目录下的路径
				plugins: 'quickbars preview importcss image editimage searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen link media codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap emoticons accordion',
				toolbar: " undo redo | shot copy paste | accordion accordionremove | fontselect styleselect fontsize | bold italic underline strikethrough | align numlist bullist | link image | table media | lineheight outdent indent| forecolor backcolor removeformat | charmap emoticons | code fullscreen preview | save print | pagebreak anchor codesample | ltr rtl ",
				editimage_toolbar: 'rotateleft rotateright | flipv fliph | editimage imageoptions',
				fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 26px 36px 48px 56px', // 工具栏自定义字体大小选项
				font_formats: "微软雅黑='微软雅黑'; 宋体='宋体'; 黑体='黑体'; 仿宋='仿宋'; 楷体='楷体'; 隶书='隶书'; 幼圆='幼圆'; 方正舒体='方正舒体'; 方正姚体='方正姚体'; 等线='等线'; 华文彩云='华文彩云'; 华文仿宋='华文仿宋'; 华文行楷='华文行楷'; 华文楷体='华文楷体'; 华文隶书='华文隶书'; Andale Mono=andale mono,times; Arial=arial; Arial Black=arial black;avant garde; Book Antiqua=book antiqua;palatino; Comic Sans MS=comic sans ms; Courier New=courier new;courier; Georgia=georgia; Helvetica=helvetica; Impact=impact;chicago; Symbol=symbol; Tahoma=tahoma;arial; sans-serif; Terminal=terminal,monaco; Times New Roman=times new roman,times; Trebuchet MS=trebuchet ms; Verdana=verdana;geneva; Webdings=webdings; Wingdings=wingdings", // 工具栏自定义字体选项
				branding: false, // 去掉编辑器右下角的广告
				menubar: false,
				paste_data_images: true,
        		highlight_on_focus: false,// 边框高亮
				contextmenu: "",//右键菜单
        		content_style:"",//纯css代码，控制iframe内的文档
				toolbar_location: "top",
				editimage_toolbar: ' customAIDuiHuaButton |rotateleft rotateright | flipv fliph | editimage imageoptions',//选择图片时的toolbar
				quickbars_insert_toolbar: false,//插入时是否展示快捷键
				quickbars_selection_toolbar: 'customAIDuiHuaButton customAIButton bold italic underline fontsize forecolor numlist blockquote ',选择时展示的快捷键
		        save_onsavecallback: () => {//保存时才会有的钩子函数，保存回调
		          // 解决保存时，触发的找不到form表单的提示
		          console.log('Saved');
		          _this.$emit('save');
		        },
				init_instance_callback:(editor)=>{//初始化回调
		         	this.editor=editor;
					// 设置初始值
          			let content = '中国万岁，共产党万岁！！！';
					editor.setContent(content, {
						format: 'html'
					})
				},
				setup: (editor) => {
					// 编辑器监听内容改变，和input的change事件不同，官网上解释是除了其他操作外，输入文字不会立即触发，而是只有焦点不在编辑器上是才会触发
					editor.on('change',(e)=>{
						this.$emit("update:value", editor.getContent({format:'html'}));
					})
					// 注册一个图标
					editor.ui.registry.addIcon('shot-cut', '<svg t="1733897029101" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5750" width="24" height="24"><path d="M715.98 634.01h80.07V308.02c0-21.61-7.94-40.35-23.83-56.24-15.89-15.89-34.63-23.83-56.24-23.83H389.99v80.07h325.99v325.99z m-407.96 81.97V64h-80.07v163.95H64v80.07h163.95v407.97c0 21.6 7.94 40.35 23.83 56.24 15.89 15.89 34.63 23.83 56.24 23.83h407.97V960h80.07V796.05H960v-80.07H308.02z" p-id="5751"></path></svg>');
					editor.ui.registry.addButton('shot', {
              			icon:'shot-cut',//使用这个图标
              			tooltip:'截屏',
		            	onAction: (_) => {
		                	// TO-DO
		              	}
            		});
					
					editor.ui.registry.addIcon('ai', '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n' + '<path fill-rule="evenodd" clip-rule="evenodd" d="M5 3C3.34315 3 2 4.34315 2 6V18C2 19.6569 3.34315 21 5 21H19C20.6569 21 22 19.6569 22 18V6C22 4.34315 20.6569 3 19 3H5ZM11.8038 14.4512L12.2652 15.6641C12.3268 15.8135 12.3993 15.9871 12.4828 16.1849C12.5707 16.3782 12.652 16.5233 12.7267 16.6199C12.8014 16.7122 12.8937 16.7847 13.0035 16.8375C13.1134 16.8946 13.2452 16.9232 13.399 16.9232C13.6627 16.9232 13.8868 16.8309 14.0714 16.6463C14.2604 16.4573 14.3548 16.2508 14.3548 16.0267C14.3548 15.8113 14.256 15.4664 14.0582 14.9918L11.5336 8.75593C11.4149 8.44392 11.316 8.19563 11.2369 8.01105C11.1622 7.82209 11.0677 7.64631 10.9535 7.48371C10.8436 7.32111 10.6964 7.18928 10.5118 7.0882C10.3316 6.98273 10.1053 6.93 9.83287 6.93C9.5648 6.93 9.33849 6.98273 9.15392 7.0882C8.97374 7.18928 8.82652 7.32331 8.71227 7.4903C8.6024 7.6573 8.49693 7.86823 8.39586 8.12312C8.29918 8.3736 8.21568 8.58894 8.14537 8.76911L5.67345 15.0445C5.57237 15.295 5.49986 15.4905 5.45592 15.6312C5.41197 15.7718 5.39 15.908 5.39 16.0399C5.39 16.2684 5.48448 16.4727 5.67345 16.6529C5.86241 16.8331 6.07994 16.9232 6.32603 16.9232C6.61607 16.9232 6.82481 16.8397 6.95226 16.6727C7.0797 16.5013 7.23351 16.1739 7.41368 15.6905L7.87511 14.4512H11.8038ZM9.81969 8.99323L11.2765 12.9813H8.38927L9.81969 8.99323ZM15.3775 8.11652V15.73C15.3775 16.1256 15.4676 16.4244 15.6478 16.6265C15.8324 16.8243 16.0653 16.9232 16.3465 16.9232C16.641 16.9232 16.8783 16.8243 17.0585 16.6265C17.243 16.4288 17.3353 16.13 17.3353 15.73V8.11652C17.3353 7.71662 17.243 7.41999 17.0585 7.22663C16.8783 7.02888 16.641 6.93 16.3465 6.93C16.0609 6.93 15.828 7.02888 15.6478 7.22663C15.4676 7.42439 15.3775 7.72102 15.3775 8.11652Z" fill="rgba(180, 104, 106, 1.000)"/>\n' +'</svg>');

		            editor.ui.registry.addButton('customAIDuiHuaButton', {
		              icon: 'ai',
		              text: '小Q对话',
		              onAction:()=>{
						// TO-DO	
					  }
		            });

					editor.ui.registry.addMenuButton('customAIButton', {
		              icon: 'ai',
		              text: 'AI工具',
		              fetch:(callback)=>{
		              	const items = [
		              		{
		              			type: 'menuitem',
			                    text: '续写',
			                    onAction: (_) =>{
			                    	// TO-DO
			                    }
		              		},
		              		{
		              			type: 'menuitem',
			                    text: '续写',
			                    getSubmenuItems: () => [
			                    	{
				                        type: 'menuitem',
				                        text: '轻松诙谐',
				                        onAction: (_) => {
				                          // TO-DO
				                        }
				                    },
				                    {
				                    	type: 'menuitem',
				                        text: '商务正式',
				                        onAction: (_) => {
				                          // TO-DO
				                        }
				                    }
			                    ]
		              		}
		              	];
		              	callback(items)
		              }
		            });
		
				}
		})
	}
}
</script>

三、遇到的坑

  • 如果遇到了tab切换，tinymce需要手动销毁，否则无法使用，所以在初始化的时候需要进行remove。
mounted() {
    this.$nextTick(v=>{
      this.render();
    })
  },
methods:{
    render(){
      tinymce.remove('#'+this.tinymceId);
      tinymce.init(this.options)
    },
}
  • save的时候报错，form表单找不到，解决办法
data(){
	return {
		options:{
			//...
			save_onsavecallback: () => {//保存时才会有的钩子函数，保存回调
		          // 解决保存时，触发的找不到form表单的提示
		          console.log('Saved');
		          _this.$emit('save');
	        },
			//...
		}
	}
}

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【每日学点鸿蒙知识】蓝牙Key、页面元素层级工具、私仓搭建、锁屏显示横幅、app安装到真机

【每日学点鸿蒙知识】蓝牙Key、页面元素层级工具、私仓搭建、锁屏显示横幅、app安装到真机

1、HarmonyOS 蓝牙key模块&#xff1f; 蓝牙key模块setCharacteristicChangeNotification后无法在BLECharacteristicChange订阅事件中监听到特征值变化 步骤&#xff1a; 调用setCharacteristicChangeNotification接口&#xff0c;使characteristic的notify属性为true调用wri…
阅读更多...
如何记录日常笔记

如何记录日常笔记

如何使用Obsidian来记录日常的笔记吗&#xff1f;比如会议记录、读书笔记。 我认为&#xff0c;首先需要做好的就是建立一个单独的分类&#xff0c;比如设置会议记录的文件夹、读书笔记的文件夹&#xff0c;这样各个笔记相互不干扰。 而做日常记录&#xff0c;和我们进行卡片…
阅读更多...
`we_chat_union_id IS NOT NULL` 和 `we_chat_union_id != ‘‘` 这两个条件之间的区别

`we_chat_union_id IS NOT NULL` 和 `we_chat_union_id != ‘‘` 这两个条件之间的区别

文章目录 1、什么是空字符串&#xff1f;2、两个引号之间加上空格 好的&#xff0c;我们来详细解释一下 we_chat_union_id IS NOT NULL 和 we_chat_union_id ! 这两个条件之间的区别&#xff0c;以及它们在 SQL 查询中的作用&#xff1a; 1. we_chat_union_id IS NOT NULL 含…
阅读更多...
NS3学习——tcpVegas算法代码详解（2）

NS3学习——tcpVegas算法代码详解（2）

NS3学习——tcpVegas算法代码详解&#xff08;1&#xff09;-CSDN博客 目录 4.TcpVegas类中成员函数 (5) CongestionStateSet函数 (6) IncreaseWindow函数 1.检查是否启用 Vgas 2.判断是否完成了一个“Vegas 周期” 2.1--if&#xff1a;判断RTT样本数量是否足够 2.2--e…
阅读更多...
【蓝桥杯——物联网设计与开发】拓展模块3 - 温度传感器模块

【蓝桥杯——物联网设计与开发】拓展模块3 - 温度传感器模块

目录 一、温度传感器模块 &#xff08;1&#xff09;资源介绍 &#x1f505;原理图 &#x1f505;STS30-DIS-B &#x1f319;引脚分配 &#x1f319;通信 &#x1f319;时钟拉伸&#xff08;Clock Stretching&#xff09; &#x1f319;单次触发模式 &#x1f319;温度数据转…
阅读更多...
项目2路由交换

项目2路由交换

背景 某学校为满足日常教学生活需求&#xff0c;推动数字校园的建设&#xff0c;学校有办公楼和学生宿舍楼和服务器集群三块区域&#xff0c;请合理规划IP地址和VLAN&#xff0c;实现企业内部能够互联互通现要求外网能通过公网地址访问服务器集群&#xff0c;学生和老师能正常…
阅读更多...
计算机网络概要与习题

计算机网络概要与习题

第1章 概论 1、计算机网络 2、互联网 3、计算机网络体系结构 分层模型 OSI/RM 7层模型 TCP/IP 5层模型 协议、PDU、SDU、SAP等术语 数据封装&#xff08;计算&#xff09; 第2章 数据通信基础 1、数据通信系统组成 2、主要性能指标 数据传输速率 码元速率 时延 …
阅读更多...
使用VsCode编译调试Neo4j源码

使用VsCode编译调试Neo4j源码

文章目录 使用VsCode编译调试Neo4j源码1 简介2 步骤1 下载源码2 依赖3 构建Neo4j4 运行5 安装VsCode扩展6 **调试** 使用VsCode编译调试Neo4j源码 1 简介 Neo4j作为领先的图数据库&#xff0c;在存储、查询上都非常值得分析学习。通过调试、日志等方法跟踪代码工作流有助于理…
阅读更多...
HTML-CSS（day01）

HTML-CSS（day01）

W3C标准&#xff1a; W3C&#xff08; World Wide Web Consortium&#xff0c;万维网联盟&#xff09; W3C是万维网联盟&#xff0c;这个组成是用来定义标准的。他们规定了一个网页是由三部分组成&#xff0c;分别是&#xff1a; 三个组成部分&#xff1a;&#xff08;1&…
阅读更多...
Linux文件的压缩和解压

Linux文件的压缩和解压

【图书推荐】《Ubuntu Linux系统管理与运维实战》_学ubuntu哪本书好-CSDN博客 【图书介绍】】几本Linux系统管理与运维图书_朱文伟 linux驱动-CSDN博客 《Ubuntu Linux系统管理与运维实战&#xff08;Linux技术丛书&#xff09;》(张春晓&#xff0c;肖志健)【摘要 书评 试读…
阅读更多...
基于springboot的海洋知识服务平台的设计与实现

基于springboot的海洋知识服务平台的设计与实现

基于springboot的海洋知识服务平台的设计与实现 写在前面 需要源码加lzlv58787 开发内容 编程语言&#xff1a;Java / Vue2 框架&#xff1a; SpringBoot Shiro Mybatis-plus 项目结构 后端管理系统前台Web 后端管理系统 前台Web
阅读更多...
论文解读 | EMNLP2024 一种用于大语言模型版本更新的学习率路径切换训练范式

论文解读 | EMNLP2024 一种用于大语言模型版本更新的学习率路径切换训练范式

点击蓝字 关注我们 AI TIME欢迎每一位AI爱好者的加入&#xff01; 点击 阅读原文 观看作者讲解回放&#xff01; 作者简介 王志豪&#xff0c;厦门大学博士生 刘诗雨&#xff0c;厦门大学硕士生 内容简介 新数据的不断涌现使版本更新成为大型语言模型&#xff08;LLMs&#xff…
阅读更多...
【LeetCode】394、字符串解码

【LeetCode】394、字符串解码

【LeetCode】394、字符串解码 文章目录 一、递归: 嵌套类问题1.1 递归: 嵌套类问题 二、多语言解法 一、递归: 嵌套类问题 1.1 递归: 嵌套类问题 // go func decodeString(s string) string {// 如果遇到 嵌套括号的情况, 则递归// 可能连续多位数字, 则 通过 cur cur * 10 …
阅读更多...
iOS开发代码块-OC版

iOS开发代码块-OC版

iOS开发代码块-OC版 资源分享资源使用详情Xcode自带代码块自定义代码块 资源分享 自提&#xff1a; 通过网盘分享的文件&#xff1a;CodeSnippets 2.zip 链接: https://pan.baidu.com/s/1Yh8q9PbyeNpuYpasG4IiVg?pwddn1i 提取码: dn1i Xcode中的代码片段默认放在下面的目录中…
阅读更多...
微信小程序的轮播图学习报告

微信小程序的轮播图学习报告

微信小程序轮播图学习报告 好久都没分享新内容了&#xff0c;实在惭愧惭愧。今天给大家做一个小程序轮播图的学习报告。 先给大家看一下我的项目状态&#xff1a; 很空昂&#xff01;像一个正在修行的老道&#xff0c;空的什么也没有。 但是我写了 4 个 view 容器&#xff0c;…
阅读更多...
airflow docker 安装

airflow docker 安装

mkdir -p /root/airflow cd /root/airflow && mkdir -p ./dags ./logs ./plugins ./configcd /root/airflow/ wget https://airflow.apache.org/docs/apache-airflow/2.10.4/docker-compose.yaml nano docker-compose.yamlAIRFLOW__CORE__LOAD_EXAMPLES: false #初始化…
阅读更多...
Redis篇--常见问题篇7--缓存一致性2（分布式事务框架Seata）

Redis篇--常见问题篇7--缓存一致性2（分布式事务框架Seata）

1、概述 在传统的单体应用中&#xff0c;事务管理相对简单&#xff0c;通常使用数据库的本地事务&#xff08;如MySQL的BEGIN和COMMIT&#xff09;来保证数据的一致性。然而&#xff0c;在微服务架构中&#xff0c;由于每个服务都有自己的数据库&#xff0c;跨服务的事务管理变…
阅读更多...
Linux x86_64离线安装Nginx全教程（含安装包）

Linux x86_64离线安装Nginx全教程（含安装包）

最近在整理麒麟V10操作系统的常用中间件的安装今天也把之前的nginx一起整理一下&#xff0c;作为后续的笔记记录 1. 资源 百度网盘下载相关安装包包含信息如下截图 通过网盘分享的文件&#xff1a;nginx链接: https://pan.baidu.com/s/1r6SCnogqbhm-JOTPIjc6xA?pwdjuen 提取…
阅读更多...
Python酷库之旅-第三方库Pandas(269)

Python酷库之旅-第三方库Pandas(269)

目录 一、用法精讲 1276、pandas.tseries.offsets.BQuarterEnd.is_quarter_end方法 1276-1、语法 1276-2、参数 1276-3、功能 1276-4、返回值 1276-5、说明 1276-6、用法 1276-6-1、数据准备 1276-6-2、代码示例 1276-6-3、结果输出 1277、pandas.tseries.offsets.…
阅读更多...
前端入门之VUE--ajax、vuex、router，最后的前端总结

前端入门之VUE--ajax、vuex、router，最后的前端总结

前言 VUE是前端用的最多的框架&#xff1b;这篇文章是本人大一上学习前端的笔记&#xff1b;欢迎点赞 收藏 关注&#xff0c;本人将会持续更新。本人不是学前端的&#xff0c;这个是大一的时候上学的和做的笔记&#xff0c;那个时候学的也蒙&#xff0c;故这里对前端做一个总…
阅读更多...
最新文章

Copyright @ 2022~2023