注:上传图片需要结合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. Python模块安装方法

    安装Python模块 电子邮件 distutils-sig @ python .组织 作为一个受欢迎的开源开发项目,Python具有活跃的贡献者和用户支持社区,并且根据开放源代码许可条款,其软件可供其 ...

  2. Java基础 while 简单示例

        JDK :OpenJDK-11      OS :CentOS 7.6.1810      IDE :Eclipse 2019‑03 typesetting :Markdown   code ...

  3. odoo开发笔记--日期or时间字段给定默认值

    开发中经常有这样的场景,需要给某个日期或者时间的字段默认值: 例如: 日期,默认今天 时间,默认当前时间 可以在odoo模型定义中进行设置, 如下样例提供参考: test_data = fields. ...

  4. Android 多用户

    下面几篇介绍的不错,推荐看看 https://www.jianshu.com/p/3ad2163f7d34   Android 9.x 多用户机制 1 #Profile user创建过程 https: ...

  5. echo * 和ls *之间的区别?

    背景描述: 今天 一同事做入职考试,涉及到1题目,echo * 和ls *之间的区别,没有用过这个用法,再次记录下. 操作过程: 1.执行echo * [root@localhost ~]# echo ...

  6. C++实现委托机制(三)——lambda表达式封装

    C++.引言:              其实原本没打算写这一章的,不过最后想了想,嗯还是把lambda表达式也一并封装进去,让这个委托也适应lambda表达式的注册.不过在之前还是需要先了解lamb ...

  7. IDEA 加载maven工程时

    IDEA首次加载maven文件时,会无法编译,需要更新maven版本才行. 此处选择“add as maven project”. 然后点击maven对话框中的同步按钮,若仍无法更新,需要删除原有配置 ...

  8. Laya微信小游戏的动态资源

    版本2.1.1. 由于有4m包限制,所以一般小游戏项目分成主包+远程资源. 现在我新建一个remote目录,该目录下资源不发布到微信小游戏目录下,而是服务器远程加载. 发布时,勾线是否提取本地包 远程 ...

  9. exports module.exports export export default之间的关系

    exports 和module.exports是CommonJS模块规范 export export default是ES6模块的规范,两者完全是不同的概念. node应用由模块组成,采用的是Comm ...

  10. pcl使用入门

    最近在学习pcl,C++早就忘记了,所以踩了好些坑 不过终于通过了,特此记录下来 环境:win7+pcl1.81+vs2015 1.安装pcl1.81 下载PCL-1.8.1-AllInOne-msv ...