富文本编辑器选择的是wangEditer，并扩展了多语言、放大缩小、插入源码功能，代码如下，欢迎交流～
<template> <div> <div :ref="name" :id="name" style="text-align: left;"></div> <!-- <button v-on:click="getContent">查看内容</button> --> </div></template><script> import E from "wangeditor"; import * as api from "@pd/common/api"; import VueCookies from "vue-cookies"; window.timer = null; export default { name: "editor", props: ["content", "name"], data() { return { editorContent: "", editor: null, lang: VueCookies.get("language"), language: { 设置标题: { en_US: "Paragraph Format", th_TH: "รูปแบบตัวอักษร" }, 字号: { en_US: "Font Size ", th_TH: "ขนาดแบบอักษร" }, 字体: { en_US: "Font ", th_TH: "แบบอักษร" }, 正文: { en_US: "Normal", th_TH: "ปกติ" }, 链接: { en_US: "Link", th_TH: "แทรกลิงค์" }, 链接文字: { en_US: "Display Link Name", th_TH: "แสดงคำชื่อลิ้งก์ " }, 创建: { en_US: "Create", th_TH: "สร้าง" }, 文字颜色: { en_US: "Font Color ", th_TH: "สีแบบอักษร" }, 背景色: { en_US: "Text Highlight Color ", th_TH: "ไฮไลต์พื้นหลัง" }, 对齐方式: { en_US: "Text Alignment", th_TH: "จัดรูปแบบข้อความ" }, 靠左: { en_US: "Align Left", th_TH: "จัดชิดซ้าย" }, 靠右: { en_US: "Align Right", th_TH: "จัดชิดขวา" }, 居中: { en_US: "Align Center", th_TH: "กึ่งกลาง " }, 设置列表: { en_US: "Create Table", th_TH: "ใส่หัวข้อ" }, 有序列表: { en_US: "Insert Numbered List", th_TH: "แบบตัวเลข" }, 无序列表: { en_US: "Insert Bulleted List", th_TH: "แบบหัวข้อย่อย" }, 上传图片: { en_US: "Upload Photo", th_TH: "อัปโหลดรูปภาพ" }, 网络图片: { en_US: "Insert Photo URL", th_TH: "แทรกลิ้งก์รูปภาพ" }, 图片链接: { en_US: "Photo URL", th_TH: "ใส่ลิงค์รูปภาพ" }, 插入表格: { en_US: "Insert Table", th_TH: "แทรกตาราง" }, 行: { en_US: "Row", th_TH: "แถว" }, 列的表格: { en_US: "Columns", th_TH: "คอลัมน์" }, 插入代码: { en_US: "Insert Code", th_TH: "แทรก " }, 插入: { en_US: "Insert", th_TH: "แทรก" }, 图片Link: { en_US: "Insert URL ", th_TH: "ใส่ URL" }, Link文字: { en_US: " Display Link Name", th_TH: "แสดงคำชื่อลิ้งก์" }, }, }; }, watch: { content(newVal) { if (!window.timer) { this.editor.txt.html(newVal); this.editorContent = newVal; } }, }, computed: { toolbar() { return document.querySelector(`#${this.name} .w-e-toolbar`); }, }, methods: { //放大缩小 initFullscreen() { if (this.name) { let enlarge = `<i title="${this.$t( "Full Screen" )}" class="el-icon-full-screen"></i>`; let shrink = `<i title="${this.$t( "Exit Full Screen" )}" class="el-icon-full-screen"></i>`; let isFullscreen = false; let fullscreenBtn = this.createBtn(enlarge); this.toolbar.appendChild(fullscreenBtn); fullscreenBtn.addEventListener( "click", () => { this.$refs[this.name].className = isFullscreen ? "" : "fullscreen-editor"; fullscreenBtn.innerHTML = isFullscreen ? enlarge : shrink; isFullscreen = !isFullscreen; }, false ); } }, //查看源码 initSource() { let sourceMenu = `<i title="${this.$t( "Source Code" )}" class="wangeditor-menu-img-code"></></i>`; let isSource = false; let sourceBtn = this.createBtn(sourceMenu); this.toolbar.appendChild(sourceBtn); let _self = this; sourceBtn.addEventListener( "click", () => { if (!isSource) { _self.editor.txt.html( _self.editorContent .replace(/</g, "<") .replace(/>/g, ">") .replace(/ /g, " ") ); } else { _self.editor.txt.text( _self.editorContent .replace(/</gi, "<") .replace(/>/gi, ">") .replace(/ /gi, " ") ); } isSource = !isSource; }, false ); }, initImglimit() { // todo // let pDom = document.createElement("p"); // pDom.className = "imgLimit"; // pDom.innerText = // "Total uploaded photo sizes must not exceed 2MB (2,048 KB) "; // console.log(document.querySelectorAll(".w-e-icon-image")); // document // .querySelectorAll(".w-e-icon-image") // .parentNode.addEventListener("click", () => { // setTimeout(function() { // document.querySelector(".w-e-up-img-container").appendChild(pDom); // }, 100); // }); }, createBtn(btnHtml) { let btn = document.createElement("div"); btn.className = "w-e-menu"; btn.innerHTML = btnHtml; return btn; }, getContent: function () { var name = this.editorContent; console.log(name); }, getLan() { let obj = {}; for (let key in this.language) { obj[key] = this.language[key][this.lang]; } return obj; }, customAlert(errInfo) { if (errInfo.indexOf("不是图片") > -1) { this.$message(this.$t("picTypeLimit")); } else if (errInfo.indexOf("大于") > -1) { this.$message(this.$t("Each photo must be less than 2MB (2,048 KB)")); } else { this.$message(errInfo); } }, }, mounted() { let self = this; var editor = new E(this.$refs[this.name]); editor.customConfig.zIndex = 10; if (VueCookies.get("jdc_language") != "zh_CN") { editor.customConfig.lang = this.getLan(); editor.customConfig.customAlert = this.customAlert; } editor.customConfig.uploadImgShowBase64 = false; // base 64 存储图片 if (location.href.includes("//seller")) editor.customConfig.uploadImgServer = "//shop.jd.co.th/product/api/v1/image/upload"; else { editor.customConfig.uploadImgServer = "//beta-shop.jd.co.th/product/api/v1/image/upload"; } editor.customConfig.withCredentials = true; editor.customConfig.uploadImgHeaders = {}; // 自定义 header editor.customConfig.uploadFileName = "filedata"; // 后端接受上传文件的参数名 editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024; // 将图片大小限制为 2M editor.customConfig.uploadImgMaxLength = 100; // 限制一次最多上传 1 张图片 editor.customConfig.uploadImgTimeout = 3 * 60 * 1000; // 设置超时时间 editor.customConfig.uploadImgParams = { dis: 1 }; editor.customConfig.customUploadImg = function (files, insert) { let i = 0; function upload(file, insert) { api .uploadImages({ method: "post", params: { filedata: file, dis: 1 }, }) .then(result => { if (result.code == 1) insert(result.data); else { self.$message({ message: result.msg, type: "error" }); } if (files[++i]) upload(files[i], insert); }) .catch(() => { self.$message({ message: `number ${i} upload error`, type: "error", }); if (files[++i]) upload(files[i], insert); }); } upload(files[i], insert); }; editor.customConfig.menus = [ "head", // 标题 "bold", // 粗体 "italic", // 斜体 "fontSize", // 字号 "underline", // 下划线 "strikeThrough", // 删除线 "foreColor", // 文字颜色 "backColor", // 背景颜色 "link", // 插入链接 "list", // 列表 "justify", // 对齐方式 // "quote", // 引用 "image", // 插入图片 "table", // 表格 "code", // 插入代码 "undo", // 撤销 "redo", // 重复 ]; editor.customConfig.uploadImgHooks = { customInsert: (insertImg, result) => { // 图片上传成功，插入图片的回调 var url = result.data; insertImg(url); }, }; editor.customConfig.onchange = html => { self.editorContent = html; if (window.timer) clearTimeout(window.timer); window.timer = setTimeout(() => { self.$emit("setContent", html), clearTimeout(window.timer); }, 500); }; editor.create(); editor.txt.html(this.content); this.editor = editor; this.initFullscreen(); this.initSource(); }, destroyed() { console.log("--------destroyed", window.timer); }, };</script><style lang="scss"> .w-e-toolbar { flex-wrap: wrap; } .w-e-toolbar { flex-wrap: wrap; -webkit-box-lines: multiple; } .w-e-toolbar .w-e-menu:hover { z-index: 10002 !important; } .w-e-menu a { text-decoration: none; } .fullscreen-editor { position: fixed !important; width: 100% !important; height: 100% !important; left: 0px !important; top: 0px !important; background-color: white; z-index: 9999; } .fullscreen-editor .w-e-text-container { width: 100% !important; height: 95% !important; } .wangeditor-menu-img-enlarge2:before { content: "\e98b"; }</style>
