perf: 优化站点中心简介编辑

base-manager-ui/admin/src/components/YQuillEditor.vue

@@ -71,6 +71,32 @@ let Size = Quill.import("attributors/style/size");
 Size.whitelist = ["10px", "12px", "16px", "18px", "20px", "30px", "32px"];
 Quill.register(Size, true);
 
+// 自定义鼠标停留按钮提示的交互
+const titleConfig = {
+  "ql-bold": "加粗",
+  "ql-color": "字体颜色",
+  "ql-font": "字体",
+  "ql-code": "插入代码",
+  "ql-italic": "斜体",
+  "ql-link": "添加链接",
+  "ql-background": "背景颜色",
+  "ql-size": "字体大小",
+  "ql-strike": "删除线",
+  "ql-script": "上标/下标",
+  "ql-underline": "下划线",
+  "ql-blockquote": "引用",
+  "ql-header": "标题",
+  "ql-indent": "缩进",
+  "ql-list": "列表",
+  "ql-align": "文本对齐",
+  "ql-direction": "文本方向",
+  "ql-code-block": "代码块",
+  "ql-formula": "公式",
+  "ql-image": "图片",
+  "ql-video": "视频",
+  "ql-clean": "清除字体样式",
+};
+
 // 自定义字体类型
 var fonts = [
   "SimSun",
@@ -97,8 +123,9 @@ export default {
       default: 1000, //kb
     },
     height: {
-      default: "80%",
+      default: "100%",
     },
+    options: {},
   },
 
   components: {
@@ -160,11 +187,16 @@ export default {
     },
     ...mapGetters("site", ["token"]),
   },
+  mounted() {
+    this.addQuillTitle();
+  },
   methods: {
-    onEditorBlur() {
+    onEditorBlur(e) {
+      this.$emit("onBlur", e);
       //失去焦点事件
     },
-    onEditorFocus() {
+    onEditorFocus(e) {
+      this.$emit("onFocus", e);
       //获得焦点事件
     },
 
@@ -192,11 +224,45 @@ export default {
         }
       }
     },
+    //定义鼠标停留按钮提示事件，在mounted里调用
+    addQuillTitle() {
+      const oToolBar = document.querySelector(".ql-toolbar");
+      const aButton = oToolBar.querySelectorAll("button");
+      const aSelect = oToolBar.querySelectorAll("select");
+      const aColor = oToolBar.querySelectorAll(
+        "span.ql-color , span.ql-background"
+      );
+      const aOption = oToolBar.querySelectorAll("span.ql-picker-item");
+      aButton.forEach(function (item) {
+        if (item.className === "ql-script") {
+          item.value === "sub" ? (item.title = "下标") : (item.title = "上标");
+        } else if (item.className === "ql-indent") {
+          item.value === "+1"
+            ? (item.title = "向右缩进")
+            : (item.title = "向左缩进");
+        } else if (item.className === "ql-list") {
+          item.value === "ordered"
+            ? (item.title = "有序列表")
+            : (item.title = "无序列表");
+        } else {
+          item.title = titleConfig[item.classList[0]];
+        }
+      });
+      aSelect.forEach(function (item) {
+        item.parentNode.title = titleConfig[item.classList[0]];
+      });
+      aColor.forEach(function (item) {
+        item.title = titleConfig[item.classList[0]];
+      });
+      aOption.forEach(function (item) {
+        item.title = item.dataset.value || "";
+      });
+    },
   },
 };
 </script>
 
-<style>
+<style lang="less" scoped>
 .editor {
   line-height: normal !important;
   /* height: 90% !important; */
@@ -208,191 +274,210 @@ export default {
   /* margin-right: 20px; */
   margin-top: 60px;
 }
-.ql-editor {
+
+/deep/ .ql-editor {
   padding: 0px !important;
   overflow: visible;
+  display: flex;
+  flex-direction: column;
 }
-.ql-snow .ql-tooltip[data-mode="link"]::before {
+/deep/.ql-container {
+  flex: 1;
+  overflow: auto;
+}
+/deep/.ql-snow .ql-tooltip[data-mode="link"]::before {
   content: "请输入链接地址:";
 }
-.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
+/deep/.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
   border-right: 0px;
   content: "保存";
   padding-right: 0px;
 }
 
-.ql-snow .ql-tooltip[data-mode="video"]::before {
+/deep/.ql-snow .ql-tooltip[data-mode="video"]::before {
   content: "请输入视频地址:";
 }
 
-.ql-snow .ql-picker.ql-size .ql-picker-label::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item::before {
+/deep/.ql-snow .ql-picker.ql-size .ql-picker-label::before,
+/deep/.ql-snow .ql-picker.ql-size .ql-picker-item::before {
   content: "14px" !important;
   font-size: 14px;
 }
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
+/deep/.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before,
+/deep/.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
   content: "10px" !important;
   font-size: 10px;
 }
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
+/deep/.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
+/deep/.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
   content: "12px" !important;
   font-size: 12px;
 }
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
+/deep/.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
+/deep/.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
   content: "16px" !important;
   font-size: 16px;
 }
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
+/deep/.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
+/deep/.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
   content: "18px" !important;
   font-size: 18px;
 }
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
+/deep/.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
+/deep/.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
   content: "20px" !important;
   font-size: 20px;
 }
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="30px"]::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="30px"]::before {
+/deep/.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="30px"]::before,
+/deep/.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="30px"]::before {
   content: "30px" !important;
   font-size: 30px;
 }
