修改成带建议的输入框, 修改富文本前面字符转成 &nbsp

admin-content/src/views/home.vue

@@ -52,6 +52,8 @@
               :file-list="fileList">
               <el-button size="small" type="primary">附件上传</el-button>
             </el-upload>
+            <!-- 来源输入带建议 -->
+            <el-autocomplete value-key="name" v-if="item.name == 'source'" v-model="formdata[item.name]" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect"></el-autocomplete>
           </template>
         </formData>
         <filterList v-else ref="filterList" :tableData="userList"  :filter="false" :readOnly="true" :filed="userfiled" @query="userfilterQuery" :total="userTotal"></filterList>
@@ -95,10 +97,10 @@ export default {
         { name: 'phone', label: '手机号' }
       ],
       formfiled: [
-        // { name: 'thumbnail', label: '缩略图', formater: 'slot' },
+        { name: 'thumbnail', label: '缩略图', formater: 'slot' },
         { name: 'title', label: '标题' },
         { name: 'curtTitle', label: '副标题' },
-        { name: 'source', label: '来源', formater: 'dict:source' },
+        { name: 'source', label: '来源', formater: 'slot' },
         { name: 'author', label: '作者' },
         { name: 'bind', label: '绑定菜单', formater: 'dict:menus' },
         { name: 'date', label: '时间', formater: 'date:datetime' },
@@ -158,6 +160,15 @@ export default {
   },
   methods: {
     ...mapActions(['contentsQuery', 'contentsCreate', 'contentsUpdate', 'contentsDelete', 'contentsQuery', 'contentsFetch', 'menusQuery', 'userQuery', 'sourceQuery']),
+    // 查询字典函数
+    async querySearchAsync(queryString, cb) {
+      await this.sourceQuery();
+      cb(this.dict.source);
+    },
+    // 选择建议
+    handleSelect(item) {
+      console.log(item);
+    },
     // 添加
     addcontents () {
       this.formdata = {};
@@ -233,16 +244,16 @@ export default {
     },
     // 缩略图上传限制
     beforeAvatarUpload(file) {
-      const isJPG = file.type === 'image/jpeg';
-      const isLt2M = file.size / 1024 / 1024 < 2;
+      // const isJPG = file.type === 'image/jpeg';
+      // const isLt2M = file.size / 1024 / 1024 < 2;
 
-      if (!isJPG) {
-        this.$message.error('上传图片只能是 JPG 格式!');
-      }
-      if (!isLt2M) {
-        this.$message.error('上传图片大小不能超过 2MB!');
-      }
-      return isJPG && isLt2M;
+      // if (!isJPG) {
+      //   this.$message.error('上传图片只能是 JPG 格式!');
+      // }
+      // if (!isLt2M) {
+      //   this.$message.error('上传图片大小不能超过 2MB!');
+      // }
+      // return isJPG && isLt2M;
     },
     async treeClick({ data, node }) {
       if (data.children) return;

admin-frame/src/components/editoritem2.vue

@@ -10,8 +10,7 @@
 <script>
 // import E from 'wangeditor';
 import '@wangeditor/editor/dist/css/style.css';
-import { createEditor, createToolbar } from '@wangeditor/editor';
-import MyMenu from '@lib/editorButtom2.js';
+import { createEditor, createToolbar, SlateTransforms } from '@wangeditor/editor';
 import $axios from '@lib/axios.js';
 // toolbar
 let editor;
@@ -20,12 +19,6 @@ export default {
   data () {
     return {
       info_: null,
-      myMenuConf: {
-        key: 'menu1',
-        factory() {
-          return new MyMenu();
-        }
-      },
       editorConfig: {
         MENU_CONF: {}
       }
@@ -50,8 +43,42 @@ export default {
         config: {
           onChange: (editor) => {
             this.info_ = editor.getHtml(); // 绑定当前逐渐地值
+            console.log(this.info_, 'this.info_');
             this.$emit('change', this.info_); // 将内容同步到父组件中
           },
+          customPaste: (editor, event) => {
+            const text = event.clipboardData.getData('text/plain');
+            // if (text) {
+            //   let html = text.split(/\n/).map(line => {
+            //     line = line.replace(/\r/, '');
+            //     return `<p>${line}</p>`;
+            //   }).join('\n');
+            //   console.log(html, 'html');
+            //   html = html.replace(/>(\s{2,})[^\s]/g, (all, $1, $2) => {
+            //     if ($1.charAt(0) == '\n' || $1.charAt(0) == '\r' || $1.charAt(0) == '\x20') return all;
+            //     //  &nbsp; &nbsp
+            //     return all.replace($1, Array($1.length).fill('&nbsp;&nbsp;&nbsp;&nbsp;').join(''));
+            //   });
+            //   const gethtml = editor.getHtml();
+            //   // console.log(`${gethtml}${html}`);
+            //   editor.setHtml(`${gethtml}${html}`);
+            //   // 阻止默认的粘贴行为
+            //   event.preventDefault();
+            //   return false;
+            // }
+            const nodeList = [];
+            text.split(/\n/).map(line => {
+              line = line.replace(/\r/, '');
+              line = line.replace(/(\s{2})/, (all, $1) => {
+                if ($1.charAt(0) == '\n' || $1.charAt(0) == '\r' || $1.charAt(0) == '\x20') return all;
+                return all.replace($1, Array($1.length).fill('    ').join(''));
+              });
+              nodeList.push({ type: 'paragraph', children: [{ text: line }] });
+            }).join('\n');
+            SlateTransforms.insertNodes(editor, nodeList);
+            event.preventDefault();
+            return false;
+          },
           MENU_CONF: {
             uploadImage: {
               async customUpload(file, insertFn) {