13.Vue中引入本地富文本编辑器TinyMCE | tinymce

最新推荐文章于 2024-06-02 13:27:20 发布
最新推荐文章于 2024-06-02 13:27:20 发布
阅读量2.3k 收藏 2
点赞数
分类专栏： # vue学习 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_41124751/article/details/106399357
版权
上次使用的是云端TinyMCE的API KEY一方面需要注册申请，另一方面好像有免费试用时间，不断搜罗，这次分享本地下载的方法1.进入首页链接首先点击左上角 Products 然后点击 Get Tinymce 进入下载界面2.进入后，点击Download 下载，如下图依次点击，将文件下载至本地3.返回至上一界面，下载中文，汉化包4.将已下载的文件解到指定一个文件夹，第一个下载的 tinymce 选择性解压，一直点击到图中路径5.将汉化包也粘贴到文件中，最...
摘要由CSDN通过智能技术生成

上次使用的是云端TinyMCE的API KEY  一方面需要注册申请，另一方面好像有免费试用时间，不断搜罗，这次分享本地下载的方法

1.进入首页 链接 首先点击左上角 Products 然后点击 Get Tinymce 进入下载界面

2.进入后，点击Download 下载，如下图依次点击，将文件下载至本地

 

3.返回至上一界面，下载中文，汉化包

 4.将已下载的文件解到指定一个文件夹，第一个下载的 ti

