富文本编辑器(Vue插件)
下载 vue-quill-editor
// 下载Vue-Quill-Editor
npm install vue-quill-editor --save;
下载quill(Vue-Quill-Editor需要依赖)
// 下载quill(Vue-Quill-Editor需要依赖)
npm install quill --save;
引入
<template><quill-editorclass="quill" v-model="content" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"@change="onEditorChange($event)"></quill-editor>
</template>import { quillEditor } from "vue-quill-editor"; //调用编辑器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';export default {components: {quillEditor},data() {return {content: `<h1>张三</h1>`,editorOption: {}}},methods: {onEditorReady(editor) { // 准备编辑器},onEditorBlur(){}, // 失去焦点事件onEditorFocus(){}, // 获得焦点事件onEditorChange(){}, // 内容改变事件},
}
效果图片
富文本编辑器(Vue插件)相关推荐
- tinymce--一款非常好用的富文本编辑器 VUE如何集成tinymce编辑器
博客(coder的自我修养)原文链接:tinymce--一款非常好用的富文本编辑器 vue集成tinymce编辑器 - coder的自我修养 TinyMC编辑器简介 TinyMCE是一款易用.且功能强 ...
- 基于jQuery的富文本编辑器summernote插件的使用教程
基于jQuery的富文本编辑器summernote插件的使用教程 基于jQuery的富文本编辑器summernote插件的使用教程 一:最近项目中遇到使用富文本编辑器的功能, JQuery的富文本编辑 ...
- tinymce富文本编辑器扩展插件-设置段落间距
项目中使用到tinymce富文本编辑器,由于官方并没有设置段落间距插件,所以自己开发了一个段落间距扩展插件.可以将其配置为toolbar,也可以配置成菜单项. 使用方法: 方式一: 1. 使用npm安 ...
- 前端踩坑之TinyMCE富文本编辑器表情插件报错解决
最近项目中需要使用文本编辑器,比较了下最终选择了TinyMCE这款富文本编辑器. 我安装的是TinyMCE v5但是在使用表情插件的时候,表情一直都出不来,报错信息如下: Uncaught Synta ...
- *使用quill富文本编辑器的插件,自定义formData图片上传
官网地址:https://quilljs.com 项目需求:自带的上传图片是base64,直接入库的话,请求头太长,导致网页十分十分的卡,所以才改用formData自定义上传(改完之后,相当于覆盖了他 ...
- Vue富文本编辑器代码高亮
之前在Vue-awesome上面找富文本编辑器的插件,找了排名第一的vue-quill-editor,排名第一应该是相对比较好用的. 首先下载到自己的项目中 npm install vue-quill ...
- TinyMCE富文本编辑器自动链接插件 AutoLink配置
TinyMCE富文本编辑器 AutoLink 插件默认是不支持全角字符的,意味着你就算是全角字符,也必须要在字符后面跟随一个空格,然后再跟随网址,这时候地址才会自动转换为超链接 a 标签 通过如下设置 ...
- 渲染富文本编辑器并设置富文本编辑器的高度
目标:富文本编辑器 vue-quill-editor 的基本使用:vue-quill-editor - npm 一.渲染富文本编辑器 运行如下的命令,在项目中安装富文本编辑器: npm i vue-q ...
- 实现手机端富文本编辑器---QuillEditors实现
实现的效果: ①安装vue-quill-editor npm i vue-quill-editor -save ②安装完成之后,封装组件 代码如下: <!-- 模板 --> <tem ...
- Tinymce富文本编辑器在vue项目中的使用;引入第三方插件和上传视频、图片等
先放张效果图 第一步:安装依赖 npm install tinymce@5.0.12 第二步:在项目中的public文件夹中新建tinymce文件夹(因为我的项目是脚手架创建的,所以公共文件夹是pub ...
最新文章
- 通俗理解tf.nn.conv2d() tf.nn.conv3d( )参数的含义 pytorhc 卷积
- Linux下用C语言最基本的程序开发与调试
- MQ事务消息实现方案
- 青客宝团队Consul内部分享ppt
- 超详细教程:SpringBoot整合MybatisPlus
- 前端学java还是python_零基础应该选择学习 java、php、前端 还是 python?
- 一个准毕业生的2012年总结
- 阿里云自研数据仓库 AnalyticDB 再捧 TPC 全球冠军
- matlab聚合矩阵,c#和ILNumerics与Matlab中最有效的矩阵聚合方式
- CF986F Oppa Funcan Style Remastered
- 错误解决:java.util.concurrent.ExecutionException: org.apache.catalina.LifecycleException: Failed to star
- 体外诊断(IVD)行业系列四:快速崛起的独立医学实验室
- 基于永洪BI部署的自助分析平台(一)
- 简单webform前端页面布局以及后台代码
- HDU 6357 Hills And Valleys(思维 动态规划)
- 四大全球卫星导航系统都能提供什么服务?
- Github: fatal: Unsupported SSL backend ‘“openssl”‘. Supported SSL backends: openssl schannel
- 你好法语A1语法单元汇总(unité 7)
- 华大HC32A460 系列介绍(二)
- Yii框架下使用redis做缓存,读写分离