vue quill富文本添加行高

直接上源碼

<template>

? <div>

? ? <el-upload

? ? ? :action="uploadUrl"

? ? ? :before-upload="handleBeforeUpload"

? ? ? :on-success="handleUploadSuccess"

? ? ? :on-error="handleUploadError"

? ? ? name="file"

? ? ? :show-file-list="false"

? ? ? style="display: none"

? ? ? ref="upload"

? ? ? v-if="this.type == 'url'"

? ? >

? ? </el-upload>

? ? <div class="editor" ref="editor" :style="styles"></div>

? </div>

</template>

<script>

import Quill from "quill";

import "quill/dist/quill.core.css";

import "quill/dist/quill.snow.css";

import "quill/dist/quill.bubble.css";

// import { getToken } from '@/utils/auth' //如果你的接口需要token的話打開(kāi)這行

import { uploadUrl } from '@/config/env';

放在 init里面有時(shí)初始化會(huì)失效 直接放在最外面

? const Parchment = Quill.import("parchment");

? class lineHeightAttributor extends Parchment.Attributor.Class {}

? const lineHeightStyle = new lineHeightAttributor(

? ? "lineheight",

? ? "ql-lineheight",

? ? {

? ? ? scope: Parchment.Scope.INLINE,

? ? ? whitelist: ["", "1", "1-5", "1-75", "2", "3", "4", "5"],

? ? }

? );

? Quill.register({ "formats/lineHeight": lineHeightStyle }, true);