最低0.47元/天 解锁文章
天天yaya吖
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
tinymce本地引入集成demo以及使用版本是5+版本兼容低版本谷歌
02-27
inymce本地引入集成demo以及使用版本是5+版本兼容低版本谷歌，支持上传图片，支持粘贴word文档中的内容
VUE整合富文本编辑器Tinymce
01-07
一、Tinymce可视化编辑器 参考 https://panjiachen.gitee.io/vue-element-admin/#/components/tinymce https://panjiachen.gitee.io/vue-element-admin/#/example/create 二、组件初始化 Tinymce是一个传统...
TinyMCE富文本编辑器的使用
weixin_38673922的博客
03-28 1859
一、引入TinyMCE 1、获取自己的API密钥 地址 2、下载tinymce.min.js到本地 地址 3、下载汉化js zh_CN.js 放到 langs目录下 汉化包下载 4、引入 <script src="https://cloud.tinymce.com/5/tinymce.min.js?apiKey=官方申请的API_KEY"></script&g...
vue引入富文本框编辑器-tinymce.min.js库
最新发布
weixin_52830464的博客
06-02 255
1.在components目录下定义Tinymce组件。5. 在页面引入组件使用。
tinymce系列（二） tinymce 插件开发
Jioho的博客
01-08 3004
tinymce 插件开发环境搭建，插件目录规范，tinymce插件引入逻辑
免费JS富文本编辑器 总有一款会适合你
热门推荐
极客小俊
11-19 2万+
什么是富文本编辑器? 概述: javascript Text Editor ​ 我们平常在页面上写文章 或者 后台发布文章内容、或内容描述等、一直都是用的是富文本编辑器,包括很多论坛发帖的文字窗口也是典型的富文本编辑器, 它跟office中的word界面非常类似! 富文本编辑器的使用是与word非常类似的,所见即所得的排版方式,操作也与word类似，点击鼠标使用相应功能就行,对用户而言使用上相对比较简单，也比较容易进入状态! 如图 总的来说富文本编辑器就是一种基于JS并且可内嵌于web浏览器中所见即
tinymce系列（一） tinymce 环境搭建
Jioho的博客
10-23 5355
文章目录tinymce 环境搭建初始化目录结构使用 Rollup 运行，打包Rollup 打包效果新建 2 个插件，编写 rollup.config.jsrollup 配置 ES6 转 ES5rollup 配置 代码压缩添加 serve 和 热更新rollup 支持 less打包配置动态入口根据目录打包引入静态资源 和 清理旧资源最后 先介绍一下这个系类（tinymce），该系列以后相关的代码都会更新在 tinymce-plugins tinymce 是一个富文本插件。官网已经介绍的很清楚了 这个系列主要的
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
08-27
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码 在 Vue 项目中引入 tinymce 富文本编辑器需要完成以下几个步骤：资源下载、初始化、扩展插件。 资源下载 首先，需要下载 tinymce 的 Vue 组件 tinymce-vue，...
vue-tinymce 富文本编辑器自定义图片上传
11-24
vue-tinymce 封装了el-upload 控件，支持富文本编辑器自定义图片上传整合。 复制到vue的src/components文件夹下 详情博文介绍见：https://xingyun.blog.csdn.net/article/details/102492921
在vue中使用tinymce富文本编辑器
09-18
在Vue项目中集成TinyMCE富文本编辑器是一项常见的需求，尤其对于需要用户输入大量文本内容的应用来说。TinyMCE是一款强大的开源富文本编辑器，它提供了丰富的功能，如字体样式调整、插入图片、创建表格等，使得内容...
vue引入tinymce被拦截
qq_39572257的博客
10-31 1144
vue使用TinyMCE是unpkg.com被拦截
如何在Vue里使用“tinymce”富文本编辑器
weixin_46683455的博客
09-25 3015
Vue里使用功能强大的‘tinymce’富文本编辑器 tinymce是国外的一款富文本编辑器，开源可商用，免费免费免费！！！插件丰富、可扩展性强、界面好看、提供经典、内联、沉浸无干扰三种模式、对标准支持优秀（自v5开始）、多语言支持都是对他的描述！ 一、废话不多说，关于其他对tinymce的介绍大家自行查询，下面直接开始使用。 npm i tinymce (使用npm包管理工具先下载)； 下载好了后在node_modules里会看到如下结构； 下载语言文件，如果你的下载下来的包里已经有了langs这
vue.js引入tinymce富文本编辑器
diaogudu0817的博客
03-22 457
在官网下载tinymce生产用法所需要的全部文件； https://www.tinymce.com/ 在index.html文件中引入tinymce.min.js文件；<script src="static/tinymce/tinymce.min.js"></script> 将tinymce插件内所有文件复制至项目中static文件夹内； 在项目内...
Tinymce的使用，下载包到本地方式
qq_43467284的博客
01-04 1735
本地使用tinymce富文本编辑器，完整的使用方式，包括汉化、自定义图标、上传图片视频、打包后找不到文件的相关配置等
vue本地引入TinyMCE富文本编辑器
weixin_42029873的博客
02-16 1106
vue本地引入TinyMCE
TinyMCE用法
qq_31971935的博客
03-24 5434
1、将相关文件放置项目中 2、界面引用tinymce.min.js 3、界面标签 加载组件中… 4、js初始化tinymce property.addVm = new Vue({ ...
tinymce-vue使用本地tinymce依赖解决方案
D_wang1的博客
05-12 915
tinymce-vue使用本地tinymce依赖。 汉化包使用 我们需要修改这四个文件中的地址。
富文本 tinymce.js（version: 5.4.0）的使用实践
上海小宋的博客
08-30 570
但是，true条件确实捕获了Tab键并将其包含在可编辑区域中，而当设置为falseTab键的默认状态时，按下该键会将光标移动到下一个可编辑区域（例如，当前页面上的浏览器网址栏或表单字段） ）。请务必注意，这不会更改菜单和工具栏控件的行为， 当nonbreaking_force_tabvalue 为时，菜单和工具栏控件将继续插入单个实体true。该函数应该有一个参数，该参数是对正在设置的编辑器的引用。注： imagetools_cors_hosts在不使通过这个插件时，需要TinyMCE的云。......
vue 项目中引入 tinymce 富文本编辑器
05-24
要在 Vue 项目中使用 tinymce 富文本编辑器，需要以下步骤： 1. 安装 tinymce 在终端中运行以下命令来安装 tinymce： ``` npm install tinymce --save ``` 2. 引入 tinymce 在需要使用富文本编辑器的组件中，引入 tinymce： ``` import tinymce from 'tinymce/tinymce' import 'tinymce/themes/silver/theme' import 'tinymce/plugins/paste' ``` 3. 编写模板 在模板中，使用 `v-model` 指令来绑定富文本编辑器的内容： ``` <template> <div> <textarea v-model="content"></textarea> </div> </template> ``` 4. 初始化 tinymce 在组件的 `mounted` 钩子中，初始化 tinymce： ``` mounted() { tinymce.init({ selector: 'textarea', plugins: ['paste'], toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code', height: 500, setup: editor => { editor.on('init', () => { editor.setContent(this.content) }) editor.on('input', () => { this.content = editor.getContent() }) } }) } ``` 在 `selector` 中指定需要绑定富文本编辑器的元素，这里是 `textarea`。`plugins` 和 `toolbar` 分别指定需要加载的插件和工具栏按钮。`height` 指定编辑器的高度。`setup` 中的代码用来监听编辑器的 `init` 事件和 `input` 事件，实现内容的双向绑定。 5. 销毁 tinymce 在组件的 `beforeDestroy` 钩子中，销毁 tinymce： ``` beforeDestroy() { tinymce.remove() } ``` 这样就可以在 Vue 项目中使用 tinymce 富文本编辑器了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值