文章主要介紹了vue集成一個支持圖片縮放拖拽的富文本編輯器，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
需求：
根據(jù)業(yè)務(wù)要求，需要能夠上傳圖片，且上傳的圖片能在移動端中占滿屏幕寬度，故需要能等比縮放上傳的圖片，還需要能拖拽、縮放、改變圖片大小。嘗試多個第三方富文本編輯器，很難找到一個完美符合自己要求的編輯器。經(jīng)過多次嘗試，最終選擇了wangEditor富文本編輯器。 最初使用的是vue2Editor富文本編輯器，vue2Editor本身是不支持圖片拖拽的，但是提供了可配置圖片拖拽的方法，需要借助Quill.js來實現(xiàn)圖片拖拽。雖然滿足了業(yè)務(wù)需求，但是在移動端展示的效果不是很理想。 此次編輯器主要是上傳的富文本需要在移動端進行展示，為了達到理想效果，需要能修改圖片百分比，當設(shè)置img標簽的width屬性為100% 時，就可以滿足需求。最近發(fā)新版本（第四版 v4）的wangEditor可以滿足需求，最終選擇了它用于實際開發(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: {
// 默認值
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: {
// 監(jiān)聽默認值
defaultText(nv, ov) {
if (nv != "") {
this.editor.txt.html(nv);
this.$emit("update:rich-text", nv);
}
}
},
mounted() {
this.initEditor();
},
methods: {
// 初始化編輯器
initEditor() {
// 獲取編輯器dom節(jié)點
const editor = new WE("#w_view");
// 配置編輯器
editor.config.showLinkImg = false; /* 隱藏插入網(wǎng)絡(luò)圖片的功能 */
editor.config.onchangeTimeout = 400; /* 配置觸發(fā) onchange 的時間頻率，默認為 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 {
// 默認值
defaultText: "",
// 富文本更新的值
richText: ""
};
},
created() {
// 等待組件加載完畢賦值
this.$nextTick(() => {
this.defaultText = `<p style="text-align: center; "><img src=https://a5img.pncdn.cn/2021/0310/1615366398251.pngwidth="30%" style="text-align: center; max-width: 100%;"></p>`;
});
}
};
</script>
以上就是vue集成一個支持圖片縮放拖拽的富文本編輯器的詳細內(nèi)容，更多關(guān)于vue 富文本編輯器的資料請關(guān)注腳本之家其它相關(guān)文章！
來源：腳本之家
鏈接：https://www.jb51.net/article/205012.htm
申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！