export default {

? name: "Editor",

? props: {

? ? /* 編輯器的內(nèi)容 */

? ? value: {

? ? ? type: String,

? ? ? default: "",

? ? },

? ? /* 高度 */

? ? height: {

? ? ? type: Number,

? ? ? default: null,

? ? },

? ? /* 最小高度 */

? ? minHeight: {

? ? ? type: Number,

? ? ? default: null,

? ? },

? ? /* 只讀 */

? ? readOnly: {

? ? ? type: Boolean,

? ? ? default: false,

? ? },

? ? // 上傳文件大小限制(MB)

? ? fileSize: {

? ? ? type: Number,

? ? ? default: 5,

? ? },

? ? /* 類(lèi)型（base64格式谣殊、url格式） */

? ? type: {

? ? ? type: String,

? ? ? default: "url",

? ? }

? },

? data() {

? ? return {

? ? ? uploadUrl, // 上傳的圖片服務(wù)器地址

? ? ? Quill: null,

? ? ? currentValue: "",

? ? ? options: {

? ? ? ? theme: "snow",

? ? ? ? bounds: document.body,

? ? ? ? debug: "warn",

? ? ? ? modules: {

? ? ? ? ? // 工具欄配置

? ? ? ? ? toolbar: [

? ? ? ? ? ? ["bold", "italic", "underline", "strike"], ? ? ? // 加粗 斜體 下劃線 刪除線

? ? ? ? ? ? ["blockquote", "code-block"], ? ? ? ? ? ? ? ? ? ?// 引用 ?代碼塊

? ? ? ? ? ? [{ list: "ordered" }, { list: "bullet" }], ? ? ? // 有序燥狰、無(wú)序列表

? ? ? ? ? ? [{ indent: "-1" }, { indent: "+1" }], ? ? ? ? ? ?// 縮進(jìn)

? ? ? ? ? ? [{ size: ["small", false, "large", "huge"] }], ? // 字體大小

? ? ? ? ? ? [{ header: [1, 2, 3, 4, 5, 6, false] }], ? ? ? ? // 標(biāo)題

? ? ? ? ? ? [{ color: [] }, { background: [] }], ? ? ? ? ? ? // 字體顏色竭鞍、字體背景顏色

? ? ? ? ? ? [{ align: [] }], ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 對(duì)齊方式

? ? ? ? ? ? ["clean"], ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 清除文本格式

? ? ? ? ? ? ["link", "image", "video"], ? ? ? ? ? ? ? ? ? ? ?// 鏈接、圖片必搞、視頻

? ? ? ? ? ? [{ lineheight: ["", "1", "1-5", "1-75", "2", "3", "4", "5"] }], //行高

? ? ? ? ? ],

? ? ? ? },

? ? ? ? placeholder: "請(qǐng)輸入內(nèi)容",

? ? ? ? readOnly: this.readOnly,

? ? ? },

? ? };

? },

? computed: {

? ? styles() {

? ? ? let style = {};

? ? ? if (this.minHeight) {

? ? ? ? style.minHeight = `${this.minHeight}px`;

? ? ? }

? ? ? if (this.height) {

? ? ? ? style.height = `${this.height}px`;

? ? ? }

? ? ? return style;

? ? },

? },

? watch: {

? ? value: {

? ? ? handler(val) {

? ? ? ? if (val !== this.currentValue) {

? ? ? ? ? this.currentValue = val === null ? "" : val;

? ? ? ? ? if (this.Quill) {

? ? ? ? ? ? this.Quill.pasteHTML(this.currentValue);

? ? ? ? ? }

? ? ? ? }

? ? ? },

? ? ? immediate: true,

? ? },

? },

? mounted() {

? ? this.init();

? },

? beforeDestroy() {

? ? this.Quill = null;

? },

? methods: {

? ? init() {

? ? ? const editor = this.$refs.editor;

? ? ? this.Quill = new Quill(editor, this.options);

? ? ? // 如果設(shè)置了上傳地址則自定義圖片上傳事件

? ? ? if (this.type == 'url') {

? ? ? ? let toolbar = this.Quill.getModule("toolbar");

? ? ? ? toolbar.addHandler("image", (value) => {

? ? ? ? ? this.uploadType = "image";

? ? ? ? ? if (value) {

? ? ? ? ? ? this.$refs.upload.$children[0].$refs.input.click();

? ? ? ? ? } else {

? ? ? ? ? ? this.quill.format("image", false);

? ? ? ? ? }

? ? ? ? });

? ? ? }


? ? ? //禁用編輯器，防止頁(yè)面自動(dòng)滾動(dòng)到編輯器位置

? ? ? this.Quill.enable(false);

? ? ? // 編輯器綁定內(nèi)容囊咏，如修改的時(shí)候原有的內(nèi)容

? ? ? this.Quill.pasteHTML(this.currentValue);

? ? ? setTimeout(() => {

? ? ? ? this.Quill.blur();

? ? ? ? this.Quill.enable(true);

? ? ? }, 1500); ? ? ?this.Quill.on("text-change", (delta, oldDelta, source) => {

? ? ? ? const html = this.$refs.editor.children[0].innerHTML;

? ? ? ? const text = this.Quill.getText();

? ? ? ? const quill = this.Quill;

? ? ? ? this.currentValue = html;

? ? ? ? this.$emit("input", html);

? ? ? ? this.$emit("on-change", { html, text, quill });

? ? ? });

? ? ? this.Quill.on("text-change", (delta, oldDelta, source) => {

? ? ? ? this.$emit("on-text-change", delta, oldDelta, source);

? ? ? });

? ? ? this.Quill.on("selection-change", (range, oldRange, source) => {

? ? ? ? this.$emit("on-selection-change", range, oldRange, source);

? ? ? });

? ? ? this.Quill.on("editor-change", (eventName, ...args) => {

? ? ? ? this.$emit("on-editor-change", eventName, ...args);

? ? ? });

? ? },

? ? // 上傳前校檢格式和大小

? ? handleBeforeUpload(file) {

? ? ? if (this.fileSize) {

? ? ? ? const isLt = file.size / 1024 / 1024 < this.fileSize;

? ? ? ? if (!isLt) {

? ? ? ? ? this.$message.error(`上傳文件大小不能超過(guò) ${this.fileSize} MB!`);

? ? ? ? ? return false;

? ? ? ? }

? ? ? }

? ? ? return true;

? ? },

? ? handleUploadSuccess(res, file) {

? ? ? // 獲取富文本組件實(shí)例

? ? ? let quill = this.Quill;

? ? ? // 如果上傳成功

? ? ? if (res.code == "001") {

? ? ? ? // 獲取光標(biāo)所在位置

? ? ? ? let length = quill.getSelection().index;

? ? ? ? // 插入圖片 ?res.url為服務(wù)器返回的圖片地址

? ? ? ? quill.insertEmbed(length, "image", res.data);

? ? ? ? // 調(diào)整光標(biāo)到最后

? ? ? ? quill.setSelection(length + 1);

? ? ? } else {

? ? ? ? this.$message.error("圖片插入失敗");

? ? ? }

? ? },

? ? handleUploadError() {

? ? ? this.$message.error("圖片插入失敗");

? ? },

? },

};

</script>

<style>

.editor,

.ql-toolbar {

? white-space: pre-wrap !important;

? line-height: normal !important;

}

.quill-img {

? display: none;

}

.ql-snow .ql-tooltip[data-mode="link"]::before {

? content: "請(qǐng)輸入鏈接地址:";

}

.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: "請(qǐng)輸入視頻地址:";

}

.ql-snow .ql-picker.ql-size .ql-picker-label::before,

.ql-snow .ql-picker.ql-size .ql-picker-item::before {

? content: "14px";

}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {

? content: "10px";

}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {

? content: "18px";

}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {

? content: "32px";

}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,

.ql-snow .ql-picker.ql-header .ql-picker-item::before {

? content: "文本";

}

.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";

}

.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";

}

.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";

}

.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";

}

.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";

}

.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";

}

.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)字體";

}

.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: "襯線字體";

}

.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: "等寬字體";

}

.ql-snow .ql-picker.ql-lineheight .ql-picker-label::before,

