tinymce富文本编辑器(vue)
TinyMC编辑器简介
TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。跟其他富文本编辑器相比,有着丰富的插件,支持多种语言,能够满足日常的业务需求并且免费。
TinyMCE的优势:
开源可商用,基于LGPL2.1
插件丰富,自带插件基本涵盖日常所需功能
接口丰富,可扩展性强,有能力可以无限拓展功能
界面好看,符合现代审美
提供经典、内联、沉浸无干扰三种模式(详见“介绍与入门”)
对标准支持优秀(自v5开始)
多语言支持,官网可下载几十种语言。
下图为开启全部功能的截图
TinyMCE中文文档地址:TinyMCE中文文档中文手册
1、安装
vue-cli版本:3.x+
安装tinymce
npm install tinymce -S
安装tinymce-vue
npm install @tinymce/tinymce-vue -S
这两个组件安装完之后,在public目录下新建文件夹static/tinymce,目录建好后,找到node_modules文件夹下的tinymce/skins目录,将skins目录复制到我们创建的static/tinymce文件夹内,如下图所示
vue-cli版本:2.x
安装tinymce
npm install tinymce -S
安装tinymce-vue
npm install @tinymce/tinymce-vue@3.0.1 -S
安装之后,在 node_modules 中找到 tinymce/skins 目录,然后将 skins 目录拷贝到 static 目录下
注意: 如果是使用 vue-cli 3.x 构建的 typescript 项目,就放到 public 目录下,文中所有 static 目录相关都这样处理
tinymce 默认是英文界面,所以还需要下载一个中文语言包
然后将这个语言包放到 static 目录下,为了结构清晰,我包了一层 tinymce 目录
这个是vue-cli2项目的放法
这个是vue-cli3项目的放法
2、配置中文语言
到官网下载中文语言包 zh_CN.js
在刚才创建的static/tinymce文件夹内再新建langs文件夹,用来存放我们下载的中文语言包,如下图所示
vue-cli2.x 同理
3.组件
<template><!-- 富文本 --><div><editor v-model="content" :init="init" :disabled="disabled"></editor></div>
</template><script>
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/icons/default/icons";
import "tinymce/themes/silver";
import "tinymce/plugins/image";
import "tinymce/plugins/media";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/contextmenu";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/colorpicker";
import "tinymce/plugins/textcolor";
import "tinymce/plugins/preview";
import "tinymce/plugins/code";
import "tinymce/plugins/link";
import "tinymce/plugins/advlist";
import "tinymce/plugins/codesample";
import "tinymce/plugins/hr";
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/textpattern";
import "tinymce/plugins/searchreplace";
import "tinymce/plugins/autolink";
import "tinymce/plugins/directionality";
import "tinymce/plugins/visualblocks";
import "tinymce/plugins/visualchars";
import "tinymce/plugins/template";
import "tinymce/plugins/charmap";
import "tinymce/plugins/nonbreaking";
import "tinymce/plugins/insertdatetime";
import "tinymce/plugins/imagetools";
import "tinymce/plugins/autosave";
import "tinymce/plugins/autoresize"; export default {components: {Editor},props: {value: {type: String,default: ""},disabled: {type: Boolean,default: false},plugins: {type: [String, Array],default:"preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr nonbreaking insertdatetime advlist lists wordcount imagetools textpattern autosave autoresize"},toolbar: {type: [String, Array],default:"code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link codesample | alignleft aligncenter alignright alignjustify outdent indent formatpainter | \styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \table image media charmap hr pagebreak insertdatetime | fullscreen preview"}},data() {return {//初始化配置init: {//menubar: true, // 菜单栏显隐language_url: "/static/tinymce/langs/zh_CN.js",//language_url: '../../static/tinymce/langs/zh_CN.js', // vue-cli2.xlanguage: "zh_CN",skin_url: "/static/tinymce/skins/ui/oxide",//skin_url: '../../static/tinymce/skins/ui/oxide', // vue-cli2.x//content_css: '../../static/tinymce/skins/content/default/content.css',// vue-cli2.xheight: 770,min_height: 770,max_height: 770,toolbar_mode: "wrap",plugins: this.plugins,toolbar: this.toolbar,content_style: "p {margin: 5px 0;}",fontsize_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px",font_formats:"微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;",branding: false,// 图片上传images_upload_handler: (blobInfo, success, failure) => {// const img = 'data:image/jpeg;base64,' + blobInfo.base64()// success(img)const formData = new FormData()formData.append('file', blobInfo.blob())reserveTableFoodDescribe(formData).then(res => {if (res.code === '10000') {const file = res.datasuccess(file.url)return}failure('上传失败')}).catch(() => {failure('上传出错')})}},content: this.value};},mounted() {tinymce.init({});},methods: {},watch: {value(newValue) {this.content = newValue;},content(newValue) {this.$emit("input", newValue);}}
};
</script>
<style scoped lang="scss">
</style>
4.组件使用
import Editor from "@/components/imcoder-tinymce";
components: { Editor },
<editor v-model="yourContent"></editor>
5.配置工具项
TinyMCE菜单配置详解
tinymce富文本编辑器(vue)相关推荐
- vue 是否有word编辑控件_GitHub - C84882428/editor-ui: vue集成 tinymce 富文本编辑器,增加导入 word 模板...
editor-ui vue 集成 tinymce 富文本编辑器 自定义 tinymce 富文本编辑器, 在原来的编辑器中增加上传 word 模板 最终展示效果: 主要代码: 整体思路: 1,在编辑器原 ...
- tinymce--一款非常好用的富文本编辑器 VUE如何集成tinymce编辑器
博客(coder的自我修养)原文链接:tinymce--一款非常好用的富文本编辑器 vue集成tinymce编辑器 - coder的自我修养 TinyMC编辑器简介 TinyMCE是一款易用.且功能强 ...
- tinymce富文本编辑器的使用
tinymce富文本编辑器的使用 1.基本介绍 tinymce富文本官网:https://www.tiny.cloud/ 中文文档:http://tinymce.ax-z.cn/ tinymce-np ...
- tinymce富文本编辑器扩展插件-设置段落间距
项目中使用到tinymce富文本编辑器,由于官方并没有设置段落间距插件,所以自己开发了一个段落间距扩展插件.可以将其配置为toolbar,也可以配置成菜单项. 使用方法: 方式一: 1. 使用npm安 ...
- 在vue3.0项目中使用tinymce富文本编辑器
目录 一.安装 二.完整代码 三.事项说明 四.参考文档 之前看了好几篇关于 vue项目中使用 tinymce的文章, import引入大量 tinymce插件, /node_modules/ti ...
- tinymce富文本编辑器的视频插件如何上传本地视频
最近使用了tinymce富文本编辑器的视频上传功能,发现默认只能填写视频链接,不能上传本地的视频.为此,我专门研究下如何上传本地视频. 版本:tinymce版本是^5.0.16,@tinymce/ti ...
- Layui 使用 TinyMCE 富文本编辑器
Layui 使用 TinyMCE 富文本编辑器 Layui 使用 TinyMCE 富文本编辑器 1.进入 Layui 第三方组件平台下载该拓展组件 2.写一个测试 Demo 3.调用 TinyMCE ...
- TinyMCE富文本编辑器自动链接插件 AutoLink配置
TinyMCE富文本编辑器 AutoLink 插件默认是不支持全角字符的,意味着你就算是全角字符,也必须要在字符后面跟随一个空格,然后再跟随网址,这时候地址才会自动转换为超链接 a 标签 通过如下设置 ...
- Tinymce富文本编辑器图片上传即编辑配置详解
Tinymce富文本编辑器 本站使用的也是Tinymce富文本编辑器,非常的好用,就是图片上传和编辑配置上有点麻烦,当时没有看完Tinymce官网的资料,导致浪费了点时间,下面就把图片上传的配置分享给 ...
- tinymce富文本编辑器做评论区
今天分享一下tinymce富文本编辑器做评论区的全过程. 文章目录 一.介绍 1.最终效果 2.功能介绍 3.主要项目包版本介绍: 二.每个功能的实现 1.自定义toolbar的功能区 ①对应的样式以 ...
最新文章
- linux openssl 反弹加密 shell
- linux操作mysql的语法_MySQL数据库的基本操作命令
- 方案接口服务器问题记录
- 深入理解JVM—性能调优
- input file的默认value清空与赋值方法
- python中until函数_等待应用程序窗口:python中的pywinauto.timings.WaitUntilPasses
- R语言统计分布及模拟
- spark读写hive数据
- 如何让您的应用程序进入苹果App Store?(上)
- mysql主从同步完整命令
- Jaunt和Dolby联手,为VR视频带来更带感的全景声场体验
- CodeForces - 816A Karen and Morning 解题
- 倍福RS232模块EL6002使用教程及注意事项
- 油管歌曲视频下载 视频转MP3
- 【寒江雪】Go实现状态模式
- 面完18家大厂的算法岗位,吐血整理了一个面经!
- Python-懒人必备-语音小助手
- Unity 下拉列表OnValueChanged
- react 三种通信方式(父传子、子传父、兄弟传值)
- 微信小程序学习之路——浮动与定位