vue集成一個(gè)支持圖片縮放拖拽的富文本編輯器
需求:
根據(jù)業(yè)務(wù)要求,需要能夠上傳圖片,且上傳的圖片能在移動端中占滿屏幕寬度,故需要能等比縮放上傳的圖片,還需要能拖拽、縮放、改變圖片大小。嘗試多個(gè)第三方富文本編輯器,很難找到一個(gè)完美符合自己要求的編輯器。經(jīng)過多次嘗試,最終選擇了wangEditor富文本編輯器。 最初使用的是vue2Editor富文本編輯器,vue2Editor本身是不支持圖片拖拽的,但是提供了可配置圖片拖拽的方法,需要借助Quill.js來實(shí)現(xiàn)圖片拖拽。雖然滿足了業(yè)務(wù)需求,但是在移動端展示的效果不是很理想。 此次編輯器主要是上傳的富文本需要在移動端進(jìn)行展示,為了達(dá)到理想效果,需要能修改圖片百分比,當(dāng)設(shè)置img標(biāo)簽的width屬性為100% 時(shí),就可以滿足需求。最近發(fā)新版本(第四版 v4)的wangEditor可以滿足需求,最終選擇了它用于實(shí)際開發(fā)中。
效果圖:
代碼案例及相關(guān)配置如下:
安裝插件
npm i wangeditor --save // or yarn add wangeditor
編輯器配置
<template> <div class="w_editor"> <!-- 富文本編輯器 --> <div id="w_view"></div> </div> </template> <script> // 引入富文本 import WE from "wangeditor"; // 引入elementUI Message模塊(用于提示信息) import { Message } from "element-ui"; export default { name: "WEditor", props: { // 默認(rèn)值 defaultText: { type: String, default: "" }, // 富文本更新的值 richText: { type: String, default: "" } }, data() { return { // 編輯器實(shí)例 editor: null, // 富文本菜單選項(xiàng)配置 menuItem: [ "head", "bold", "fontSize", "fontName", "italic", "underline", "indent", "lineHeight", "foreColor", "backColor", "link", "list", "justify", "image", "video" ] }; }, watch: { // 監(jiān)聽默認(rèn)值 defaultText(nv, ov) { if (nv != "") { this.editor.txt.html(nv); this.$emit("update:rich-text", nv); } } }, mounted() { this.initEditor(); }, methods: { // 初始化編輯器 initEditor() { // 獲取編輯器dom節(jié)點(diǎn) const editor = new WE("#w_view"); // 配置編輯器 editor.config.showLinkImg = false; /* 隱藏插入網(wǎng)絡(luò)圖片的功能 */ editor.config.onchangeTimeout = 400; /* 配置觸發(fā) onchange 的時(shí)間頻率,默認(rèn)為 200ms */ editor.config.uploadImgMaxLength = 1; /* 限制一次最多能傳幾張圖片 */ // editor.config.showFullScreen = false; /* 配置全屏功能按鈕是否展示 */ editor.config.menus = [...this.menuItem]; /* 自定義系統(tǒng)菜單 */ // editor.config.uploadImgMaxSize = 5 * 1024 * 1024 /* 限制圖片大小 */; editor.config.customAlert = err => { Message.error(err); }; // 監(jiān)控變化,同步更新數(shù)據(jù) editor.config.onchange = newHtml => { // 異步更新組件富文本值的變化 this.$emit("update:rich-text", newHtml); }; // 自定義上傳圖片 editor.config.customUploadImg = (resultFiles, insertImgFn) => { /** * resultFiles:圖片上傳文件流 * insertImgFn:插入圖片到富文本 * 返回結(jié)果為生成的圖片URL地址 * */ // 此方法為自己封賺改寫的阿里云圖片OSS直傳插件。 this.$oss(resultFiles[0], resultFiles[0]["name"]).then(url => { !!url && insertImgFn(url); /* oss圖片上傳,將圖片插入到編輯器中 */ }); }; // 創(chuàng)建編輯器 editor.create(); this.editor = editor; } }, beforeDestroy() { // 銷毀編輯器 this.editor.destroy(); this.editor = null; } }; </script>
注: 具體參數(shù)配置請參考編輯器文檔使用說明。
組件中使用抽離的編輯器:
<template> <div class="editor"> <el-card shadow="never"> <div slot="header" class="clearfix"> <span>富文本編輯器</span> </div> <div class="card_center"> <WEditor :defaultText="defaultText" :richText.sync="richText" /> </div> </el-card> </div> </template> <script> // 引入封裝好的編輯器 import WEditor from "@/components/WEditor"; export default { name: "Editor", components: { WEditor }, data() { return { // 默認(rèn)值 defaultText: "", // 富文本更新的值 richText: "" }; }, created() { // 等待組件加載完畢賦值 this.$nextTick(() => { this.defaultText = `<p style="text-align: center; "><img src="https://tr-mba.oss-cn-beijing.aliyuncs.com/picture/202010/20_222430_8011.png" width="30%" style="text-align: center; max-width: 100%;"></p>`; }); } }; </script>
以上就是vue集成一個(gè)支持圖片縮放拖拽的富文本編輯器的詳細(xì)內(nèi)容,更多關(guān)于vue 富文本編輯器的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Vue實(shí)現(xiàn)縱向的物流時(shí)間軸效果的示例代碼
在當(dāng)今數(shù)字化的時(shí)代,用戶體驗(yàn)的優(yōu)化至關(guān)重要,物流信息的展示作為電商和供應(yīng)鏈領(lǐng)域中的關(guān)鍵環(huán)節(jié),其呈現(xiàn)方式直接影響著用戶對貨物運(yùn)輸狀態(tài)的感知和滿意度,所以本文介紹了Vue實(shí)現(xiàn)縱向的物流時(shí)間軸效果的方法,需要的朋友可以參考下2024-08-08vue跨域處理方式(vue項(xiàng)目中baseUrl設(shè)置問題)
這篇文章主要介紹了vue跨域處理方式(vue項(xiàng)目中baseUrl設(shè)置問題),具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05vue3中頁面跳轉(zhuǎn)兩種實(shí)現(xiàn)方式
在Vue3中Vue?Router是一個(gè)常用的路由管理庫,它提供了一種簡單而強(qiáng)大的方式來實(shí)現(xiàn)路由跳轉(zhuǎn)和導(dǎo)航,這篇文章主要給大家介紹了關(guān)于vue3中頁面跳轉(zhuǎn)的兩種實(shí)現(xiàn)方式,需要的朋友可以參考下2024-09-09vue+echarts定時(shí)重新繪制以達(dá)到刷新的動效問題
這篇文章主要介紹了vue+echarts定時(shí)重新繪制以達(dá)到刷新的動效問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06Vue如何使用Element-ui表單發(fā)送數(shù)據(jù)與多張圖片到后端詳解
在做項(xiàng)目的時(shí)候遇到一個(gè)問題,前端需要上傳表單到后端,表單數(shù)據(jù)包括文本內(nèi)容和圖片,這篇文章主要給大家介紹了關(guān)于Vue如何使用Element-ui表單發(fā)送數(shù)據(jù)與多張圖片到后端的相關(guān)資料,需要的朋友可以參考下2022-04-04vue基礎(chǔ)之事件簡寫、事件對象、冒泡、默認(rèn)行為、鍵盤事件實(shí)例分析
這篇文章主要介紹了vue基礎(chǔ)之事件簡寫、事件對象、冒泡、默認(rèn)行為、鍵盤事件,結(jié)合實(shí)例形式分析了vue.js事件簡寫、冒泡及阻止冒泡等相關(guān)操作技巧,需要的朋友可以參考下2019-03-03Vue.js頁面中有多個(gè)input搜索框如何實(shí)現(xiàn)防抖操作
debounce是lodash工具庫中的一個(gè)非常好用的函數(shù)。這篇文章主要介紹了Vue.js頁面中有多個(gè)input搜索框如何實(shí)現(xiàn)防抖操作,需要的朋友可以參考下2019-11-11