富文本编辑器可调整图片大小

build/webpack.dev.conf.js

@@ -51,6 +51,10 @@ const devWebpackConfig = merge(baseWebpackConfig, {
       template: 'index.html',
       inject: true
     }),
+    new webpack.ProvidePlugin({
+      'window.Quill': 'quill/dist/quill.js',
+      'Quill': 'quill/dist/quill.js'
+    }),
   ]
 })
 

package.json

@@ -26,6 +26,7 @@
     "lodash": "4.17.5",
     "node-sass": "^6.0.1",
     "npm": "^6.9.0",
+    "quill-image-resize-module": "^3.0.0",
     "sass-loader": "6.0.6",
     "svg-sprite-loader": "3.7.3",
     "vue": "2.5.16",

src/views/modules/book/yian-add-or-update.vue

@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="!dataForm.yianid ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible"
-    @close="handlereset" lock-scroll width="750px">
+    @close="handlereset" lock-scroll width="1250px">
     <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="100px">
       <!-- <el-form-item label="所属分类" prop="poids">
         <el-cascader v-model="dataForm.poids" :options="categorys" :props="props" clearable></el-cascader>
@@ -36,7 +36,7 @@
         <quill-editor v-model="dataForm.contents" ref="myQuillEditor" :options="editorOption"
           @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" 
           @ready="onEditorReady($event)" class="shangpin_editor">
-        </quill-editor>        
+        </quill-editor>
       </el-form-item>
       <el-form-item label="排序" prop="sort">
         <el-input v-model="dataForm.sort" placeholder="排序"></el-input>
@@ -50,15 +50,17 @@
 </template>
 
 <script>
-  import {
-    quillEditor
-  } from 'vue-quill-editor'
+  import {quillEditor} from 'vue-quill-editor'
   import global from '../../common/common.vue' //引入共用组间
 
   import 'quill/dist/quill.core.css'
   import 'quill/dist/quill.snow.css'
 import 'quill/dist/quill.bubble.css'
-  
+  import ImageResize  from 'quill-image-resize-module' // 调整大小组件。
+  // import { ImageDrop } from 'quill-image-drop-module'; // 拖动加载图片组件。
+  Quill.register('modules/imageResize', ImageResize );
+  // Quill.register('modules/imageDrop', ImageDrop);
+
   const toolbarOptions = [
   ['bold', 'italic', 'underline', 'strike'],        // 加粗，斜体，下划线，删除线
   ['blockquote', 'code-block'],                      //引用，代码块
@@ -77,6 +79,9 @@ import 'quill/dist/quill.bubble.css'
 ]
 
   export default {
+    components: {
+      quillEditor
+    },
     data() {
       return {        
         baseUrl: global.baseUrl,        
@@ -139,6 +144,14 @@ import 'quill/dist/quill.bubble.css'
                 }
               }
             },
+            imageResize: {
+              displayStyles: {
+                backgroundColor: 'black',
+                border: 'none',
+                color: 'white'
+              },
+              modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
+            }
           },
           // modules: {
           //   toolbar: [
@@ -358,9 +371,6 @@ import 'quill/dist/quill.bubble.css'
       },
       
     },
-    components: {
-      quillEditor
-  },
   mounted() {
     // this.$bus.$on("haveBookIds", (data) => {  
     //   // console.log('haveBookIds', data)              
@@ -407,6 +417,6 @@ import 'quill/dist/quill.bubble.css'
   }
 
   .shangpin_editor .ql-editor {
-    height: 150px;
+    height: 300px;
   }
 </style>

src/views/modules/book/yian.vue

@@ -25,10 +25,16 @@
         align="center"
         width="50">
       </el-table-column>
-      <el-table-column label="序号" width="70" align="center">
+      <!-- <el-table-column label="序号" width="70" align="center">
         <template slot-scope="scope">
           {{ (pageIndex - 1) * pageSize + scope.$index + 1 }}
         </template>
+      </el-table-column> -->
+      <el-table-column
+        prop="sort"
+        header-align="center"
+        align="center"
+        label="排序">
       </el-table-column>
       <!-- <el-table-column
         prop="id"