注:上传图片需要结合element-ui的upload上传

首先第一步:安装vue-quill-editor或quill两个模块

yarn add vue-quill-editor -D
yarn add quill -D

然后再main.js文件中引入

 import QuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.bubble.css'
import 'quill/dist/quill.snow.css'
Vue.use(QuillEditor)

使用方法如下:

  <template>
  <div>
      <el-upload
class="avatar-uploader"
action="要上传到的接口"
:data='date' //需要传递的参数
name="file"
:show-file-list="false"
:on-success="Success"
:on-error="Error">
</el-upload>
      <quill-editor
v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@change="onEditorChange($event)"
        @ready="onEditorReady($event)"
></quill-editor>
        <button @click="saveHtml">确定</button>
</div>
</template> <script>
export default {
data () {
return {
content: ``,//最终拿到的内容
editorOption: {
theme: 'snow', //默认配置项
// modules: { 配置项,根据需要自行添加删除
// toolbar: [
// ['bold', 'italic', 'underline', 'strike'],//加粗,斜体,下划线,删除线
// ['blockquote', 'code-block'],//引用,代码块
// [{ 'header': 1 }, { 'header': 2 }],// 标题,键值对的形式;1、2表示字体大小
// [{ 'list': 'ordered'}, { 'list': 'bullet' }],//列表
// [{ 'script': 'sub'}, { 'script': 'super' }],// 上下标
// [{ 'indent': '-1'}, { 'indent': '+1' }],// 缩进
// [{ 'direction': 'rtl' }],// 文本方向
// [{ 'size': ['small', false, 'large', 'huge'] }],// 字体大小
// [{ 'header': [1, 2, 3, 4, 5, 6, false] }],//几级标题
// [{ 'color': [] }, { 'background': [] }],// 字体颜色,字体背景颜色
// [{ 'font': [] }],//字体
// [{ 'align': [] }],//对齐方式
// ['clean'], //清除字体样式
// ['image','video']//上传图片、上传视频
// ]
// } // 上传图片时modules中内容如下
modules: {
toolbar: {
container: [
//配置项,全部配置如上
['bold', 'italic', 'underline'],
[{ 'align': [] }],
['image']
],
handlers: {
'image': function (value) {
if (value) {
document.querySelector('.avatar-uploader input').click()
} else {
this.quill.format('image', false);
}
}
}
}
}
},
}
},
computed: {
editor () {
return this.$refs.myQuillEditor.quill
}
},
methods: {
Success(res, file){
// 获取实例
let quill = this.$refs.myQuillEditor.quill
// 上传成功
if (res.errorCode == 200 && res.result !== null) { //res.errorCode是上传是否成功的状态值~~res.result是上传成功返回的图片路径
// 获取官标位置
let cursor = quill.getSelection().index;
console.log(res)
//我这里loot.SERVE.file是服务器前半截地址加上res.result返回的半截地址
quill.insertEmbed(cursor, 'image', loot.SERVE.file+res.result)
// 光标向后加1
quill.setSelection(cursor + 1)
} else {
this.$message.error('上传失败')
}
},
Error(){
this.$message.error('上传失败')
},
onEditorReady (editor) {}, // 准备编辑器
onEditorBlur () {}, // 失去焦点事件
onEditorFocus () {}, // 获得焦点事件
onEditorChange () {}, // 内容改变事件
saveHtml (event) {
alert(this.content)
}
}
}
</script>

给quill-editor组件中的工具栏添加title

原文链接:https://blog.csdn.net/w390058785/article/details/84346251

第一步:创建一个quill-title.js的文件,内容如下

const titleConfig = {
'ql-bold':'加粗',
'ql-color':'颜色',
'ql-font':'字体',
'ql-code':'插入代码',
'ql-italic':'斜体',
'ql-link':'添加链接',
'ql-background':'背景颜色',
'ql-size':'字体大小',
'ql-strike':'删除线',
'ql-script':'上标/下标',
'ql-underline':'下划线',
'ql-blockquote':'引用',
'ql-header':'标题',
'ql-indent':'缩进',
'ql-list':'列表',
'ql-align':'文本对齐',
'ql-direction':'文本方向',
'ql-code-block':'代码块',
'ql-formula':'公式',
'ql-image':'图片',
'ql-video':'视频',
'ql-clean':'清除字体样式'
}; export function addQuillTitle(){
const oToolBar = document.querySelector('.ql-toolbar'),
aButton = oToolBar.querySelectorAll('button'),
aSelect = oToolBar.querySelectorAll('select');
aButton.forEach(function(item){
if(item.className === 'ql-script'){
item.value === 'sub' ? item.title = '下标': item.title = '上标';
}else if(item.className === 'ql-indent'){
item.value === '+1' ? item.title ='向右缩进': item.title ='向左缩进';
}else{
item.title = titleConfig[item.classList[0]];
}
});
aSelect.forEach(function(item){
item.parentNode.title = titleConfig[item.classList[0]];
});
}

使用

<script>
import { addQuillTitle } from './quill-title.js'
export default {
mounted(){
addQuillTitle();
}
}