-.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
+/deep/.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
+/deep/.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
   content: "32px" !important;
   font-size: 32px;
 }
 
-.ql-snow .ql-picker.ql-header .ql-picker-label::before,
-.ql-snow .ql-picker.ql-header .ql-picker-item::before {
+/deep/.ql-snow .ql-picker.ql-header .ql-picker-label::before,
+/deep/.ql-snow .ql-picker.ql-header .ql-picker-item::before {
   content: "文本" !important;
 }
-.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
-.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
+/deep/.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
+/deep/.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
   content: "标题1" !important;
 }
-.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
-.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
+/deep/.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
+/deep/.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
   content: "标题2" !important;
 }
-.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
-.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
+/deep/.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
+/deep/.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
   content: "标题3" !important;
 }
-.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
-.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
+/deep/.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
+/deep/.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
   content: "标题4" !important;
 }
-.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
-.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
+/deep/.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
+/deep/.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
   content: "标题5" !important;
 }
-.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
-.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
+/deep/.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
+/deep/.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
   content: "标题6" !important;
 }
 
-.ql-snow .ql-picker.ql-font .ql-picker-label::before,
-.ql-snow .ql-picker.ql-font .ql-picker-item::before {
+/deep/.ql-snow .ql-picker.ql-font .ql-picker-label::before,
+/deep/.ql-snow .ql-picker.ql-font .ql-picker-item::before {
   content: "标准字体" !important;
 }
-.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
-.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
+/deep/.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
+/deep/.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
   content: "衬线字体" !important;
 }
-.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
-.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
+/deep/.ql-snow
+  .ql-picker.ql-font
+  .ql-picker-label[data-value="monospace"]::before,
+/deep/.ql-snow
+  .ql-picker.ql-font
+  .ql-picker-item[data-value="monospace"]::before {
   content: "等宽字体" !important;
 }
 
-.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimSun"]::before,
-.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimSun"]::before {
+/deep/.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimSun"]::before,
+/deep/.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimSun"]::before {
   content: "宋体" !important;
   font-family: "SimSun";
 }
 
-.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimHei"]::before,
-.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimHei"]::before {
+/deep/.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimHei"]::before,
+/deep/.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimHei"]::before {
   content: "黑体" !important;
   font-family: "SimHei";
 }
 
-.ql-snow
+/deep/.ql-snow
   .ql-picker.ql-font
   .ql-picker-label[data-value="Microsoft-YaHei"]::before,
-.ql-snow
+/deep/.ql-snow
   .ql-picker.ql-font
   .ql-picker-item[data-value="Microsoft-YaHei"]::before {
   content: "微软雅黑" !important;
   font-family: "Microsoft YaHei";
 }
 
-.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="KaiTi"]::before,
-.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="KaiTi"]::before {
+/deep/.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="KaiTi"]::before,
+/deep/.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="KaiTi"]::before {
   content: "楷体" !important;
   font-family: "KaiTi";
 }
 
