tinymce-vue富文本编辑器(翻译)
官方Tinymce Vue组件
翻译来自:https://github.com/tinymce/tinymce-vue
官方文档:https://www.tiny.cloud/docs/general-configuration-guide/basic-setup/
关于
这个包是一个围绕Tinymce的薄包装,以便于在Vue应用程序中使用。要快速演示,请查看storybook。
用法
加载组件
首先,你必须加载组件,你如何做取决于你开发的应用程序是如何设置的。如果您使用某种捆绑加载程序(如Webpack、Rollup或Browserify),则可以按如下方式添加导入
// es modules
import Editor from '@tinymce/tinymce-vue';
// commonjs require
// NOTE: default needed after require
var Editor = require('@tinymce/tinymce-vue').default;
如果您不使用模块加载程序,只需将javascript文件导入添加到HTML文件中,则必须将npm包的lib/browser文件夹中的tinymce-vue.min.js文件复制到应用程序中,并添加如下内容:
<script src="path/to/tinymce-vue.min.js"></script>
然后可以将编辑器添加到app的组件属性中:
// This might look different depending on how you have set up your app
// but the important part is the components property
var app = new Vue({
el: '#app',
data: { /* Your data */ },
components: {
'editor': Editor // <- Important part
},
methods: { /* Your methods */}
})
在模板中使用组件
在模板中使用编辑器,如下所示:
<editor api-key="API_KEY" :init="{plugins: 'wordcount'}"></editor>
配置编辑器
这个编辑器接受下列的 props:
disabled
: 使用这个获取布尔值的属性,您可以动态地将编辑器设置为“禁用”只读模式或正常可编辑模式。
id
: 编辑器的ID,以便您以后可以使用tinymce上的tinymce.get(“id”)方法获取实例,默认为自动生成的UUID。
init
: 对象发送到用于初始化编辑器的tinymce.init方法。
initial-value
: 将用其初始化编辑器的初始值。
inline
: 设置编辑器应内联的简写,<editor inline></editor>与设置相同{inline: true} 在init中。
tag-name
: 仅当编辑器是内联的、决定要在哪个元素上初始化编辑器时使用,默认为DIV。
plugins
: 设置要使用的插件的简写,<editor plugins="foo bar"></editor>与设置相同{plugins: 'foo bar'}在初始化中
toolbar
: 设置要显示的工具栏项的简写,<editor toolbar="foo bar"></editor>与设置相同{toolbar: 'foo bar'}
在初始化中
model-events
: 更改要触发v-model事件的事件,默认为'change keyup'
api-key
: Api key 对于TinyMCE cloud, 更多信息如下。
cloud-channel
: Cloud channel 对于TinyMCE Cloud, 更多信息如下。
组件工作不需要任何配置属性-除非您使用Tinymce Cloud,否则您必须指定API密钥才能摆脱This domain is not registered…警告消息。
v-model
您还可以使用编辑器上的v-model指令(VueJS文档中的更多信息)创建双向数据绑定:
<editor v-model="content"></editor>
事件绑定
可以通过编辑器上的 属性 绑定编辑器事件,例如:
<editor @onSelectionChange="handlerFunction"></editor>
以下是可用事件的完整列表:
All available events
onActivate
onAddUndo
onBeforeAddUndo
onBeforeExecCommand
onBeforeGetContent
onBeforeRenderUI
onBeforeSetContent
onBeforePaste
onBlur
onChange
onClearUndos
onClick
onContextMenu
onCopy
onCut
onDblclick
onDeactivate
onDirty
onDrag
onDragDrop
onDragEnd
onDragGesture
onDragOver
onDrop
onExecCommand
onFocus
onFocusIn
onFocusOut
onGetContent
onHide
onInit
onKeyDown
onKeyPress
onKeyUp
onLoadContent
onMouseDown
onMouseEnter
onMouseLeave
onMouseMove
onMouseOut
onMouseOver
onMouseUp
onNodeChange
onObjectResizeStart
onObjectResized
onObjectSelected
onPaste
onPostProcess
onPostRender
onPreProcess
onProgressState
onRedo
onRemove
onReset
onSaveContent
onSelectionChange
onSetAttrib
onSetContent
onShow
onSubmit
onUndo
onVisualAid
加载 TinyMCE
Auto-loading from TinyMCE Cloud
编辑器组件需要Tinymce全局可用,但为了尽可能简单,如果在组件安装后找不到Tinymce可用,它将自动加载 TinyMCE Cloud .为了摆脱This domain is not registered... 警告.注册云并按如下方式输入API密钥:
<editor api-key='YOUR_API_KEY' :init="{/* your settings */}>"</editor>
您还可以定义要使用的云通道,有关不同版本的详细信息,请参见 文档.
Loading TinyMCE by yourself
要选择不使用Tinymce云,您必须让Tinymce自己在全球范围内可用。这可以通过自己托管tinymce.min.js文件并向HTML添加脚本标记来完成,或者,如果使用模块加载程序,则可以使用NPM安装tinymce。或者有关如何让Tinymce使用模块加载程序的信息,请参阅文档中的此页。
tinymce-vue富文本编辑器(翻译)的更多相关文章
- Vue CLI 3+tinymce 5富文本编辑器整合
基于Vue CLI 3脚手架搭建的项目整合tinymce 5富文本编辑器,vue cli 2版本及tinymce 4版本参考:https://blog.csdn.net/liub37/article/ ...
- vue+富文本编辑器UEditor
vue+富文本编辑器UEditor 昨天的需求是把textarea换成富文本编辑器的形式, 网上找了几种富文本编辑器ueditor.tinymce等, 觉得ueditor实现双向绑定还挺有意思, 分享 ...
- TinyMCE(富文本编辑器)
[转]TinyMCE(富文本编辑器)在Asp.Net中的使用方法 官网演示以及示例代码:https://www.tinymce.com/docs/demo/image-tools/ 转自:http:/ ...
- TinyMCE(富文本编辑器)在Asp.Net中的使用方法
TinyMCE(富文本编辑器)在Asp.Net中的使用方法 转至:http://www.cnblogs.com/freeliver54/archive/2013/02/28/2936506.htm ...
- 【转】TinyMCE(富文本编辑器)
效果预览:http://www.tinymce.com/tryit/full.php [转]TinyMCE(富文本编辑器)在Asp.Net中的使用方法 转自:http://www.cnblogs.co ...
- 15、Vue CLI 3+tinymce 5富文本编辑器整合
富文本编辑器里大佬们都说tinymce NB! 插件安装 inymce官方提供了一个vue的组件tinymce-vue 如果有注册或购买过服务的话,直接通过组件配置api-key直接使用,懒的注册或者 ...
- vue 富文本编辑器 项目实战用法
1.挑个富文本编辑器 首先针对自己项目的类型,确定自己要用啥编辑器. 1.1 wangeditor 如果一般类似博客这种项目不需要花里胡哨的,功能也不要求贼多的,推荐一下wangeditor(点击跳转 ...
- vue富文本编辑器vue-quill-editor使用总结(包含图片上传,拖拽,放大和缩小)
vue-quill-editor是vue很好的富文本编辑器,富文本的功能基本上都支持,样式是黑白色,简洁大方. 第一步下载 vue-quill-editor: npm i vue-quill-edit ...
- Vue富文本编辑器(图片拖拽缩放)
富文本编辑器(图片拖拽缩放) 需求: 根据业务要求,需要能够上传图片,且上传的图片能在移动端中占满屏幕宽度,故需要能等比缩放上传的图片,还需要能拖拽.缩放.改变图片大小.尝试多个第三方富文本编辑器,很 ...
- vue富文本编辑器vue-quill-editor
1.下载Vue-Quill-Editor npm install vue-quill-editor --save 2.下载quill(Vue-Quill-Editor需要依赖) npm install ...
随机推荐
- react——获取数据ajax()、$.ajax()、fetch()、axios
ajax() import React from 'react'; import ReactDom from 'react-dom'; import ajax from './tool.js'; cl ...
- mongodb 系列 ~ mongo的两种引擎介绍对比
一 简介 两种引擎方式的对比二 对比与说明 1 版本支持 MMAP引擎 3.2版本之前,默认引擎 WT 引擎 3.2版本之后,默认引擎 2 并发性能(核心) M ...
- 20165234 2017-2018-2《Java程序设计》课程总结
2017-2018-2<Java程序设计>课程总结 一.作业链接汇总 每周作业链接 预备作业一:我期望的师生关系 预备作业二:学习基础和C语言基础调查 预备作业三:Linux安装及学习 第 ...
- 【转载】AutoML--超参数调优之Bayesian Optimization
原文:Auto Machine Learning笔记 - Bayesian Optimization 优化器是机器学习中很重要的一个环节.当确定损失函数时,你需要一个优化器使损失函数的参数能够快速有效 ...
- 基于keepalived搭建MySQL热机集群
背景 MySQL的高可用方案一般有如下几种: keepalived+双主,MHA,MMM,Heartbeat+DRBD,PXC,Galera Cluster 比较常用的是keepalived+双主,M ...
- EasyGui的一个小例子
EasyGui的安装:首先下载easyGui安装包,地址链接:https://pan.baidu.com/s/1D8f_eXWn7l8xhcTuEsqZmA 密码:e5z5 安装步骤: 1.进入eas ...
- CentOS 7 安装配置 Vsftpd
https://blog.imzhengfei.com/centos-an-zhuang-pei-zhi-vsftpd/ vsftpd 是“very secure FTP daemon”的缩写,是一款 ...
- WC2019 20天训练
Day -1 2019.1.2 初步计划: 0x60 图论 std 洛谷提高剩余练习 NOIP2018遗留题解 洛谷省选基础练习 数学: 1.数论 2.组合数学(练习:莫比乌斯反演) 3.概率(练习: ...
- 编程基础 - 0x00008 的0x代表什么?
总结: 二进制:0dXXXX 八进制:0XXXX 十六进制:0xXXXX ------------------------------- 1- 十六进制 以“0x”开始的数据表示16进制,计算机中每位 ...
- Nginx range filter模块数字错误漏洞修复 (Nginx平滑升级) 【转】
对线上生产环境服务器进行漏洞扫描, 发现有两台前置机器存在Nginx range filter模块数字错误漏洞, 当使用nginx标准模块时,攻击者可以通过发送包含恶意构造range域的header ...