.ql-snow .ql-picker.ql-lineheight .ql-picker-item::before {

? content: "行高";

}

.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="1"]::before,

.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="1"]::before {

? content: "1";

}

.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="1-5"]::before,

.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="1-5"]::before {

? content: "1.5";

}

.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="1-75"]::before,

.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="1-75"]::before {

? content: "1.75";

}

.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="2"]::before,

.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="2"]::before {

? content: "2";

}

.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="3"]::before,

.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="3"]::before {

? content: "3";

}

.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="4"]::before,

.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="4"]::before {

? content: "4";

}

.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="5"]::before,

.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="5"]::before {

? content: "5";

}

.ql-snow .ql-picker.ql-lineheight {

? width: 70px;

}

.ql-snow .ql-editor .ql-lineheight-1 {

? line-height: 1;

}

.ql-snow .ql-editor .ql-lineheight-1-5 {

? line-height: 1.5;

}

.ql-snow .ql-editor .ql-lineheight-1-75 {

? line-height: 1.75;

}

.ql-snow .ql-editor .ql-lineheight-2 {

? line-height: 2;

}

.ql-snow .ql-editor .ql-lineheight-3 {

? line-height: 3;

}

.ql-snow .ql-editor .ql-lineheight-4 {

? line-height: 4;

}

.ql-snow .ql-editor .ql-lineheight-5 {

? line-height: 5;

}

</style>

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末顾画，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子匆笤，更是在濱河造成了極大的恐慌研侣，老刑警劉巖，帶你破解...
    沈念sama閱讀 218,122評(píng)論 6贊 505
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件炮捧，死亡現(xiàn)場(chǎng)離奇詭異庶诡，居然都是意外死亡，警方通過(guò)查閱死者的電腦和手機(jī)咆课，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,070評(píng)論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門(mén)末誓，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人书蚪，你說(shuō)我怎么就攤上這事喇澡。” “怎么了殊校？”我有些...
    開(kāi)封第一講書(shū)人閱讀 164,491評(píng)論 0贊 354
  • 道士緝兇錄：失蹤的賣(mài)姜人
    文/不壞的土叔 我叫張陵晴玖，是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我为流，道長(zhǎng)呕屎，這世上最難降的妖魔是什么？ 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,636評(píng)論 1贊 293
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任敬察，我火速辦了婚禮秀睛，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘莲祸。我一直安慰自己蹂安，他們只是感情好椭迎，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,676評(píng)論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
    文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著田盈，像睡著了一般侠碧。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上缠黍，一...
    開(kāi)封第一講書(shū)人閱讀 51,541評(píng)論 1贊 305
  • 城市分裂傳說(shuō)
    那天弄兜，我揣著相機(jī)與錄音，去河邊找鬼瓷式。 笑死替饿，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的贸典。 我是一名探鬼主播视卢，決...
    沈念sama閱讀 40,292評(píng)論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開(kāi)眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼廊驼！你這毒婦竟也來(lái)了据过？” 一聲冷哼從身側(cè)響起，我...
    開(kāi)封第一講書(shū)人閱讀 39,211評(píng)論 0贊 276
  • 萬(wàn)榮殺人案實(shí)錄
    序言：老撾萬(wàn)榮一對(duì)情侶失蹤妒挎，失蹤者是張志新（化名）和其女友劉穎绳锅，沒(méi)想到半個(gè)月后，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體酝掩，經(jīng)...
    沈念sama閱讀 45,655評(píng)論 1贊 314
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡鳞芙，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,846評(píng)論 3贊 336
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了期虾。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片原朝。...
    茶點(diǎn)故事閱讀 39,965評(píng)論 1贊 348
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖镶苞，靈堂內(nèi)的尸體忽然破棺而出喳坠，到底是詐尸還是另有隱情，我是刑警寧澤茂蚓，帶...
    沈念sama閱讀 35,684評(píng)論 5贊 347
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布壕鹉，位于F島的核電站，受9級(jí)特大地震影響煌贴，放射性物質(zhì)發(fā)生泄漏御板。R本人自食惡果不足惜锥忿，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,295評(píng)論 3贊 329
  • 男人毒藥：我在死后第九天來(lái)索命
    文/蒙蒙 一牛郑、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧敬鬓，春花似錦淹朋、人聲如沸笙各。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,894評(píng)論 0贊 22
  • 一樁弒父案础芍，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)杈抢。三九已至，卻和暖如春仑性，著一層夾襖步出監(jiān)牢的瞬間惶楼，已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,012評(píng)論 1贊 269
  • 情欲美人皮
    我被黑心中介騙來(lái)泰國(guó)打工诊杆， 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留歼捐，地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,126評(píng)論 3贊 370
  • 代替公主和親
    正文 我出身青樓晨汹，卻偏偏與公主長(zhǎng)得像豹储，于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子淘这，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,914評(píng)論 2贊 355

推薦閱讀更多精彩內(nèi)容