欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue使用富文本編輯器vue-quill-editor的操作指南和注意事項(xiàng)

 更新時(shí)間：2023年05月30日 09:18:04   作者：SwJieJie  
vue中很多項(xiàng)目都需要用到富文本編輯器,在使用了ueditor和tinymce后,發(fā)現(xiàn)并不理想,所以果斷使用vue-quill-editor來實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue使用富文本編輯器vue-quill-editor的操作指南和注意事項(xiàng),需要的朋友可以參考下

問題描述：

我們在開發(fā)過程中經(jīng)常會(huì)遇到使用富文本編輯器進(jìn)行操作，當(dāng)前插件市場上關(guān)于富文本的編輯器挺多的，我們就不一一個(gè)介紹了，現(xiàn)在我們主要講解一些vue-quill-editor富文本編輯器的使用操作和注意事項(xiàng)。

效果圖

具體操作使用

1. 安裝

npm install vue-quill-editor -S

2. 引入到項(xiàng)目中

有兩種掛載方式： 全局掛載 和 在組件中掛載，根據(jù)自己的項(xiàng)目需求選擇，一般用到富文本編輯都是在某一個(gè)項(xiàng)目中，我們這里為了方便大家選擇，兩種引用方案都寫下來以便大家參考：

（1），頁面中引用

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
  }
}

（2），全局中引用

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
 
// 引入樣式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
 
Vue.use(VueQuillEditor, /* { 默認(rèn)全局 } */)

3. 頁面上面具體實(shí)現(xiàn)

<template>
	<quill-editor 
	   class="ql-editor"
	   v-model="content" 
	   ref="myQuillEditor" 
	   :options="editorOption" 
	   @blur="onEditorBlur($event)" 
	   @focus="onEditorFocus($event)"
	   @change="onEditorChange($event)">
	</quill-editor>
</template>
 
<script>
export default {
    data() {
        return {
	       content: `<p>這是 vue-quill-editor 的內(nèi)容！</p>`, //雙向數(shù)據(jù)綁定數(shù)據(jù)
		  // 富文本編輯器配置
	      editorOption: {
	        modules: {
		          toolbar: [
		             ['bold', 'italic', 'underline', 'strike'], // 加粗 斜體 下劃線 刪除線
					 ['blockquote', 'code-block'], // 引用  代碼塊
					  [{ header: 1 }, { header: 2 }], // 1、2 級標(biāo)題
					  [{ list: 'ordered' }, { list: 'bullet' }], // 有序、無序列表
					  [{ script: 'sub' }, { script: 'super' }], // 上標(biāo)/下標(biāo)
					  [{ indent: '-1' }, { indent: '+1' }], // 縮進(jìn)
					  [{ direction: 'rtl' }], // 文本方向
					  [{ size: ['12px', false, '16px', '18px', '20px', '30px'] }], // 字體大小
					  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 標(biāo)題
					  [{ color: [] }, { background: [] }], // 字體顏色、字體背景顏色
					  [{ font: [false, 'SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial'] }], // 字體種類
					  [{ align: [] }], // 對齊方式
					  ['clean'], // 清除文本格式
					  ['link', 'image', 'video'] // 鏈接、圖片、視頻
		        },
		        placeholder: '請輸入正文'
	      	} 
	      }
	  		},
    methods: {
       // 失去焦點(diǎn)事件
		  onEditorBlur(quill) {
		    console.log('editor blur!', quill)
		  },
		// 獲得焦點(diǎn)事件
		  onEditorFocus(quill) {
		    console.log('editor focus!', quill)
		  },
		// 準(zhǔn)備富文本編輯器
		  onEditorReady(quill) {
		    console.log('editor ready!', quill)
		  },
		// 內(nèi)容改變事件
		  onEditorChange({ quill, html, text }) {
		    console.log('editor change!', quill, html, text)
		    this.content = html
		  }
    }
}
</script>

到這里一個(gè)默認(rèn)的富文本編輯器已經(jīng)導(dǎo)入使用了，如下圖所視！

4.為了更好配合使用，樣式上面進(jìn)行優(yōu)化，使用中文標(biāo)識方便查看

（1），重新自定義字體類型

import Quill from 'quill' // 引入編輯器
// 自定義字體大小
const Size = Quill.import('attributors/style/size')
Size.whitelist = ['10px', '12px', '16px', '18px', '20px', '30px', '32px']
Quill.register(Size, true)
// 自定義字體類型
var fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'sans-serif']
var Font = Quill.import('formats/font')
Font.whitelist = fonts
Quill.register(Font, true)

