官方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富文本编辑器(翻译)的更多相关文章

  1. Vue CLI 3+tinymce 5富文本编辑器整合

    基于Vue CLI 3脚手架搭建的项目整合tinymce 5富文本编辑器,vue cli 2版本及tinymce 4版本参考:https://blog.csdn.net/liub37/article/ ...

  2. vue+富文本编辑器UEditor

    vue+富文本编辑器UEditor 昨天的需求是把textarea换成富文本编辑器的形式, 网上找了几种富文本编辑器ueditor.tinymce等, 觉得ueditor实现双向绑定还挺有意思, 分享 ...

  3. TinyMCE(富文本编辑器)

    [转]TinyMCE(富文本编辑器)在Asp.Net中的使用方法 官网演示以及示例代码:https://www.tinymce.com/docs/demo/image-tools/ 转自:http:/ ...

  4. TinyMCE(富文本编辑器)在Asp.Net中的使用方法

    TinyMCE(富文本编辑器)在Asp.Net中的使用方法   转至:http://www.cnblogs.com/freeliver54/archive/2013/02/28/2936506.htm ...

  5. 【转】TinyMCE(富文本编辑器)

    效果预览:http://www.tinymce.com/tryit/full.php [转]TinyMCE(富文本编辑器)在Asp.Net中的使用方法 转自:http://www.cnblogs.co ...

  6. 15、Vue CLI 3+tinymce 5富文本编辑器整合

    富文本编辑器里大佬们都说tinymce NB! 插件安装 inymce官方提供了一个vue的组件tinymce-vue 如果有注册或购买过服务的话,直接通过组件配置api-key直接使用,懒的注册或者 ...

  7. vue 富文本编辑器 项目实战用法

    1.挑个富文本编辑器 首先针对自己项目的类型,确定自己要用啥编辑器. 1.1 wangeditor 如果一般类似博客这种项目不需要花里胡哨的,功能也不要求贼多的,推荐一下wangeditor(点击跳转 ...

  8. vue富文本编辑器vue-quill-editor使用总结(包含图片上传,拖拽,放大和缩小)

    vue-quill-editor是vue很好的富文本编辑器,富文本的功能基本上都支持,样式是黑白色,简洁大方. 第一步下载 vue-quill-editor: npm i vue-quill-edit ...

  9. Vue富文本编辑器(图片拖拽缩放)

    富文本编辑器(图片拖拽缩放) 需求: 根据业务要求,需要能够上传图片,且上传的图片能在移动端中占满屏幕宽度,故需要能等比缩放上传的图片,还需要能拖拽.缩放.改变图片大小.尝试多个第三方富文本编辑器,很 ...

  10. vue富文本编辑器vue-quill-editor

    1.下载Vue-Quill-Editor npm install vue-quill-editor --save 2.下载quill(Vue-Quill-Editor需要依赖) npm install ...

随机推荐

  1. react——获取数据ajax()、$.ajax()、fetch()、axios

    ajax() import React from 'react'; import ReactDom from 'react-dom'; import ajax from './tool.js'; cl ...

  2. mongodb 系列 ~ mongo的两种引擎介绍对比

    一 简介 两种引擎方式的对比二  对比与说明   1 版本支持      MMAP引擎 3.2版本之前,默认引擎       WT 引擎 3.2版本之后,默认引擎   2 并发性能(核心)     M ...

  3. 20165234 2017-2018-2《Java程序设计》课程总结

    2017-2018-2<Java程序设计>课程总结 一.作业链接汇总 每周作业链接 预备作业一:我期望的师生关系 预备作业二:学习基础和C语言基础调查 预备作业三:Linux安装及学习 第 ...

  4. 【转载】AutoML--超参数调优之Bayesian Optimization

    原文:Auto Machine Learning笔记 - Bayesian Optimization 优化器是机器学习中很重要的一个环节.当确定损失函数时,你需要一个优化器使损失函数的参数能够快速有效 ...

  5. 基于keepalived搭建MySQL热机集群

    背景 MySQL的高可用方案一般有如下几种: keepalived+双主,MHA,MMM,Heartbeat+DRBD,PXC,Galera Cluster 比较常用的是keepalived+双主,M ...

  6. EasyGui的一个小例子

    EasyGui的安装:首先下载easyGui安装包,地址链接:https://pan.baidu.com/s/1D8f_eXWn7l8xhcTuEsqZmA 密码:e5z5 安装步骤: 1.进入eas ...

  7. CentOS 7 安装配置 Vsftpd

    https://blog.imzhengfei.com/centos-an-zhuang-pei-zhi-vsftpd/ vsftpd 是“very secure FTP daemon”的缩写,是一款 ...

  8. WC2019 20天训练

    Day -1 2019.1.2 初步计划: 0x60 图论 std 洛谷提高剩余练习 NOIP2018遗留题解 洛谷省选基础练习 数学: 1.数论 2.组合数学(练习:莫比乌斯反演) 3.概率(练习: ...

  9. 编程基础 - 0x00008 的0x代表什么?

    总结: 二进制:0dXXXX 八进制:0XXXX 十六进制:0xXXXX ------------------------------- 1- 十六进制 以“0x”开始的数据表示16进制,计算机中每位 ...

  10. Nginx range filter模块数字错误漏洞修复 (Nginx平滑升级) 【转】

    对线上生产环境服务器进行漏洞扫描, 发现有两台前置机器存在Nginx range filter模块数字错误漏洞, 当使用nginx标准模块时,攻击者可以通过发送包含恶意构造range域的header ...