Vue富文字編輯器(圖片拖拽縮放)
阿新 • • 發佈:2020-10-22
富文字編輯器(圖片拖拽縮放)
需求:
根據業務要求,需要能夠上傳圖片,且上傳的圖片能在移動端中佔滿螢幕寬度,故需要能等比縮放上傳的圖片,還需要能拖拽、縮放、改變圖片大小。嘗試多個第三方富文字編輯器,很難找到一個完美符合自己要求的編輯器。經過多次嘗試,最終選擇了wangEditor富文字編輯器。
最初使用的是vue2Editor富文字編輯器,vue2Editor本身是不支援圖片拖拽的,但是提供了可配置圖片拖拽的方法,需要藉助Qill.js來實現圖片拖拽。雖然滿足了業務需求,但是在移動端展示的效果不是很理想。
此次編輯器主要是上傳的富文字需要在移動端進行展示,為了達到理想效果,需要能修改圖片百分比,當設定img標籤
效果圖:
程式碼案例及相關配置如下:
- 安裝外掛
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: { // 預設值 defaultText: { type: String, default: "" }, // 富文字更新的值 richText: { type: String, default: "" } }, data() { return { // 編輯器例項 editor: null, // 富文字選單選項配置 menuItem: [ "head", "bold", "fontSize", "fontName", "italic", "underline", "indent", "lineHeight", "foreColor", "backColor", "link", "list", "justify", "image", "video" ] }; }, watch: { // 監聽預設值 defaultText(nv, ov) { if (nv != "") { this.editor.txt.html(nv); this.$emit("update:rich-text", nv); } } }, mounted() { this.initEditor(); }, methods: { // 初始化編輯器 initEditor() { // 獲取編輯器dom節點 const editor = new WE("#w_view"); // 配置編輯器 editor.config.showLinkImg = false; /* 隱藏插入網路圖片的功能 */ editor.config.onchangeTimeout = 400; /* 配置觸發 onchange 的時間頻率,預設為 200ms */ editor.config.uploadImgMaxLength = 1; /* 限制一次最多能傳幾張圖片 */ // editor.config.showFullScreen = false; /* 配置全屏功能按鈕是否展示 */ editor.config.menus = [...this.menuItem]; /* 自定義系統選單 */ // editor.config.uploadImgMaxSize = 5 * 1024 * 1024 /* 限制圖片大小 */; editor.config.customAlert = err => { Message.error(err); }; // 監控變化,同步更新資料 editor.config.onchange = newHtml => { // 非同步更新元件富文字值的變化 this.$emit("update:rich-text", newHtml); }; // 自定義上傳圖片 editor.config.customUploadImg = (resultFiles, insertImgFn) => { /** * resultFiles:圖片上傳檔案流 * insertImgFn:插入圖片到富文字 * 返回結果為生成的圖片URL地址 * */ // 此方法為自己封賺改寫的阿里雲圖片OSS直傳外掛。 this.$oss(resultFiles[0], resultFiles[0]["name"]).then(url => { !!url && insertImgFn(url); /* oss圖片上傳,將圖片插入到編輯器中 */ }); }; // 建立編輯器 editor.create(); this.editor = editor; } }, beforeDestroy() { // 銷燬編輯器 this.editor.destroy(); this.editor = null; } }; </script>
注:具體引數配置請參考編輯器文件使用說明。
元件中使用抽離的編輯器:
<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 { // 預設值 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>