TinyMCE的使用
项目使用 vue-cli 3.x 版本,tinymce 5
1、npm install tinymce -S
2、npm install @tinymce/tinymce-vue
3、public 文件夹下新建文件夹 tinymce ,在 node_modules 中找到 tinymce/skins 目录,然后将 skins 目录拷贝到 tinymce 目录下 ,
4、还需要下载一个中文语言包 (https://www.tiny.cloud/get-tiny/language-packages/),然后将这个语言包放到 tinymce - lang 目录下
5、components 中注册 tinymce-vue 组件
<template> <div><!--给editor加key是因为给tinymce keep-alive以后组件切换时tinymce编辑器会显示异常,在activated钩子里改变key的值可以让编辑器重新创建--><editor id="tinymceEditor" :init="tinymceInit" v-model="content" :key="tinymceFlag"></editor><Uploadmultipleref="imageUpload"action="//jsonplaceholder.typicode.com/posts/":on-success="insertImage"style="display:none"></Upload> </div> </template> <script> import tinymce from 'tinymce/tinymce' import 'tinymce/themes/silver/theme' import Editor from '@tinymce/tinymce-vue'import 'tinymce/plugins/textcolor' import 'tinymce/plugins/advlist' import 'tinymce/plugins/table' import 'tinymce/plugins/lists' import 'tinymce/plugins/paste' import 'tinymce/plugins/preview' import 'tinymce/plugins/fullscreen'export default {name: 'TinymceEditor',components: {'editor': Editor},data () {return {tinymceFlag: 1,tinymceInit: {},content: '本地图片上传功能仅为演示,实际使用需要补全图片存储地址'}},methods: {// 插入图片至编辑器 insertImage (res, file) {let src = '' // 图片存储地址tinymce.execCommand('mceInsertContent', false, `<img src=${src}>`)}},created () {const that = thisthis.tinymceInit = {skin_url: '/tinymce/skins/ui/oxide',language_url: `/tinymce/langs/zh_CN.js`,language: 'zh_CN',height: document.body.offsetHeight - 300,browser_spellcheck: true, // 拼写检查branding: false, // 去水印// elementpath: false, //禁用编辑器底部的状态栏statusbar: false, // 隐藏编辑器底部的状态栏paste_data_images: true, // 允许粘贴图像menubar: false, // 隐藏最上方menuplugins: 'advlist table lists paste preview fullscreen',toolbar: 'fontselect fontsizeselect forecolor backcolor bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | imageUpload quicklink h2 h3 blockquote table numlist bullist preview fullscreen',/*** 下面方法是为tinymce添加自定义插入图片按钮* 借助iview的Upload组件,将图片先上传到存储云上,再将图片的存储地址放入编辑器内容*/setup: (editor) => {editor.ui.registry.addButton('imageUpload', {// text: '插入图片',tooltip: '插入图片',icon: 'image',onAction: () => {let upload = that.$refs.imageUploadupload.handleClick()}})}}},activated () {this.tinymceFlag++},mounted () {} } </script>
6、视图组件中 引入 <tinymce-editor /> 组件
<tinymce-editor /> import TinymceEditor from '../../components/tinymce-editor/tinymce-editor'components: {TinymceEditor},
转载于:https://www.cnblogs.com/slightFly/p/11302908.html
TinyMCE的使用相关推荐
- TinyMCE的使用-安装
TinyMCE安装非常简单,它可以被初始化为<form>标签中的<textarea>,当提交表单时,TinyMCE编辑器的内容将作为<form>表单的一部分被提交. ...
- vue 集成富文本tinymce
开发环境 1. vscode 开发语言 1. vue 2. javaScript 插件安装 1. npm install tinymce -S 2. 可以使用里面的文件, 下载后可以在node_mod ...
- 【Joomla】TinyMCE - Add custom styles
前言 使用 TinyMCE 编写文章时经常需要定义很多样式,如果每次都手工编辑的话,一方面工作量大,另一方面也容易造成格式的不统一.好在 TinyMCE 提供了添加自定义样式的功能,不过使用起来却不那 ...
- 关于tinymce的一些记事
之前能看的懂一部分英文,但是总是没有全局观,以至于我之前使用tinymce一直都有一些疑问:那就是为什么我在tinymce初始化中添加了比如字体,字体大小等设置按钮,但是为什么在前 台没有办法现实出来 ...
- TinyMCE 4.0b1 发布,全新设计和 API
TinyMCE 4.0 首个 Beta 版本发布了,该版本重写了整个 API 和所有插件.皮肤等.我们将尽快提供移植问题,尽管该版本部分兼容 3.x,我们还将在接下来几周内对所有插件.选项进行文档描述 ...
- 常用的富文本框插件FreeTextBox、CuteEditor、CKEditor、FCKEditor、TinyMCE、KindEditor ;和CKEditor实例...
目前市面上用的比较多的富文本编辑器有: FreeTextBox 一个有很多年历史的富文本编辑器了,使用简单,而且一般的使用是免费的,但是不开源,上传图片上传附件等功能没有,扩展性差. CuteEdit ...
- tinyMce在线编辑器内JavaScript实现按Ctrl+S无刷新保存
以前也用过几个编辑器拉,如FCK,CUTEDTOR等,它们大都实现了很不错了的功能,也有丰富的插件使用.不过我还是觉得TinyMCE在线编辑器好用,它是采用纯JS客户端脚本技术构建,是一个轻量级加载速 ...
- php+ tinymce粘贴word
最近公司做项目需要实现一个功能,在网页富文本编辑器中实现粘贴Word图文的功能. 我们在网站中使用的Web编辑器比较多,都是根据用户需求来选择的.目前还没有固定哪一个编辑器 有时候用的是UEditor ...
- php中禁用下拉框,php – Tinymce,禁用numlist下拉列表
我找了很久以后的解决方案-- >加载原始插件 >定义没有'bullist'的工具栏,但是使用你自己的按钮'mylist' >定义按钮'mylist',它将调用原始插件函数(从原始列表 ...
最新文章
- str函数和repr函数的区别
- Angular.js 最强学习资源合集
- nginx rewrite
- 其实你女朋友也不是很爱你...
- 启动服务器如何删除文件,在服务器启动时用Filter来删除某种类型的文件
- 转:HTML错误编号大全
- git rebase 变基
- 学计算机用16g内存,说出去就是个笑话,两万多电脑内存才16G,我认为这配置不合理!...
- 堆排序(Heapsort)-全网最详细
- 40 if 虚拟条件句(虚拟语气)假设现在
- 坚果pro2刷回官方_锤子坚果Pro2手机降回6.0.3版本教程
- win10 网络重置
- 住宅ip代理和数据中心代理的区别是什么?
- 强推!阿里数据科学家一次讲透数据中台
- Linux中的基础指令
- 指纹识别 python实现_Python语言之指纹识别是目前最成熟的识别技术!Python能分分钟做出一个来!...
- 2020.8.31,文书网又更新啦,这次直接加入了登录后才能查看。
- Unity Asset Store精品Low Poly风格素材资源合集
- IT“咏叹调”之--你公司哪个部门是“老大”?
- iPhone 13如何显示电量百分比?详细教程
热门文章
- 04. 字符串合并与拆分写法小结
- 工信部提醒:用户及时设置 SIM 卡密码,丢失手机后第一时间挂失
- Win10 KB4541335 部分用户遭遇系统蓝屏/性能下降问题
- C++ 中在函数的前面加上static的作用
- file的open()和read()
- ipc620中文版最新版本_(一)Windows10 家庭中文版Docker安装 搭建docker开发环境
- php chilkat.certstore,angularjs实现冒泡排序算法的可视化
- php连接redis 主从复制,redis怎么进行主从复制
- php面向对象分页,PHP基于面向对象封装的分页类示例
- contos7设置固定ip和dns_CentOS7 修改设置静态IP和DNS