pref:优化新闻富文本编辑器

enterprise-manager-ui/admin/.env.development

 #开发环境
 NODE_ENV = "development"
-VUE_APP_API_BASE_URL= http://192.168.0.98:11086
+VUE_APP_API_BASE_URL= https://oa.xinhx.co/
+# VUE_APP_API_BASE_URL= http://192.168.0.98:11086

enterprise-manager-ui/admin/src/assets/less/quillEditor.css

+.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 {
+  content: "黑体";
+  font-family: "SimHei";
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Microsoft-YaHei"]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Microsoft-YaHei"]::before {
+  content: "微软雅黑";
+  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 {
+  content: "楷体";
+  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 {
+  content: "仿宋";
+  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 {
+  content: "Arial";
+  font-family: "Arial";
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Times-New-Roman"]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Times-New-Roman"]::before {
+  content: "Times New Roman";
+  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 {
+  content: "sans-serif";
+  font-family: "sans-serif";
+}
+.ql-font-SimSun {
+  font-family: "SimSun";
+}
+.ql-font-SimHei {
+  font-family: "SimHei";
+}
+.ql-font-Microsoft-YaHei {
+  font-family: "Microsoft YaHei";
+}
+.ql-font-KaiTi {
+  font-family: "KaiTi";
+}
+.ql-font-FangSong {
+  font-family: "FangSong";
+}
+.ql-font-Arial {
+  font-family: "Arial";
+}
+.ql-font-Times-New-Roman {
+  font-family: "Times New Roman";
+}
+.ql-font-sans-serif {
+  font-family: "sans-serif";
+}
+/* 字号设置 */
+/* 默认字号 */
+.ql-snow .ql-picker.ql-size .ql-picker-label::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item::before {
+  content: "14px";
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
+  content: "14px";
+  font-size: 14px;
+}
+.ql-size-14px {
+  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 {
+  content: "10px";
+  font-size: 10px;
+}
+.ql-size-10px {
+  font-size: 10px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="11px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="11px"]::before {
+  content: "11px";
+  font-size: 11px;
+}
+.ql-size-11px {
+  font-size: 11px;
+}
+.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 {
+  content: "12px";
+  font-size: 12px;
+}
+.ql-size-12px {
+  font-size: 12px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="13px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="13px"]::before {
+  content: "13px";
+  font-size: 13px;
+}
+.ql-size-13px {
+  font-size: 13px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="15px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="15px"]::before {
+  content: "15px";
+  font-size: 15px;
+}
+.ql-size-15px {
+  font-size: 15px;
+}
+.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 {
+  content: "16px";
+  font-size: 16px;
+}
+.ql-size-16px {
+  font-size: 16px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="17px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="17px"]::before {
+  content: "17px";
+  font-size: 17px;
+}
+.ql-size-17px {
+  font-size: 17px;
+}
+.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 {
+  content: "18px";
+  font-size: 18px;
+}
+.ql-size-18px {
+  font-size: 18px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="19px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="19px"]::before {
+  content: "19px";
+  font-size: 19px;
+}
+.ql-size-19px {
+  font-size: 19px;
+}
+.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 {
+  content: "20px";
+  font-size: 20px;
+}
+.ql-size-20px {
+  font-size: 20px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before {
+  content: "22px";
+  font-size: 22px;
+}
+.ql-size-22px {
+  font-size: 22px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before {
+  content: "26px";
+  font-size: 26px;
+}
+.ql-size-26px {
+  font-size: 26px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before {
+  content: "28px";
+  font-size: 28px;
+}
+.ql-size-28px {
+  font-size: 28px;
+}
+.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 {
+  content: "30px";
+  font-size: 30px;
+}
+.ql-size-30px {
+  font-size: 30px;
+}
+.ql-indent-1 {
+  padding-left: 0px !important;
+  text-indent: 1em !important;
+}
+.ql-indent-2 {
+  padding-left: 0px !important;
+  text-indent: 2em !important;
+}
+.ql-indent-3 {
+  padding-left: 0px !important;
+  text-indent: 3em !important;
+}
+.ql-indent-4 {
+  padding-left: 0px !important;
+  text-indent: 4em !important;
+}
+.ql-indent-5 {
+  padding-left: 0px !important;
+  text-indent: 5em !important;
+}
+.ql-indent-6 {
+  padding-left: 0px !important;
+  text-indent: 6em !important;
+}
+.ql-indent-7 {
+  padding-left: 0px !important;
+  text-indent: 7em !important;
+}
+.ql-indent-8 {
+  padding-left: 0px !important;
+  text-indent: 8em !important;
+}
+.ql-container {
+  height: 450px;
+}

enterprise-manager-ui/admin/src/assets/less/quillEditor.less

+.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 {
+  content: "黑体";
+  font-family: "SimHei";
+}
+
+.ql-snow
+  .ql-picker.ql-font
+  .ql-picker-label[data-value="Microsoft-YaHei"]::before,
+.ql-snow
+  .ql-picker.ql-font
+  .ql-picker-item[data-value="Microsoft-YaHei"]::before {
+  content: "微软雅黑";
+  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 {
+  content: "楷体";
+  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 {
+  content: "仿宋";
+  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 {
+  content: "Arial";
+  font-family: "Arial";
+}
+
+.ql-snow
+  .ql-picker.ql-font
+  .ql-picker-label[data-value="Times-New-Roman"]::before,
+.ql-snow
+  .ql-picker.ql-font
+  .ql-picker-item[data-value="Times-New-Roman"]::before {
+  content: "Times New Roman";
+  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 {
+  content: "sans-serif";
+  font-family: "sans-serif";
+}
+
+.ql-font-SimSun {
+  font-family: "SimSun";
+}
+
+.ql-font-SimHei {
+  font-family: "SimHei";
+}
+
+.ql-font-Microsoft-YaHei {
+  font-family: "Microsoft YaHei";
+}
+
+.ql-font-KaiTi {
+  font-family: "KaiTi";
+}
+
+.ql-font-FangSong {
+  font-family: "FangSong";
+}
+
+.ql-font-Arial {
+  font-family: "Arial";
+}
+
+.ql-font-Times-New-Roman {
+  font-family: "Times New Roman";
+}
+
+.ql-font-sans-serif {
+  font-family: "sans-serif";
+}
+
+/* 字号设置 */
+/* 默认字号 */
+.ql-snow .ql-picker.ql-size .ql-picker-label::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item::before {
+  content: "14px";
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
+  content: "14px";
+  font-size: 14px;
+}
+
+.ql-size-14px {
+  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 {
+  content: "10px";
+  font-size: 10px;
+}
+
+.ql-size-10px {
+  font-size: 10px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="11px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="11px"]::before {
+  content: "11px";
+  font-size: 11px;
+}
+
+.ql-size-11px {
+  font-size: 11px;
+}
+.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 {
+  content: "12px";
+  font-size: 12px;
+}
+
+.ql-size-12px {
+  font-size: 12px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="13px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="13px"]::before {
+  content: "13px";
+  font-size: 13px;
+}
+
+.ql-size-13px {
+  font-size: 13px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="15px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="15px"]::before {
+  content: "15px";
+  font-size: 15px;
+}
+
+.ql-size-15px {
+  font-size: 15px;
+}
+.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 {
+  content: "16px";
+  font-size: 16px;
+}
+
+.ql-size-16px {
+  font-size: 16px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="17px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="17px"]::before {
+  content: "17px";
+  font-size: 17px;
+}
+
+.ql-size-17px {
+  font-size: 17px;
+}
+
+.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 {
+  content: "18px";
+  font-size: 18px;
+}
+
+.ql-size-18px {
+  font-size: 18px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="19px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="19px"]::before {
+  content: "19px";
+  font-size: 19px;
+}
+
+.ql-size-19px {
+  font-size: 19px;
+}
+
+.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 {
+  content: "20px";
+  font-size: 20px;
+}
+
+.ql-size-20px {
+  font-size: 20px;
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before {
+  content: "22px";
+  font-size: 22px;
+}
+
+.ql-size-22px {
+  font-size: 22px;
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before {
+  content: "26px";
+  font-size: 26px;
+}
+
+.ql-size-26px {
+  font-size: 26px;
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before {
+  content: "28px";
+  font-size: 28px;
+}
+
+.ql-size-28px {
+  font-size: 28px;
+}
+
+.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 {
+  content: "30px";
+  font-size: 30px;
+}
+
+.ql-size-30px {
+  font-size: 30px;
+}
+.ql-indent-1 {
+  padding-left: 0px !important;
+  text-indent: 1em !important;
+}
+
+.ql-indent-2 {
+  padding-left: 0px !important;
+  text-indent: 2em !important;
+}
+
+.ql-indent-3 {
+  padding-left: 0px !important;
+  text-indent: 3em !important;
+}
+
+.ql-indent-4 {
+  padding-left: 0px !important;
+  text-indent: 4em !important;
+}
+
+.ql-indent-5 {
+  padding-left: 0px !important;
+  text-indent: 5em !important;
+}
+
+.ql-indent-6 {
+  padding-left: 0px !important;
+  text-indent: 6em !important;
+}
+
+.ql-indent-7 {
+  padding-left: 0px !important;
+  text-indent: 7em !important;
+}
+
+.ql-indent-8 {
+  padding-left: 0px !important;
+  text-indent: 8em !important;
+}
+.ql-container {
+  height: 450px;
+}

enterprise-manager-ui/admin/src/components/Editor.vue

@@ -12,7 +12,7 @@
       :on-success="uploadSuccessEdit"
     >
     </el-upload>
-    <div class="editor" ref="editor" :style="styles"></div>
+    <div class="editor ql-editor" ref="editor" :style="styles"></div>
   </div>
 </template>
 
@@ -21,7 +21,7 @@ import Quill from "quill";
 import "quill/dist/quill.core.css";
 import "quill/dist/quill.snow.css";
 import "quill/dist/quill.bubble.css";
-
+import "@/assets/less/quillEditor.css";
 export default {
   name: "Editor",
   props: {
@@ -64,7 +64,23 @@ export default {
               ["blockquote", "code-block"], // 引用  代码块
               [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
               [{ indent: "-1" }, { indent: "+1" }], // 缩进
-              [{ size: ["small", false, "large", "huge"] }], // 字体大小
+              [
+                {
+                  size: [
+                    false,
+                    "10px",
+                    "11px",
+                    "12px",
+                    "13px",
+                    "15px",
+                    "16px",
+                    "17px",
+                    "18px",
+                    "19px",
+                    "20px",
+                  ],
+                },
+              ], // 字体大小
               [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
               [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
               [{ align: [] }], // 对齐方式

enterprise-manager-ui/admin/src/views/news/drawershow.vue

@@ -5,7 +5,9 @@
     :visible.sync="open"
     :direction="direction"
     :destroy-on-close="true"
-    size="70%"
+    :close-on-press-escape="false"
+    :wrapperClosable="false"
+    size="75%"
   >
     <el-form ref="form" :model="form" :rules="rules" label-width="120px">
       <div class="form">
@@ -301,12 +303,13 @@ export default {
   width: 100%;
   .formleft {
     flex: 1;
-    width: 60%;
+    width: 62%;
     height: calc(100vh - 200px);
     overflow: auto;
+    padding-right: 30px;
   }
   .formright {
-    width: 40%;
+    width: 37%;
     flex-shrink: 0;
     flex-grow: 0;
   }

enterprise-manager-ui/admin/vue.config.js

@@ -18,8 +18,8 @@ module.exports = {
     proxy: {
       "/enterprise": {
         // target: "http://test.office.com:11073",
-        // target: 'http://8.136.255.30:11078',
-         target: 'http://192.168.0.98:11086',
+        target: 'https://oa.xinhx.co/',
+        //  target: 'http://192.168.0.98:11086',
         changeOrigin: true,
         secure: false,
         cookieDomainRewrite: "localhost",