vue富文字外掛vue-quill-editor的使用

阿新 • • 發佈：2018-12-30

首先下載vue-quill-editor cnpm install vue-quill-editor --save
新建公共元件quillEditor.vue，在quillEditor.vue中的html程式碼如下：<template><quill-editor v-model="content" ref="myTextEditor" :options="editorOption" @change="onChange" placeholder="111"> <div id="toolbar" slot="toolbar"> <span class

="ql-formats"> <button type="button" class="ql-bold"></button> </span> <span class="ql-formats"> <button type="button" class="ql-italic"></button> </span> <span class="ql-formats"> <button type="button" class="ql-underline"

></button> </span> <span class="ql-formats"> <button type="button" class="ql-strike"></button> </span> <span class="ql-formats"> <button type="button" class="ql-blockquote"></button> </span> <span class="ql-formats"

> <button type="button" class="ql-code-block"></button> </span> <span class="ql-formats"> <button type="button" class="ql-header" value="1"></button> </span> <span class="ql-formats"> <button type="button" class="ql-header" value="2"></button> </span> <span class="ql-formats"> <button type="button" class="ql-list" value="ordered"></button> </span> <span class="ql-formats"> <button type="button" class="ql-list" value="bullet"></button> </span> <span class="ql-formats"> <button type="button" class="ql-script" value="sub"></button> </span> <span class="ql-formats"> <button type="button" class="ql-script" value="super"></button> </span> <span class="ql-formats"> <button type="button" class="ql-indent" value="-1"></button> </span> <span class="ql-formats"> <button type="button" class="ql-indent" value="+1"></button> </span> <span class="ql-formats"> <button type="button" class="ql-direction" value="rtl"></button> </span> <span class="ql-formats"><select class="ql-size"> <option value="small">10px</option> <option selected>14px</option> <option value="large">18px</option> <option value="huge">32px</option> </select></span> <span class="ql-formats"><select class="ql-header"> <option value="1"></option> <option value="2"></option> <option value="3"></option> <option value="4"></option> <option value="5"></option> <option value="6"></option> <option selected="selected"></option> </select></span> <span class="ql-formats"><select class="ql-color"> <option selected="selected"></option> <option value="#e60000"></option> <option value="#ff9900"></option> <option value="#ffff00"></option> <option value="#008a00"></option> <option value="#0066cc"></option> <option value="#9933ff"></option> <option value="#ffffff"></option> <option value="#facccc"></option> <option value="#ffebcc"></option> <option value="#ffffcc"></option> <option value="#cce8cc"></option> <option value="#cce0f5"></option> <option value="#ebd6ff"></option> <option value="#bbbbbb"></option> <option value="#f06666"></option> <option value="#ffc266"></option> <option value="#ffff66"></option> <option value="#66b966"></option> <option value="#66a3e0"></option> <option value="#c285ff"></option> <option value="#888888"></option> <option value="#a10000"></option> <option value="#b26b00"></option> <option value="#b2b200"></option> <option value="#006100"></option> <option value="#0047b2"></option> <option value="#6b24b2"></option> <option value="#444444"></option> <option value="#5c0000"></option> <option value="#663d00"></option> <option value="#666600"></option> <option value="#003700"></option> <option value="#002966"></option> <option value="#3d1466"></option> </select></span> <span class="ql-formats"> <select class="ql-background"> <option value="#000000"></option> <option value="#e60000"></option> <option value="#ff9900"></option> <option value="#ffff00"></option> <option value="#008a00"></option> <option value="#0066cc"></option> <option value="#9933ff"></option> <option selected="selected"></option> <option value="#facccc"></option> <option value="#ffebcc"></option> <option value="#ffffcc"></option> <option value="#cce8cc"></option> <option value="#cce0f5"></option> <option value="#ebd6ff"></option> <option value="#bbbbbb"></option> <option value="#f06666"></option> <option value="#ffc266"></option> <option value="#ffff66"></option> <option value="#66b966"></option> <option value="#66a3e0"></option> <option value="#c285ff"></option> <option value="#888888"></option> <option value="#a10000"></option> <option value="#b26b00"></option> <option value="#b2b200"></option> <option value="#006100"></option> <option value="#0047b2"></option> <option value="#6b24b2"></option> <option value="#444444"></option> <option value="#5c0000"></option> <option value="#663d00"></option> <option value="#666600"></option> <option value="#003700"></option> <option value="#002966"></option> <option value="#3d1466"></option> </select></span> <span class="ql-formats"><select class="ql-font"> <option selected="selected">標準字型</option> <option value="serif">襯線字型</option> <option value="monospace">等寬字型</option> </select></span> <span class="ql-formats"> <select class="ql-align"> <option selected="selected"></option> <option value="center"></option> <option value="right"></option> <option value="justify"></option> </select> </span> <span class="ql-formats"> <button type="button" class="ql-clean"></button> </span> <span class="ql-formats"> <button type="button" class="ql-link"></button> </span> <span class="ql-formats"> <button type="button" @click="fileClick('image')"> <svg viewBox="0 0 18 18"> <rect class="ql-stroke" height="10" width="12" x="3" y="4"></rect> <circle class="ql-fill" cx="6" cy="7" r="1"></circle> <polyline class="ql-even ql-fill" points="5 12 5 11 7 9 8 10 11 7 13 9 13 12 5 12"> </polyline> </svg> </button> </span> <span class="ql-formats" @click="fileClick('video')"> <button type="button"> <svg viewBox="0 0 18 18"> <rect class="ql-stroke" height="12" width="12" x="3" y="3"></rect> <rect class="ql-fill" height="12" width="1" x="5" y="3"></rect> <rect class="ql-fill" height="12" width="1" x="12" y="3"></rect> <rect class="ql-fill" height="2" width="8" x="5" y="8"></rect> <rect class="ql-fill" height="1" width="3" x="3" y="5"></rect> <rect class="ql-fill" height="1" width="3" x="3" y="7"></rect> <rect class="ql-fill" height="1" width="3" x="3" y="10"></rect> <rect class="ql-fill" height="1" width="3" x="3" y="12"></rect> <rect class="ql-fill" height="1" width="3" x="12" y="5"></rect> <rect class="ql-fill" height="1" width="3" x="12" y="7"></rect> <rect class="ql-fill" height="1" width="3" x="12" y="10"></rect> <rect class="ql-fill" height="1" width="3" x="12" y="12"></rect> </svg> </button> </span> <span class="ql-formats"> </span> </div> </quill-editor></template>
在quillEditor.vue中引入相應檔案<script>import { quillEditor } from "vue-quill-editor";import "quill/dist/quill.core.css";import "quill/dist/quill.snow.css";import "quill/dist/quill.bubble.css";import { async } from "@/config/fetch";export default { components: { quillEditor }, props: { /*編輯器的內容*/ value: { type: String }, /*圖片大小*/ maxSize: { type: Number, default: 400 //kb } }, data() { return { content: "", editorOption: { modules: { toolbar: "#toolbar" }, placeholder: "您想說點什麼？" } }; }, methods: { onChange() { this.$emit("input", this.content); },
/*裁切上傳成功 res根據上傳介面值獲取*/ onUploadSuccess: function(res) { this.editor.focus(); this.editor.insertEmbed( this.editor.getSelection().index, "image", res.url ); }, /*點選上傳圖片按鈕*/ fileClick(type) { var _this = this; /*建立input file*/ var input = document.createElement("input"); input.type = "file"; if (type == "image") { input.accept = "image/jpeg,image/png,image/jpg,image/gif"; } else { input.accept = "video/mp4,video/mpeg,video/3gpp,image/gif"; } input.onchange = onFileChange; input.click();
/*選擇上傳圖片/視訊切換*/ function onFileChange(e) { var fileInput = e.target; console.log(fileInput); if (fileInput.files.length == 0) { return; } console.log(fileInput.files[0]); var data = new FormData(); data.append("files", fileInput.files[0]); async("/newsController/uploadNewsFile.do", data, "FORM", { contentType: "" }) .then(data => { var red = data.data[0]; _this.editor.focus(); if (type == "image") { _this.editor.insertEmbed( _this.editor.getSelection().index, "image", red.compressPhotoUrl ); } else { _this.editor.insertEmbed( _this.editor.getSelection().index, "video", red.photoUrl ); } }) .catch(function(err) { console.log(err); _this.$notify.error({ title: "錯誤", message: "上傳失敗" }); }); } } }, computed: { editor() { return this.$refs.myTextEditor.quill; } },
mounted() { this.content = this.value; }, watch: { value(newVal, oldVal) { if (this.editor) { if (newVal !== this.content) { this.content = newVal; } } } }};</script>
在quillEditor.vue中的樣式如下<style>.ql-picker-label { display: block !important; line-height: 24px;}.ql-picker-label::before { display: block !important;}.ql-tooltip { z-index: 100;}.ql-action::after { content: "儲存" !important;}.ql-tooltip[data-mode="link"]::before { content: "輸入連結:" !important;}.ql-tooltip[data-mode="video"]::before { content: "輸入視訊:" !important;}</style>
在頁面中使用quillEditor.vue這個元件

html<el-form-item label="內容"> <quill-editor v-model="newsContent"></quill-editor></el-form-item>
js<script>import quillEditor from "@/components/common/quillEditor";export default { components: { quillEditor }, data() { return { newsContent: "" }; }, mounted() {}};</script>

vue富文字外掛vue-quill-editor的使用

首先下載vue-quill-editor cnpm install vue-quill-editor --save新建公共元件quillEditor.vue，在quillEditor.vue中的ht

vue中使用富文字外掛wangeditor

import E from 'wangeditor' export default { name: 'editor', data () { return { editor: null, } },

vue富文字編輯器Tinymce，功能齊全，對圖片等媒體資源操控性好，非常推薦！

使用步驟： 1.在index.html中引入js檔案： <body> <script src="./static/tinymce4.7.5/tinymce.min.js"></script> <div id="app"></div

百度富文字在vue專案中的使用

百度富文字配置這裡不做過多的說明，詳情請參看官網文件，http://fex.baidu.com/ueditor/#start-config 定義富文字單獨的元件 <template> <script ref="editor" type="text/

vue富文字編輯器

前端富文字編譯器使用總結：：百度前端的開源專案，功能強大，基於 jQuery，但已經沒有再維護，而且限定了後端程式碼，修改起來比較費勁：微型，易用，小而美，只是 Bootstrap + jQuery... kindEditor：功能強大，程式碼簡潔，需要配置後臺，而

vue富文字框（插入文字、圖片、視訊）的使用

今天在vue裡面插入富文字遇到了一些小坑在這裡提供給大家用於參考，如有錯誤，望多加指正。我這裡使用的是Element-ui的上傳圖片元件首先引入Element-ui(這個我就不作贅述了，詳情參考element中文官網) 在引入富文字元件vue-quill-edito

summernote富文字外掛快速上手

1：先匯入 summernote.css summernote.js 2：寫個DIV 當做富文字的框供初始化 <div id="oaNotifyContent">${oaNotify.content}</div

vue播放video外掛vue-video-player實現hls， rtmp播放全過程

1.安裝外掛 1 npm install vue-video-player -S 2.配置外掛在main.js裡新增 1 import VideoPlayer from 'vue-video-player' 2 require('video.js/dist/video-js.

微信小程式富文字外掛wxParse的使用

特性支援特性實驗功能 ToDo [x] HTML的大部分標籤解析 [x] 小表情emjio [x] table標籤 [x] 內聯style [x] a標籤跳轉 [x] 標籤Class [x] 動態新增 [x] 圖片自適應規則 [x] 圖片多圖片預覽 [x] 模版

支援typescript的 Vue Event Bus外掛Vue-bus-ts

vue-bus-ts typescript 題主從js 轉ts 遇到的各種狀況之一，全域性屬性無法識別。研究了一段時間，得到了解決。接下來我會舉個?來為有需要的同學解釋如何使用 vue-bus-ts 作為我們vue typescript專案的Event bus解

如何在IntelliJ IDEA 中配置ueditor富文字外掛

ueditor是一款百度開源的富文字編輯器外掛,相對國外的優秀的外掛，這個外掛比較適合中國人的口味，廢話不多說，先看看它長什麼樣，下圖就是我測試時的樣圖：安裝教程：1:下載外掛 http://ueditor.baidu.com/website/do

微信小程式開發(十二)富文字外掛wxParse的使用

昨天一位網友問我小程式怎麼解析富文字。他嘗試過把html轉出小程式的元件，但是還是不成功，我說可以把內容剝離出來。但是這兩種方法都是不行了。後來找到了wxParse-微信小程式富文字解析元件。特性支援特性實驗功能 ToDo

React中使用富文字編輯器Quill，支援貼上圖片

最近專案中需要用到富文字編輯器，並且客戶明確提出需要實現可以直接截圖貼上到文字框中。由於我們的前端是用react寫的，於是就去參考了知乎的實現，發現知乎的富文字框是可以直接貼圖進去的，但由於看不到原始碼，只能瀏覽器除錯看了一下，發現他就是一個可編輯的div，

vue 分頁外掛vue-paginate（前端分頁的利器）

場景 . 分頁如果選擇前端分頁的話這是個利器啊分析 . 使用簡單，功能齊全 . 但是如果你的查詢量大就不要用這個外掛了，因為他需要的是全量資料，為了減輕資料庫的壓力，我們不可能在大資料下提供全量資料的用法安裝方式

nodejs學習筆記三——nodejs使用富文字外掛ueditor

/* 前後端通訊相關的配置,註釋只允許使用多行方式 */ { /* 上傳圖片配置項 */ "imageActionName": "uploadimage", /* 執行上傳圖片的action名稱 */ "imageFieldName": "upfile", /* 提交的圖片表單名稱

(轉載)微信小程式 —— 微信小程式解析html富文字外掛wxParse

下載並把wxParse放到小程式的目錄中把wxParse放在與page同一級目錄 wxParse裡的emojis包是可要可不要的。 12引用wxParse - wxml中 12<import src="../../wxParse/wxParse.wxml" />

富文字外掛推薦

富文字管理後臺富文字也是一個非常重要的功能，樓主在這裡也踩了不少的坑。樓主在專案裡最終選擇了tinymce這裡在簡述一下推薦使用tinymce的原因：tinymce是一家老牌做富文字的公司(這裡也

富文字編輯器Quill的簡單React封裝

最近要在React專案中實現富文字編輯器，我在基於不同外掛實現多種版本之後，體會到了Quill的強大，決定在專案中使用Quill實現富文字編輯器功能。大多數富文字編輯器都有所見即所得的（指不能進行擴充套件）的問題，這意味著我們很難或者不可能對其進行自定義滿足一些特定的需求

富文字外掛：summernote

一款輕便的富文字編輯器---Quill

/* 編輯器操作條選項 */ var toolbarOptions = [ ['bold', 'italic', 'underline', 'strike'], //開關按鈕 ['blockqu

vue富文字外掛vue-quill-editor的使用

相關推薦