Vue中使用Tinymce-edtio

最新推荐文章于 2024-08-05 11:14:54 发布
最新推荐文章于 2024-08-05 11:14:54 发布
阅读量479 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41916216/article/details/103654909
版权
本文介绍了如何在Vue项目中使用Tinymce编辑器，包括资源下载、组件初始化、插件配置和图片上传。首先，通过npm或yarn安装tinymce-vue，并将必要资源复制到public或static目录。接着，注册并初始化组件，支持双向数据绑定。然后，导入并配置所需插件，自定义工具栏。最后，讲解了如何实现图片上传，利用images_upload_handler回调处理上传事件。
摘要由CSDN通过智能技术生成

Vue中使用Tinymec-edtio


Tinymce中文文档

一、资源下载

tinymce 官方为 vue 项目提供了一个组件 tinymce-vue
使用npm安装

npm install @tinymce/tinymce-vue -S
npm install tinymce -S

或 使用yarn安装

yarn add  @tinymce/tinymce-vue -S
yarn add  tinymce -S

安装完成之后将 node_modules 中的 tinymce/skins 复制到public目录下，外层包一个tinymce文件方便识别

如果是使用 vue-cli 3.x 构建的项目，就放到 public 目录下
如果是使用 vue-cli 2.x 构建的项目，就放到 static 目录下

由于tinymec 默认为英文界面，需要安装一个中文包，将这个语言包放在之前publicb下的tinymce文件
在这里插入图片描述

二、初始化组件

在页面中引入一下文