vue-quill-editor 富文本框使用及上传图片到服务器的更多相关文章

  1. vue集成ckeditor富文本框,怎么获取CKEditor实例?

    CKEDITOR 版本5 ,vue集成形式 vue集成ckeditor富文本框,由于不是通过js创建的富文本对象,所以,无法取得实例对象,官方说明 官方在builds-->Getting and ...

  2. vue集成CKEditor构建框架的使用,遇到富文本框不出现工具栏等操作

    官方关于Vue集成CKEditor富文本框的文档:https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/framew ...

  3. Vue基于vue-quill-editor富文本编辑器使用心得

    vue-quill-editor的guthub地址,现在市面上有很多的富文本编辑器,我个人还是非常推荐Vue自己家的vue-quill-deitor,虽然说只支持IE10+,但这种问题,帅给别人吧! ...

  4. vue集成百度富文本编辑器

    1.前期工作,访问百度富文本官网下载相应的百度富文本文件,根据后端用的技术下载相应的版本,建议下载最新版UTF-8版 (有图有真相,看图) https://ueditor.baidu.com/webs ...

  5. web轻量级富文本框编辑

    前言 主要介绍squire,wangeditor富文本编辑 以及用原生js 如何实现多个关键字标识 需求 如何标记多个关键字,取消关键字 第一种方法 原生 textarea 标记 准备资料参考:张鑫旭 ...

  6. Android 富文本框实现 RichEditText

    Android系统自带控件没有富文本框控件,如果想写一封带格式的邮件基本上不可能,EdtiText只有默认一种格式,显示不能滿足要求,!!正好项目需要研究了一下,开发了此控件,现将一些源代码开放一下, ...

  7. Extjs4.2x与富文本框编辑器KindEditor的整合

    Extjs4本身的HtmlEditor编辑器,太鸡肋了,简单的html能够应付一下,稍加复杂的就无能为力了. 对于Extjs的HtmlEditor扩展主要有三个方向,一个是扩展其本身的htmlEdit ...

  8. kindeditor富文本框,上传文件后,显示文件名称

    kindeditor作为一个应用广泛富文本框,我们经常会利用到它,然而在使用的过程中,发现有的地方使用起来很不方便,例如本文要说的,用户上传文件之后,默认只有文件URL,没有文件说明,如图: 点击确定 ...

  9. selenium 富文本框处理

    selenium 富文本框处理, 网上有用API的解决方法1:参见:http://blog.csdn.net/xc5683/article/details/8963621 群里1位群友的解决方法2:参 ...

随机推荐

  1. RocketMQ集群安装 2主2从 console

    安装zip和mavenyum install -y unzip zip wget http://repos.fedorapeople.org/repos/dchen/apache-maven/epel ...

  2. PostgreSQL中的索引(一)

    引言 这一系列文章主要关注PostgreSQL中的索引. 可以从不同的角度考虑任何主题.我们将讨论那些使用DMBS的应用开发人员感兴趣的事项:有哪些可用的索引:为什么会有这么多不同的索引:以及如何使用 ...

  3. JBoss服务器的安装和使用(关联到IDEA)

    1. 下载安装jboss服务器 wildfly-16.0.0.Final.zip(更名为wildfly了,选择合适的版本) 2. 解压,配置环境变量. JBOSS_HOME=D:\Program Fi ...

  4. go-micro框架学习1-准备工作

    下载golang环境,地址:https://studygolang.com/dl,这里使用的是1.11.10版本. 下载golang IDE,这里使用Lite,下载地址:http://liteide. ...

  5. Hadoop记录-Apache hadoop+spark集群部署

    Hadoop+Spark集群部署指南 (多节点文件分发.集群操作建议salt/ansible) 1.集群规划节点名称 主机名 IP地址 操作系统Master centos1 192.168.0.1 C ...

  6. cmake find_package说明

    CMake中find_package功能演示 find_package可以被用来在系统中自动查找配置构建工程所需的程序库.在linux和unix类系统下这个命令尤其有用.CMake自带的模块文件里有大 ...

  7. vue+element-ui+ajax实现一个表格的实例

    <!DOCTYPE html> <html> <head> <script src="js/jquery-3.2.1.js">< ...

  8. Linq调试实时输出信息扩展方法(摘抄)

    原文在此 [译]如何在C#中调试LINQ查询 原linq语句: var res = employees .Where(e => e.Gender == "Male") .Ta ...

  9. 关于ios手机上拉和下拉到底部和顶部的橡皮筋问题

    之前遇到一个问题,就是写了一个正常的移动端首页,底部是导航,上面的是内容,在安卓手机是页面滑动到底部的时候,不会再滑动的,但是问题就出现在ios手机中.页面正常布局是,导航是position:fixe ...

  10. php_mvc实现步骤五

    5.match_controller 控制器层典型实现 控制器类 依据功能的相关性,将一系列相关的功能,使用一个控制器类来处理,而该控制器的每个方法,就对因某个功能. 注意:控制器是按照功能划分的.( ...