|
@@ -0,0 +1,231 @@
|
|
|
+<template>
|
|
|
+ <section
|
|
|
+ class="my-umeditor"
|
|
|
+ v-loading="isLoading"
|
|
|
+ element-loading-text="富文本资源加载中..."
|
|
|
+ element-loading-spinner="el-icon-loading"
|
|
|
+ >
|
|
|
+ <!-- 加载编辑器的容器 -->
|
|
|
+ <script
|
|
|
+ :id="editorId"
|
|
|
+ type="text/plain"
|
|
|
+ style="width: 100%;min-height:400px;"
|
|
|
+ ></script>
|
|
|
+ <upload-files
|
|
|
+ header-title="上传图片"
|
|
|
+ btn-title="添加图片"
|
|
|
+ tip="支持上传类型为图片png、jpg、jpeg、gif的文件,图片大小不超过1M"
|
|
|
+ v-if="isShowUpload"
|
|
|
+ limit-mime-type="image/png, image/jpg, image/jpeg, image/gif"
|
|
|
+ bucket="files-hoolihome"
|
|
|
+ file-directory="/run/material/img/"
|
|
|
+ :multiple="false"
|
|
|
+ :limit-size="1 * 1024 * 1024"
|
|
|
+ :limit="1"
|
|
|
+ @success="uploadSuccess"
|
|
|
+ @close="isShowUpload = false"
|
|
|
+ ></upload-files>
|
|
|
+ </section>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import UploadFiles from "@/components/common/UploadFiles";
|
|
|
+
|
|
|
+//工具栏上的所有的功能按钮和下拉框,可以在new编辑器的实例时选择自己需要的重新定义
|
|
|
+const toolbar = [
|
|
|
+ "source | undo redo | bold italic underline strikethrough | forecolor backcolor | removeformat |",
|
|
|
+ "insertorderedlist insertunorderedlist | selectall cleardoc paragraph | fontfamily fontsize",
|
|
|
+ "| justifyleft justifycenter justifyright justifyjustify |",
|
|
|
+ "link unlink ",
|
|
|
+ "| horizontal preview fullscreen | upload-image-button"
|
|
|
+];
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: { UploadFiles },
|
|
|
+ props: {
|
|
|
+ editorId: {
|
|
|
+ type: String,
|
|
|
+ require: false,
|
|
|
+ default: "myUMEditor"
|
|
|
+ },
|
|
|
+ richText: {
|
|
|
+ type: String,
|
|
|
+ required: false,
|
|
|
+ default: ""
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isLoading: true,
|
|
|
+ um: null,
|
|
|
+ isShowUpload: false
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ richText() {
|
|
|
+ if (this.um) {
|
|
|
+ this.um.setContent(this.richText);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ const error = () => {
|
|
|
+ this.isLoading = false;
|
|
|
+ this.$confirm("加载富文本资源失败,请刷新页面重试", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning"
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ window.location.reload();
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ };
|
|
|
+ // 选项配置
|
|
|
+ const options = {
|
|
|
+ //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
|
|
|
+ toolbar
|
|
|
+ };
|
|
|
+ const baseUrl = "//ueditor.baidu.com/umeditor";
|
|
|
+ this.$utils
|
|
|
+ .loadSrc(
|
|
|
+ `${baseUrl}/themes/default/css/umeditor.css`,
|
|
|
+ "CSS_UMEDITOR",
|
|
|
+ "css"
|
|
|
+ )
|
|
|
+ .catch(() => {
|
|
|
+ error();
|
|
|
+ });
|
|
|
+ this.$utils
|
|
|
+ .loadSrc(`${baseUrl}/third-party/jquery.min.js`, "JQUERY", "js")
|
|
|
+ .then(() => {
|
|
|
+ window.$(() => {
|
|
|
+ this.$utils
|
|
|
+ .loadSrc(`${baseUrl}/third-party/template.min.js`, "TEMPLATE", "js")
|
|
|
+ .then(() => {
|
|
|
+ window.setTimeout(() => {
|
|
|
+ this.$utils
|
|
|
+ .loadSrc(
|
|
|
+ `${baseUrl}/umeditor.config.js`,
|
|
|
+ "UMEDITOR_CONFIG",
|
|
|
+ "js"
|
|
|
+ )
|
|
|
+ .then(() => {
|
|
|
+ window.setTimeout(() => {
|
|
|
+ this.$utils
|
|
|
+ .loadSrc(`${baseUrl}/umeditor.min.js`, "UMEDITOR", "js")
|
|
|
+ .then(() => {
|
|
|
+ window.setTimeout(() => {
|
|
|
+ this.$utils
|
|
|
+ .loadSrc(
|
|
|
+ `${baseUrl}/lang/zh-cn/zh-cn.js`,
|
|
|
+ "UMEDITOR_ZHCN",
|
|
|
+ "js"
|
|
|
+ )
|
|
|
+ .then(() => {
|
|
|
+ window.setTimeout(() => {
|
|
|
+ this.isLoading = false;
|
|
|
+ if (window.UM) {
|
|
|
+ this.addUploadImageButton();
|
|
|
+ this.um = window.UM.getEditor(
|
|
|
+ this.editorId,
|
|
|
+ options
|
|
|
+ );
|
|
|
+ this.um.ready(() => {
|
|
|
+ this.$emit("readyCallback");
|
|
|
+ });
|
|
|
+ this.um.addListener("contentChange", () => {
|
|
|
+ this.$emit(
|
|
|
+ "postData",
|
|
|
+ this.um.getContent()
|
|
|
+ );
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }, 50);
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ error();
|
|
|
+ });
|
|
|
+ }, 100);
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ error();
|
|
|
+ });
|
|
|
+ }, 50);
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ error();
|
|
|
+ });
|
|
|
+ }, 50);
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ error();
|
|
|
+ });
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ error();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ if (this.um) {
|
|
|
+ this.um.destroy();
|
|
|
+ this.um = null;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 添加自定义上传图片按钮
|
|
|
+ addUploadImageButton() {
|
|
|
+ const that = this;
|
|
|
+ window.UM.registerUI("upload-image-button", function(name) {
|
|
|
+ var $btn = window.$.eduibutton({
|
|
|
+ icon: name,
|
|
|
+ click: function() {
|
|
|
+ that.isShowUpload = true;
|
|
|
+ },
|
|
|
+ title: "单图上传"
|
|
|
+ });
|
|
|
+ this.addListener("selectionchange", function() {
|
|
|
+ //切换为不可编辑时,把自己变灰
|
|
|
+ var state = this.queryCommandState(name);
|
|
|
+ $btn
|
|
|
+ .edui()
|
|
|
+ .disabled(state == -1)
|
|
|
+ .active(state == 1);
|
|
|
+ });
|
|
|
+ return $btn;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 文件上传成功
|
|
|
+ uploadSuccess(filesList) {
|
|
|
+ // 有值说明添加了文件
|
|
|
+ if (filesList) {
|
|
|
+ const filesArr = [...filesList];
|
|
|
+ filesArr.forEach(item => {
|
|
|
+ this.um.execCommand("insertimage", { src: item.url });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+.edui-icon-upload-image-button {
|
|
|
+ background-image: url("/run/UEditor/themes/default/images/icon-upload-image.png") !important;
|
|
|
+ background-size: 20px 20px;
|
|
|
+ transform: scale(0.8);
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.my-umeditor {
|
|
|
+ min-height: 368px;
|
|
|
+ /deep/ .edui-container {
|
|
|
+ z-index: 99999 !important;
|
|
|
+ div {
|
|
|
+ line-height: initial;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|