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 ...
随机推荐
- 20165234 《Java程序设计》第二周课下作业
1. 教材代码完成情况测试P14 把100改为自己的后四位学号,编译运行Kernighan.java 代码的功能是从给定一个数字,实现从1依次加到此数的和. 如下是我用命令行实现代码的编译与运行. 2 ...
- hsf
参考文章: ----- 架构和框架的区别 1.HSF源码剖析 2.Http和RPC区别 3.分布式服务框架HSF 4.高并发架构系列:如何从0到1设计一个类Dubbo的RPC框架 5.HSF的原理分析 ...
- [转] 多核CPU 查看进程分配的CPU具体核id
转自:https://linux.cn/article-6307-1.html ps. 方法二简明直接 done! 当你在 多核 NUMA 处理器上运行需要较高性能的 HPC(高性能计算)程序或非常消 ...
- [转] python运行时内存分析工具meliae
转自:https://my.oschina.net/markco/blog/601773 利用meliae来监控python进程的内存占用情况 meliae是一个python进程内存占用监控.分析工具 ...
- SpringCloud Config(分布式配置中心)
⒈是什么? Spring Cloud Config分为服务端和客户端两部分. 服务端也称为分布式配置中心,它是一个独立的微服务应用,用来连接配置服务器并为客户端提供获取配置信息,加密/解密信心等接口. ...
- 【转】python之random模块分析(一)
[转]python之random模块分析(一) random是python产生伪随机数的模块,随机种子默认为系统时钟.下面分析模块中的方法: 1.random.randint(start,stop): ...
- 升级Jenkins版本
找到jenkins.war文件的安装目录 cd /usr/local/tomcat/tomcat1_jenkins/webapps/ 停止jenkins service tomcat_jenkins ...
- shiro登录验证原理
这段时间有点忙,没咋写博客,今天打开staruml看到以前画的一张shiro原理图,先在这发一下,空了再好好进行分析.
- 005_elasticsearch的数据导入导出
一.全部备份和导入 安装:git clone https://github.com/taskrabbit/elasticsearch-dump.gitcd elasticsearch-dumpnpm ...
- 使用js下载文件
使用Echarts地图时,需要一些地图数据,到Echarts下载地图数据文件时,发现其下载是直接通过js下载,从其网站上扒下来的记录于此 FileSave.min.js网络地址:http://ecom ...