TinyMCE是一个功能齐全,时尚和直观的富文本编辑器,免费版的插件已能满足大部分业务场景的需要。 前言 TinyMCE官方提供了在vue中使用TinyMCE的包:@tinymce/tinymce-vue,但是不太好用,编辑器资源是通过CDN引入的,加载慢且需要网络连接,且vue2版本对应的TinyMCE版本过低。 因此需要手动封装一个供vue2使用的编辑器
TinyMCE中文文档地址: http://tinymce.ax-z.cn/ 1.安装TinyMCE $npm install tinymce@5.2.0 -S $npm install @tinymce/tinymce-vue@3.0.1 -S 2.将node_modules/tinymce 文件夹下的plugins文件夹和skins文件夹直接复制到 public/tinymce目录下 3.引入汉语包 在plublic/tinymce文件夹下创建langs文件夹,并在...
npm i tinymcenpm i @tinymce/tinymce-vue 2.创建Editor.js文件 封装组件 以便使用 <template> <editor v-model="myValue" :init="init" :disabled="disabled" @onClick="onClick"> </editor> </template> import tinymce from 'tinymce/tinymce' import Editor from '@tinymce/tinymce-vue' import Api...
import 'tinymce/plugins/preview' // 预览 import 'tinymce/plugins/hr' // 水平线 import 'tinymce/plugins/anchor' import 'tinymce/plugins/pagebreak' // import 'tinymce/plugins/spellchecker' //拼写检查,未加入汉化,不建议使用 import 'tinymce/plugins/searchreplace' import 'tinymce/plugins/visualblocks'...
在Vue2中使用TinyMCE富文本编辑器，可以通过以下步骤进行：下载TinyMCE文件：下载最新版本的TinyMCE。只拷贝content.css文件到public目录，以避免增加Git仓库体积。下载中文翻译文件，并将其解压到/public目录中。创建Vue组件：在components目录下创建一个公用编辑器组件。在组件中导入TinyMCE所需的依赖文件，包括...
在寻找 TinyMCE 的官方中文文档以及与 Vue 2 的集成方法时,我发现 TinyMCE 官方并没有提供专门的中文文档,但可以通过一些中文资源或者英文文档结合翻译工具来理解其使用。以下是一些关于如何在 Vue 2 中集成 TinyMCE 的步骤和注意事项: 1. 安装 TinyMCE 和相关依赖 首先,你需要在你的 Vue 2 项目中安装 TinyMCE ...
在Vue2项目中引入Tinymce的步骤如下: 1、安装Tinymce和@tinymce/tinymce-vue: shell npm install tinymce@5.1.0 -S npm install @tinymce/tinymce-vue@3.0.1 -S 2、在public目录下创建一个文件夹,将node_modules目录下的tinymce/skins目录复制到该文件夹下。这是因为在Tinymce的配置中需要指定skins目录的路径。
在Vue.js 2中使用TinyMCE,你可以通过以下步骤完成集成: 1 首先,你需要安装TinyMCE。你可以通过以下方式之一来安装: 1 在你的HTML文件中引入TinyMCE的CDN链接: 1 如果你使用npm,可以通过以下命令安装TinyMCE: npm 1 创建一个Vue组件来包装TinyMCE编辑器: <template> <textarea:id="editorId"></textarea> ...
本组件使用的是 "tinymce": "^5.1.0", "vue-tinymce-editor": "^1.6.2", 一、安装 npm install tinymce --save npm install vue-tinymce-editor 二、全局注册组件 main.js 中引入 import tinymce from "vue-tinymce-editor"; import "../static/tinymce/langs/zh_CN.js"; 之所以在这里引入语言包,是因...
TinyMCE 四个常见配置选项: 选择器配置(必需) 插件配置 工具栏配置 菜单和菜单栏配置 选择器配置 tinymce.init({ selector:'textarea',// 指定页面上通过 TinyMCE 进行编辑的元素 可以匹配id: selector: 'textarea#default' // 将可编辑区域的宽度和高度(以像素为单位)设置为数值 ...