（2），自定義對應(yīng)樣式

// 給文本內(nèi)容加高度，滾動(dòng)條
.quill-editor /deep/ .ql-container {
    min-height: 220px;
  }
  .ql-container {
    min-height: 230px;
  }
 /deep/ {
    .ql-snow .ql-tooltip [data-mode="link"]::before {
      content: "請輸入鏈接地址:";
      left: 0;
    }
    .ql-snow .ql-tooltip.ql-editing {
      left: 0 !important;
    }
    .ql-snow .ql-tooltip {
      left: 0 !important;
    }
    .ql-snow .ql-editor {
      max-height: 300px;
    }
    .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
      border-right: 0px;
      content: "保存";
      padding-right: 0px;
    }
    .ql-snow .ql-tooltip[data-mode="video"]::before {
      content: "請輸入視頻地址:";
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label::before, .ql-snow .ql-picker.ql-size .ql-picker-item::before {
      content: "14px" !important;
      font-size: 14px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
      content: "10px" !important;
      font-size: 10px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
      content: "12px" !important;
      font-size: 12px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
      content: "16px" !important;
      font-size: 16px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
      content: "18px" !important;
      font-size: 18px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
      content: "20px" !important;
      font-size: 20px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="30px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="30px"]::before {
      content: "30px" !important;
      font-size: 30px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
      content: "32px" !important;
      font-size: 32px;
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label::before, .ql-snow .ql-picker.ql-header .ql-picker-item::before {
      content: "文本" !important;
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
      content: "標(biāo)題1" !important;
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
      content: "標(biāo)題2" !important;
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
      content: "標(biāo)題3" !important;
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
      content: "標(biāo)題4" !important;
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
      content: "標(biāo)題5" !important;
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
      content: "標(biāo)題6" !important;
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label::before, .ql-snow .ql-picker.ql-font .ql-picker-item::before {
      content: "標(biāo)準(zhǔn)字體" !important;
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
      content: "襯線字體" !important;
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
      content: "等寬字體" !important;
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimSun"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimSun"]::before {
      content: "宋體" !important;
      font-family: "SimSun";
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimHei"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimHei"]::before {
      content: "黑體" !important;
      font-family: "SimHei";
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Microsoft-YaHei"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Microsoft-YaHei"]::before {
      content: "微軟雅黑" !important;
      font-family: "Microsoft YaHei";
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="KaiTi"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="KaiTi"]::before {
      content: "楷體" !important;
      font-family: "KaiTi";
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="FangSong"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="FangSong"]::before {
      content: "仿宋" !important;
      font-family: "FangSong";
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before {
      content: "Arial" !important;
      font-family: "Arial";
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Times-New-Roman"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Times-New-Roman"]::before {
      content: "Times New Roman" !important;
      font-family: "Times New Roman";
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="sans-serif"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sans-serif"]::before {
      content: "sans-serif" !important;
      font-family: "sans-serif";
    }
    .ql-font-SimSun {
      font-family: "SimSun";
    }
    .ql-font-SimHei {
      font-family: "SimHei";
    }
    .ql-font-Microsoft-YaHei {
      font-family: "Microsoft YaHei";
    }
    .ql-font-KaiTi {
      font-family: "KaiTi";
    }
    .ql-font-FangSong {
      font-family: "FangSong";
    }
    .ql-font-Arial {
      font-family: "Arial";
    }
    .ql-font-Times-New-Roman {
      font-family: "Times New Roman";
    }
    .ql-font-sans-serif {
      font-family: "sans-serif";
    }
    .ql-snow.ql-toolbar .ql-formats .ql-revoke {
      background-image: url("../../../../assets/images/icons8-rotate-left-18.png");
      width: 20px;
      height: 20px;
      filter: grayscale(100%);
      opacity: 1;
    }
    .ql-snow.ql-toolbar .ql-formats .ql-revoke:hover {
      background-image: url("../../../../assets/images/icons8-rotate-left-18.png");
      width: 20px;
      height: 20px;
      filter: none;
      opacity: 0.9;
    }
    img {
      filter: grayscale(100%);
      opacity: 1;
    }
    img:hover {
      filter: none;
      opacity: 0.9;
    }
    /*加上height和滾動(dòng)屬性就可以，滾動(dòng)條樣式是系統(tǒng)默認(rèn)樣式，可能不同*/
    .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
      border-color: #ccc;
      height: 125px;
      overflow: auto;
    }
  }

（3），注意點(diǎn)：富文本里面的下拉框默認(rèn)是不滾動(dòng)的，想要滾動(dòng)效果，加上下面的css

/*加上height和滾動(dòng)屬性就可以，滾動(dòng)條樣式是系統(tǒng)默認(rèn)樣式，可能不同*/
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  border-color: #ccc;
  height: 125px;
  overflow: auto;
}

5.上傳圖片到七牛云

vue-quill-editor 默認(rèn)的是以 base64 保存圖片，會(huì)直接把圖片 base64 和內(nèi)容文本一起以字符串的形式提交到后端。這樣小圖片還行，如果要上傳大圖片會(huì)提示上傳失敗，優(yōu)秀的前端打字員顯然不會(huì)這樣做。

思路

可以先將圖片上傳至服務(wù)器，再將圖片鏈接插入到富文本中顯示

圖片上傳可以自定義一個(gè)組件或者使用 element-ui 的上傳圖片的組件（我在項(xiàng)目中使用的是自定義的組件，這里演示使用 element-ui 組件上傳）
上傳圖片的組件需要隱藏，點(diǎn)擊圖片上傳時(shí)調(diào)用element-ui 的圖片上傳，上傳成功后返回圖片鏈接。

在編輯器項(xiàng)中配置配置項(xiàng)

<el-upload
  v-show="false"
  class="avatar-uploader"
  :data='fileUpload'
  :show-file-list="false"
  :http-request="onUploadHandler"
 >
</el-upload>

在option中配置上傳操作，之前的option就耀稍作修改

handlers: {
              'image': function (value) {
                if (value) { // value === true
                  document.querySelector('.avatar-uploader input').click()
                } else {
                  this.quill.format('image', false)
                }
              }
            }

 點(diǎn)擊富文本上的上傳圖片，就會(huì)觸發(fā)這里的handlers，將操作引到upload的函數(shù)上，在這個(gè)函數(shù)里面需要做的操作是，將圖片上傳到七牛云，并拿到返回的在線鏈接，然后將圖片鏈接插入到頁面對應(yīng)位置上。這里我的上傳是自己封裝了函數(shù)。

async onUploadHandler(e) {
      const imageUrl = 上傳七牛云后返回來的一串在線鏈接
      // 獲取光標(biāo)所在位置
      let quill = this.$refs.myQuillEditor.quill
      let length = quill.getSelection().index
      // 插入圖片  
      quill.insertEmbed(length, 'image', imageUrl)
      // 調(diào)整光標(biāo)到最后
      quill.setSelection(length + 1)
      // this.content += url
    }

6.自定義控制圖片大小

（1），安裝插件

npm i quill-image-resize-module -S

（2），在文件中導(dǎo)入包

import Quill from 'quill' 
import ImageResize from 'quill-image-resize-module' 
Quill.register('modules/imageResize', ImageResize)

（3），在原本的配置項(xiàng)上添加（與toolbar平級進(jìn)行配置）

toolbar: {},
// 調(diào)整圖片大小
  imageResize: {
      displayStyles: {
          backgroundColor: 'black',
          border: 'none',
          color: 'white'
      },
      modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
  }

效果：

7.自定義toobar樣式設(shè)計(jì)

//在quill中使用
toolbar: {
      container: toolbarOptions,
      handlers: {
        **report: this.openWorkReport**
      }
    }
// 方法中使用
	openWorkReport () {
      this.$emit('openWorkReport')
    },
// 樣式
/* 自定義toobar樣式設(shè)計(jì) */
/* 工作匯報(bào)彈窗 */
.ql-snow.ql-toolbar .ql-formats .ql-report{
    background: url("../images/meeting/report.png") no-repeat;
    background-size: contain;
    display: inline-block;
    height: 18px;
    margin: 3px 5px;
    width: 28px;
}

效果

有關(guān)視頻上傳參考：視頻上傳

總結(jié)

到此這篇關(guān)于vue使用富文本編輯器vue-quill-editor的操作指南和注意事項(xiàng)的文章就介紹到這了,更多相關(guān)vue使用富文本編輯器vue-quill-editor內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論