富文本 tinyMCE Vue2 组件使用简易教程

参考官方教程 TinyMCE Vue.js integration technical reference

Vue2 项目需要使用 tinyMCE Vue2 组件(@tinymce/tinymce-vue)的第 3 版

安装组件

npm install --save "@tinymce/tinymce-vue@^3"

编写组件调用

<template><Editorref="editor"v-model="editorContent":id="richtextId":init="editorInit"/>
</template>
<script lang="ts">
import Vue from "vue";
import Editor from "@tinymce/tinymce-vue";export default Vue.extend({name: "RichtextView",components: { Editor },props: {richtextId: { type: String, required: true }, // 标识当前富文本内容的唯一id},data() {return {editorContent: "", // 绑定富文本编辑器内容editorInit: {height: 400, // 设置富文本编辑器高度menubar: false, // 是否显示菜单栏plugins: "lists link image table code help wordcount", // 使用的tinymce插件列表},};},
});
</script>

跳过 tinyMCE 的授权

按照官网说法,tinyMCE 是可以在 GPLv2 协议下使用的,我的理解是只要不用他们官方的云服务,是不需要授权的

但如上述代码编写运行后,会有一个提示出现在页面

如果不想麻烦去注册 API key,可以如下述操作:

由于 @tinymce/tinymce-vue 第 3 版是基于 tinymce 的第 5 版的,先下载 tinymce 第 5 版 作为本地资源,解压后放到 Vue2 项目根目录的 public 文件夹里

在上述组件调用示例代码中加入 tinymce-script-src 传参,从而指定组件加载本地的 tinymce

完整正确的调用示例:

<template><Editorref="editor"v-model="editorContent":tinymce-script-src="tinyMCEPath":id="richtextId":init="editorInit"/>
</template>
<script lang="ts">
import Vue from "vue";
import Editor from "@tinymce/tinymce-vue";export default Vue.extend({name: "RichtextView",components: { Editor },props: {richtextId: { type: String, required: true }, // 标识当前富文本内容的唯一id},data() {return {tinyMCEPath: `${process.env.BASE_URL}tinymce/tinymce.min.js`,editorContent: "", // 绑定富文本编辑器内容editorInit: {height: 400, // 设置富文本编辑器高度menubar: false, // 是否显示菜单栏plugins: "lists link image table code help wordcount", // 使用的tinymce插件列表},};},
});
</script>

上述代码是在 Vue2 中的简单调用,供读者参考,详细调用方式请查阅上文的官方教程

至此能正常使用 Vue2 下的 tinyMCE

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue框架技术相关概述以及前端框架整合

vue框架技术概述及前端框架整合 1 node.js 介绍&#xff1a;什么是node.js Node.js就是运行在服务端的JavaScript。 Node.js是一个事件驱动I/O服务端JavaScript环境&#xff0c;基于Google的V8引擎。 作用 1 运行java需要安装JDK&#xff0c;而Node.js是JavaScript的运行环…

【AI】Deepseek本地部署探索,尝试联网搜索

前言 1月下旬&#xff0c;Deepseek-R1横空出世&#xff0c;其依靠堪比GPT-o1的推理能力&#xff0c;训练成本及使用成本均只有gpt几十分之一甚至百分之一的超高性价比&#xff0c;以及它足够“OPEN”的特性直接暴打人工智能的资本行业&#xff0c;本着求实求新的精神&#xff…

DeepSeek介绍

目录 前言 1.介绍一下你自己 2.什么是CUDA CUDA的核心特点&#xff1a; CUDA的工作原理&#xff1a; CUDA的应用场景&#xff1a; CUDA的开发工具&#xff1a; CUDA的局限性&#xff1a; 3.在AI领域&#xff0c;PTX是指什么 1. PTX 的作用 2. PTX 与 AI 的关系 3. …

WGCLOUD服务器资源监控软件使用笔记 - Token is error是什么错误

[wgcloud-agent]2025/01/30 10:41:30 WgcloudAgent.go:90: 主机监控信息上报server开始 [wgcloud-agent]2025/01/30 10:41:30 WgcloudAgent.go:99: 主机监控信息上报server返回信息: {"result":"Token is error"} 这个错误是因为agent配置的wgToken和serv…

OpenAI-Edge-TTS:本地化 OpenAI 兼容的文本转语音 API,免费高效!

文本转语音&#xff08;TTS&#xff09;技术已经成为人工智能领域的重要一环&#xff0c;无论是语音助手、教育内容生成&#xff0c;还是音频文章创作&#xff0c;TTS 工具都能显著提高效率。今天要为大家介绍的是 OpenAI-Edge-TTS&#xff0c;一款基于 Microsoft Edge 在线文本…

Leetcode 131 分割回文串(纯DFS)

131. 分割回文串https://leetcode.cn/problems/palindrome-partitioning/https://leetcode.cn/problems/palindrome-partitioning/ 给你一个字符串 s&#xff0c;请你将 s 分割成一些子串&#xff0c;使每个子串都是 回文串 。返回 s 所有可能的分割方案。 示例 1&#xff1a…

服务器虚拟化技术详解与实战:架构、部署与优化

&#x1f4dd;个人主页&#x1f339;&#xff1a;一ge科研小菜鸡-CSDN博客 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; 引言 在现代 IT 基础架构中&#xff0c;服务器虚拟化已成为提高资源利用率、降低运维成本、提升系统灵活性的重要手段。通过服务…

记录一次,PyQT的报错,多线程Udp失效,使用工具如netstat来检查端口使用情况。

1.问题 报错Exception in thread Thread-1: Traceback (most recent call last): File "threading.py", line 932, in _bootstrap_inner File "threading.py", line 870, in run File "main.py", line 456, in udp_recv IndexError: list…

【PyTorch】6.张量运算函数:一键开启!PyTorch 张量函数的宝藏工厂

目录 1. 常见运算函数 个人主页&#xff1a;Icomi 专栏地址&#xff1a;PyTorch入门 在深度学习蓬勃发展的当下&#xff0c;PyTorch 是不可或缺的工具。它作为强大的深度学习框架&#xff0c;为构建和训练神经网络提供了高效且灵活的平台。神经网络作为人工智能的核心技术&…

线段树 算法

文章目录 基础知识适用场景小结 题目概述题目详解300.最长递增子序列2407.最长递增子序列 II 基础知识 线段树和树状数组都只是一个工具来的&#xff0c;题目并不会一下子就告诉你这个题目用到线段树和树状数组&#xff0c;这个取决于你想使用的数据结构以及所要优化的方向 线…

JVM_类的加载、链接、初始化、卸载、主动使用、被动使用

①. 说说类加载分几步&#xff1f; ①. 按照Java虚拟机规范,从class文件到加载到内存中的类,到类卸载出内存为止,它的整个生命周期包括如下7个阶段: 第一过程的加载(loading)也称为装载验证、准备、解析3个部分统称为链接(Linking)在Java中数据类型分为基本数据类型和引用数据…

SpringBoot+Vue的理解(含axios/ajax)-前后端交互前端篇

文章目录 引言SpringBootThymeleafVueSpringBootSpringBootVue&#xff08;前端&#xff09;axios/ajaxVue作用响应式动态绑定单页面应用SPA前端路由 前端路由URL和后端API URL的区别前端路由的数据从哪里来的 Vue和只用三件套axios区别 关于地址栏url和axios请求不一致VueJSPS…

socket实现HTTP请求,参考HttpURLConnection源码解析

背景 有台服务器&#xff0c;网卡绑定有2个ip地址&#xff0c;分别为&#xff1a; A&#xff1a;192.168.111.201 B&#xff1a;192.168.111.202 在这台服务器请求目标地址 C&#xff1a;192.168.111.203 时必须使用B作为源地址才能访问目标地址C&#xff0c;在这台服务器默认…

Hive:复杂数据类型之Map函数

Map函数 是Hive里面的一种复杂数据类型, 用于存储键值对集合。Map中的键和值可以是基础类型或复合类型&#xff0c;这使得Map在处理需要关联存储信息的数据时非常有用。 定义map时,需声明2个属性: key 和 value , map中是 key value 组成一个元素 key-value, key必须为原始类…

项目集成GateWay

文章目录 1.环境搭建1.创建sunrays-common-cloud-gateway-starter模块2.目录结构3.自动配置1.GateWayAutoConfiguration.java2.spring.factories 3.pom.xml4.注意&#xff1a;GateWay不能跟Web一起引入&#xff01; 1.环境搭建 1.创建sunrays-common-cloud-gateway-starter模块…

【C++高并发服务器WebServer】-9:多线程开发

本文目录 一、线程概述1.1 线程和进程的区别1.2 线程之间共享和非共享资源1.3 NPTL 二、线程操作2.1 pthread_create2.2 pthread_exit2.3 pthread_join2.4 pthread_detach2.5 patch_cancel2.6 pthread_attr 三、实战demo四、线程同步五、死锁六、读写锁七、生产消费者模型 一、…

python学opencv|读取图像(四十七)使用cv2.bitwise_not()函数实现图像按位取反运算

【0】基础定义 按位与运算&#xff1a;两个等长度二进制数上下对齐&#xff0c;全1取1&#xff0c;其余取0。按位或运算&#xff1a;两个等长度二进制数上下对齐&#xff0c;有1取1&#xff0c;其余取0。 按位取反运算&#xff1a;一个二进制数&#xff0c;0变1,1变0。 【1】…

初二回娘家

昨天下午在相亲相爱一家人群里聊天&#xff0c;今天来娘家拜年。 聊天结束后&#xff0c;开始准备今天的菜肴&#xff0c;梳理了一下&#xff0c;凉菜&#xff0c;热菜&#xff0c;碗菜。 上次做菜&#xff0c;粉丝感觉泡的不透&#xff0c;有的硬&#xff0c;这次使用开水浸泡…

“星门计划对AI未来的意义——以及谁将掌控它”

“星门计划对AI未来的意义——以及谁将掌控它” 图片由DALL-E 3生成 就在几天前&#xff0c;唐纳德特朗普宣布了“星门计划”&#xff0c;OpenAI随即跟进&#xff0c;分享了更多细节。他们明确表示&#xff0c;计划在未来四年内投资5000亿美元&#xff0c;在美国为OpenAI构建一…

内外网文件摆渡企业常见应用场景和对应方案

在如今的企业环境中&#xff0c;内外网文件摆渡的需求越来越常见&#xff0c;也变得越来越重要。随着信息化的不断推进&#xff0c;企业内部和外部之间的数据交换越来越频繁&#xff0c;如何安全、高效地进行文件传输成了一个关键问题。今天&#xff0c;咱就来聊聊内外网文件摆…