vue项目中如何引用tinymce
最近公司在做一个CMS系统的项目,其中富文本编辑框用的很多,目前流行的也很多,包括wangEditor、TinyMCE、百度ueditor、kindeditor、CKEditor等。经过自己的一番翻箱倒柜,最后目标定在TinyMCE和CKEditor(自我认为这两个高大上一点,还是国外的~~~),因为以前对TinyMCE有过了解,而访问CKEditor的官方文档老是被墙,所有就先选定了TinyMCE作为首选。
一、安装
yarn add @tinymce/tinymce-vue
二、引入
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<editor
api-key="no-api-key"
:init="{
height: 500,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar:
'undo redo | formatselect | bold italic backcolor | \
alignleft aligncenter alignright alignjustify | \
bullist numlist outdent indent | removeformat | help'
}"
/>
</div>
</template> <script>
import Editor from '@tinymce/tinymce-vue' export default {
name: 'app',
components: {
'editor': Editor
}
}
</script>
注意:其中的no-api-key是需要自己申请,不然用不了其中的高级插件,不过不申请的话也能,但是会有警告提示,可以手动关闭(如果不想进入页面每次都提示,自己可以查看那个弹框的类名,自己样式中覆盖display::none,虽然没提示了,但是本人不建议这样)
三、属性
<editor
api-key="your-api-key"
cloud-channel="5"
:disabled=false
id="uuid"
:init= "{ }"
initial-value=""
:inline=true
model-events= ""
plugins=""
tag-name="div"
toolbar=""
value=""
/>
四、事件触发
<editor @onSelectionChange="handlerFunction" />
如:
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
以上是所有的事件函数,具体的可以一一尝试
接下来,要搞一搞CKEditor,对比下,毕竟只有真正尝试下才知道好不好用~~~~
今天到此为止!!!
vue项目中如何引用tinymce的更多相关文章
- Vue项目中如何引用外部js
第一种方法:(感觉这个有问题) 1.把需要的js放到static文件夹下 2.在Index.html页面引入 3.在webpack.base.conf.js添加下面代码 externals: { 'W ...
- VUE依赖webpack分别给开发环境和生产环境配置不同的常量值并在项目中动态引用
当在开发和产品上线的时候,我们经常会遇到在同一个地方由于环境的不同而地址也不同的情况,这时候如果在代码中将该地址写死,那势必会造成上线时手动改动,多人开发及多处使用该地址难以维护等一系列问题,为避免这 ...
- vue 项目中实用的小技巧
# 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...
- 如何在VUE项目中添加ESLint
如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...
- vue项目中遇到的那些事。
前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...
- 转:如何在Vue项目中使用vw实现移动端适配
https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...
- 在vue项目中使用axios发送FormData
这个是axios的中文文档,挺详细的: https://www.kancloud.cn/luponu/axios/873153 文档中的 使用 application/x-www-form-ur ...
- 在vue项目中 如何定义全局变量 全局函数
如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数 定义全局变量 原理: 设置一个专用的的 ...
- 在Vue项目中使用vw实现移动端适配
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
随机推荐
- SpringBoot项目 @Value("${}") 引入的配置文件的变量不生效 , 需要重启服务才生效解决方案
最近在开发项目的时候遇到的问题,有的变量需要能动态修改,于是决定把该常量放在配置文件中,以后修改配置文件就行了,但是在修改了配置文件的数据之后获取的还是之前的数据,需要重启服务才生效,怎么决解这个问题 ...
- ip,子网掩码,网关以及dns简述
ip 描述 ip地址用于标识不同的计算机身份,ip地址=网络地址+主机地址 例子 192.168.1.168(ip地址)=192.168.1.0(网络地址)+0.0.0.168(主机地址) 寻址过程 ...
- 为什么不建议把数据库部署在Docker容器内?
近2年Docker非常的火热,各位开发者恨不得把所有的应用.软件都部署在Docker容器中,但是您确定也要把数据库也部署的容器中吗?这个问题不是子虚乌有,因为在网上能够找到很多各种操作手册和视频教程, ...
- RPC框架从0到10
RPC(Remote Procedure Call) 从单机走向分布式,产生了很多分布式的通信方式 最古老也是最有效,并且永不过时的,TCP/UDP的二进制传输,事实上所有的通信方式归根结底都是TCP ...
- 2. C++中的引用
1. 引用的基本使用 作用:给变量起别名 语法:数据类型 &别名=原名 注意: 别名数据类型与原名数据类型一致. 引用必须初始化. 引用一旦初始化后,就不可以更改(只能作为一个变量的别名) ...
- springboot项目父依赖管理
springboot项目,pom文件中,要引用父pom文件,进而使用其依赖关系 例如: <parent> <groupId>org.springframework.boot&l ...
- Date、SimpleDateFormat以及Calendar
Date类 毫秒值 java.util.Date:表示日期和时间的类 类Date表示特定的瞬间,精确到毫秒 日期转毫秒,号秒转日期 中国属于东八区,会把事件增加8个小时 1天 = 4 * 60 * 6 ...
- Java进阶基础18天课程大总结
知识点目录 day1:分类思想,static关键字 day2:面向对象-继承,抽象类,权限修饰符,final day3:接口,多态 day4:内部类,Lambda day5:工具类API,系统API, ...
- node.js常用内置模块一
在使用内模块的时候需要先将所需的内置模块进行引入. OS模块 在nodejs中OS模块提供了与操作系统相关的属性和方法 // 导入OS内置模块,必须先进行导入,否则无法使用 const os = re ...
- Head First 设计模式 —— 10. 迭代器 (Iterator) 模式
思考题 public void printMenu() { PancakeHouseMenu pancakeHouseMenu = new PancakeHouseMenu(); ArrayList ...