最低0.47元/天 解锁文章
优秀的大钊哥
关注
vue-tinymce-editor Vue2的Tinymce编辑器组件。-Vue.js开发
05-27
可以在此页面中查看演示和示例：演示和示例安装$ npm install vue-tinymce-editor如何使用从'vue'导入import Vue从'vue-tinymce-editor'导入tinymce Vue.component（'tinymce'， tinymce）您可以在标记中使用该组件 ...
vue3-tinymce-demo
02-26
通过npm或yarn可以添加`tinymce-vue`包，这是一个Vue组件化的TinyMCE版本，使得在Vue项目中使用变得更加简单。命令如下： ```bash npm install tinymce-vue --save # 或者 yarn add tinymce-vue ``` 集成过程中，...
vue使用tinyMce
lisa1219的博客
10-21 803
一.使用npm istall @tinymce/tinymce-vue，和 npm istall tinymce 二.tinymce-vue作为编辑器会生成tinmce的iframe，需要与tinymce组件配合使用 三.需要手动引入tinymce的自带插件，引入之后才能使用
Vue 中使用 Tinymce 富文本编辑器
Lyj的博客
04-07 3593
参考链接：https://www.cnblogs.com/wisewrong/p/8985471.html Tinymce : 从 word 粘贴过来还能保持绝大部分格式的编辑器 一. 下载 npm install tinymce -S 安装之后，在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 public 目录下 （...
vue中tinymce的使用
LJJONESEED的博客
11-15 1万+
vue中使用tinymce富文本编辑器 （我这里是vue2，vue3不是写在public下，具体的可以搜搜 看看） 3.在public中新建 tinymce 文件夹 把三个文件复制进去 4.在components文件夹中新建tinymce.vue （中文文件，自己去官网下载也可以，我这里下载下来的不能用，所以就用的这个） 5.使用 【如果用的elementui el-dialog 那么富文本编辑器的功能可能会被el-dialog覆盖，导致功能不能使用】 解决办法： 找到刚刚复制的skin.
tinymce在Vue中的使用
shiyanfangye的博客
08-21 5538
之前写vue项目时用过vue-quill-editor，但是这个编辑器太简单了，无法添加自己想要的样式，所以就重新封装了一个tinymce，可以粘贴源码，非常强大。步骤如下： 首先在index.html中引入 <script src="https://cdn.bootcss.com/tinymce/4.7.13/tinymce.min.js"></script>，这样就可...
vue+tinymce的封装与使用
weixin_73251435的博客
06-21 823
/ content_css: "/web-official-website-manage/skins/content/default/content.css", //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入。content_css: "/tinymce/skins/content/default/content.min.css", //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入。
vue3中使用tinyMCE
07-01
在Vue3中使用TinyMCE，我们可以利用其强大的功能并结合Vue的新特性，如Composition API和setup语法糖，来实现更加灵活和高效的组件化开发。 首先，我们来看一下如何在Vue3项目中安装和配置TinyMCE。在解压后的文件...
vue-easy-tinymce-一个简单而强大的软件包，用于在Vue.js项目中轻松使用tinymce。-Vue.js开发
05-27
vue-easy-tinymce一个简单而强大的软件包，用于在Vue.js项目中轻松使用tinymce。 功能v模型支持多实例编辑器支持vue-easy-tinymce一个简单而强大的软件包，可在Vue.js项目中轻松使用tinymce。 功能v模型支持多实例...
TinyMCE在vue中的使用
weixin_45313093的博客
11-02 915
安装之后在node_modules里面找到tiynmce文件，将里面的文件复制到根目录下的public或者assets文件夹下，这里我放在public里面的，如下图，删除多余的文件，这几个文件即可。利用mommoth将word文档内容先转化为html代码，再将html代码渲染到富文本编辑器内，这期间可能会导致部分样式流失，可以根据replace替换添加样式等。解决办法：在public的文件夹下面index.html文件里面引入tinymce.min.js文件。里面的langs文件是需要汉化的语言包，从。
TinyMce 中文手册 在线手册与下载
10-30
TinyMce 中文手册 在线手册与下载
【Vue】vue项目中使用tinymce富文本组件（@tinymce/tinymce-vue）
m0_61049675的博客
01-31 5232
除了以上的基本功能，TinyMCE编辑器还支持插件扩展，tinymce 通过添加插件plugins的方式来添加功能，在添加之前我们需要先来引入相应的插件，引入插件之后我们就可以在init中重新初始化下对应的toolbar（工具栏图标）和plugins（对应的插件组件）属性。powerpaste文件夹提取链接：https://pan.baidu.com/s/1Y7ziHe0Rgm2n5r1XcVEmNg。
【vue】 vue2 中使用 Tinymce 富文本编辑器
热门推荐
amoureux555的博客
04-12 2万+
【vue】 vue2 中使用 Tinymce 富文本编辑器
Vue使用tinymce富文本编辑器
qq_41154522的博客
07-13 349
下载依赖 引用依赖 内置方法 "dependencies": { "@tinymce/tinymce-vue": "^3.0.1", "tinymce": "~5.5.0", }, import tinymce from "tinymce/tinymce"; //tinymce默认hidden，不引入不显示 import Editor from "@tinymce/tinymce-vue"; import "tinymce/icons/default"; //富文本工具栏图标 im..
在Vue项目中使用tinymce富文本编辑器
服务员的博客
04-16 5489
这两个组件安装完之后，在public目录下新建文件夹tinymce，目录建好后，找到node_modules文件夹下的tinymce/skins目录，将skins目录复制到我们创建的tinymce文件夹内。安装之后，在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 public/tinymce 目录下。在刚才创建的static/tinymce文件夹内再新建langs文件夹，用来存放我们下载的中文语言包，如下图所示。多语言支持，官网可下载几十种语言。
在vue项目中使用富文本编辑器 - tinymce
永乐的博客
06-29 447
在vue项目中使用tinymce富文本编辑器。这款编辑器比较轻量级、界面简洁、功能丰富，主要是易扩展。
vue项目中使用 tinymce富文本编辑器
ljlhah的博客
06-04 2808
下载解压后是一个langs文件夹里面有zh_CN.js文件，将langs文件夹放在我们刚才新建的static/tinymce文件目录下与skins文件夹同级。2.在node_modules依赖，会出现tinymce，找到之后，复制以下四个文件，放入public目录下，用tinymce包着是个4个文件。注意：在v-model绑定的，于点击事件做是事，主要为了有个表单验证，以及去重验证。这是一个汉化版，，在最一开始时富文本是英文需要转为中文。
TINYMCE 实现CTRL+V粘贴图片并上传、WORD粘贴带图片
最新发布
weixin_52041354的博客
08-05 1238
嗯，这是一个好问题，主要还是很多网友反馈了这个问题，有很多网友还是大学生，平时对这块的技术也比较感兴趣，希望通过源代码能够学习这块的技术，对自己也是一个提高，还有一些是自由职业者，平时在网上接一些网站做，然后有些用户也有这个需求，大多数企业网站管理员都不太懂技术，或者也有上班的员工。目前发现很多企业都开始用tinymce，跟论坛和QQ群里面的网友沟通了一下，基本上都觉得tinymce还比较好用，而且一直在更新和维护，除了不是国产的以外，其它的都还不错，功能上也基本上都有，能够满足企业需求，使用也比较简单。
vue3 使用tinymce-vue
12-18
4. 在你的Vue组件中使用tinymce-vue组件。在template中，使用tinymce-vue组件的标签，并设置相应的属性： ```html v-model="content" :init="{ language: 'zh_CN', plugins: 'link image code', toolbar: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值