-.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="FangSong"]::before,
-.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="FangSong"]::before {
+/deep/.ql-snow
+  .ql-picker.ql-font
+  .ql-picker-label[data-value="FangSong"]::before,
+/deep/.ql-snow
+  .ql-picker.ql-font
+  .ql-picker-item[data-value="FangSong"]::before {
   content: "仿宋" !important;
   font-family: "FangSong";
 }
 
-.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before,
-.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before {
+/deep/.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before,
+/deep/.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before {
   content: "Arial" !important;
   font-family: "Arial";
 }
 
-.ql-snow
+/deep/.ql-snow
   .ql-picker.ql-font
   .ql-picker-label[data-value="Times-New-Roman"]::before,
-.ql-snow
+/deep/.ql-snow
   .ql-picker.ql-font
   .ql-picker-item[data-value="Times-New-Roman"]::before {
   content: "Times New Roman" !important;
   font-family: "Times New Roman";
 }
 
-.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="sans-serif"]::before,
-.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sans-serif"]::before {
+/deep/.ql-snow
+  .ql-picker.ql-font
+  .ql-picker-label[data-value="sans-serif"]::before,
+/deep/.ql-snow
+  .ql-picker.ql-font
+  .ql-picker-item[data-value="sans-serif"]::before {
   content: "sans-serif" !important;
   font-family: "sans-serif";
 }
 
-.ql-font-SimSun {
+/deep/.ql-font-SimSun {
   font-family: "SimSun";
 }
 
-.ql-font-SimHei {
+/deep/.ql-font-SimHei {
   font-family: "SimHei";
 }
 
-.ql-font-Microsoft-YaHei {
+/deep/.ql-font-Microsoft-YaHei {
   font-family: "Microsoft YaHei";
 }
 
-.ql-font-KaiTi {
+/deep/.ql-font-KaiTi {
   font-family: "KaiTi";
 }
 
-.ql-font-FangSong {
+/deep/.ql-font-FangSong {
   font-family: "FangSong";
 }
 
-.ql-font-Arial {
+/deep/.ql-font-Arial {
   font-family: "Arial";
 }
 
-.ql-font-Times-New-Roman {
+/deep/.ql-font-Times-New-Roman {
   font-family: "Times New Roman";
 }
 
-.ql-font-sans-serif {
+/deep/.ql-font-sans-serif {
   font-family: "sans-serif";
 }
 </style>

base-manager-ui/admin/src/pages/basicset/site/components/addsite.vue

@@ -179,13 +179,22 @@
               </a-form-model-item>
             </a-col>
             <a-col :span="24">
-              <a-form-model-item label="中心简介" prop="siteRemark">
-                <a-textarea
+              <a-form-model-item
+                class="siteRemark"
+                label="中心简介"
+                prop="siteRemark"
+              >
+                <div class="content-box">
+                  <y-quill-editor
+                    v-model="formInfo.siteRemark"
+                  ></y-quill-editor>
+                </div>
+                <!-- <a-textarea
                   v-model="formInfo.siteRemark"
                   class="siteRemark"
                   placeholder="请输入中心简介"
                   allow-clear
-                />
+                /> -->
               </a-form-model-item>
             </a-col>
             <a-col :span="24">
@@ -302,6 +311,7 @@ import { modelList, siteSave } from "@/services/basicsetFun";
 import YCheckbox from "@/components/ycheckbox/YCheckbox.vue";
 import YSwitch from "@/components/yswitch/YSwitch.vue";
 import YUpload from "@/components/YUpload.vue";
+import YQuillEditor from "@/components/YQuillEditor.vue";
 // import options from "@/utils/city";
 import { regionData } from "element-china-area-data";
 import { checkPort, checkIp, checkPhone } from "@/utils/validate";
@@ -329,6 +339,7 @@ export default {
     YCheckbox,
     YSwitch,
     YUpload,
+    YQuillEditor,
   },
   data() {
     return {
@@ -752,8 +763,13 @@ export default {
   }
 }
 .siteRemark {
-  /deep/ textarea {
-    width: 990px !important;
+  display: flex;
+  align-items: flex-start;
+  /deep/.ant-form-item-label {
+    flex-shrink: 0;
+  }
+  .content-box {
+    height: 400px;
   }
 }
 /deep/.ant-form-explain {

base-manager-ui/admin/src/pages/basicset/site/components/alldetails.vue

 <template>
   <a-modal
     centered
-    title="查看所有"
+    title="中心简介"
     :visible="VisibleShow"
-    :footer="null"
-    :width="900"
+    width="60%"
     @cancel="clickClose"
   >
-    {{ details }}
-    <div class="close_btn">
-      <a-button @click="clickClose">关闭</a-button>
+    <div class="content ql-editor" v-html="details"></div>
+    <div slot="footer">
+      <a-button type="primary" @click="clickClose">关闭</a-button>
     </div>
   </a-modal>
 </template>
@@ -54,4 +53,17 @@ export default {
   display: flex;
   justify-content: center;
 }
+/deep/.ql-editor {
+  padding: 0 !important;
+}
+/deep/.ant-modal-body {
+  max-height: 600px;
+  overflow: auto;
+}
+.content {
+  width: 100%;
+  /deep/ img {
+    max-width: 100%;
+  }
+}
 </style>

base-manager-ui/admin/src/pages/basicset/site/website.vue

@@ -117,12 +117,13 @@
                     <a-row>
                       <a-col :span="19">
                         <span>中心简介：</span>
-                        <div class="col_item">
+                        <span @click="cookAll(item.siteRemark)">查看全部</span>
+                        <!-- <div class="col_item">
                           <div class="detail_place">{{ item.siteRemark }}</div>
                           <span @click="cookAll(item.siteRemark)"
                             >查看全部</span
                           >
-                        </div>
+                        </div> -->
                       </a-col>
                     </a-row>
                   </div>
@@ -576,7 +577,7 @@ export default {
             text-align: center;
             color: #fff;
             border-radius: 5px;
-            .item-text{
+            .item-text {
               display: -webkit-box;
               -webkit-box-orient: vertical;
               -webkit-line-clamp: 2;