课程目录章节列表富文本

src/assets/css/time-line.less

@@ -70,6 +70,17 @@
     ;
 }
 
+.custom-chapter-height{
+    height: 370px;
+}
+.chapter-avatar-uploader{
+    height: 4px;
+}
+.chapter_editor {
+    height: 250px;
+    width:100%
+}
+
 
 /* 滚动条美化 */
 ::-webkit-scrollbar-track {

src/views/modules/course/chapter-add-or-update.vue

@@ -35,12 +35,18 @@
           <img width="100%" :src="dataForm.imgUrl" alt="">
         </el-dialog>
       </el-form-item>
-      <el-form-item label="内容" prop="content">
-        <el-input v-model="dataForm.content" placeholder="内容"></el-input>
-      </el-form-item>
       <el-form-item label="排序" prop="sort">
         <el-input v-model="dataForm.sort" placeholder="排序"></el-input>
       </el-form-item>
+      <el-form-item label="内容" prop="content" class="custom-chapter-height">
+        <!-- <el-input v-model="dataForm.content" placeholder="内容"></el-input> -->
+        <el-upload class="chapter-avatar-uploader" :action="baseUrl + '/oss/fileoss'" accept=".jpeg,.jpg,.gif,.png" :show-file-list="false" :on-success="contentUploadSuccess" >
+        </el-upload>
+        <quill-editor v-model="dataForm.content" ref="myQuillEditor" :options="editorOption"
+          @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" 
+          @ready="onEditorReady($event)" class="chapter_editor">
+        </quill-editor>
+      </el-form-item>
 
       <!-- <el-row>
         <el-col :span="12">
@@ -165,10 +171,56 @@
 
 <script>
   import global from '../../common/common.vue' //引入共用组间
+  import {
+      quillEditor
+    } from 'vue-quill-editor'
+  import 'quill/dist/quill.core.css'
+  import 'quill/dist/quill.snow.css'
+  import 'quill/dist/quill.bubble.css'
+  const toolbarOptions = [
+    ['bold', 'italic', 'underline', 'strike'],        // 加粗，斜体，下划线，删除线
+    ['blockquote', 'code-block'],                      //引用，代码块
+    [{ 'header': 1 }, { 'header': 2 }],               // 几级标题
+    [{ 'list': 'ordered' }, { 'list': 'bullet' }],     // 有序列表，无序列表
+    [{ 'script': 'sub' }, { 'script': 'super' }],      // 下角标，上角标
+    [{ 'indent': '-1' }, { 'indent': '+1' }],          // 缩进
+    [{ 'direction': 'rtl' }],                         // 文字输入方向
+    [{ 'size': ['small', false, 'large', 'huge'] }],  // 字体大小
+    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],// 标题
+    [{ 'color': [] }, { 'background': [] }],          // 颜色选择
+    [{ 'font': ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial'] }],// 字体
+    [{ 'align': [] }], // 居中
+    ['clean'],                                       // 清除样式,
+    ['link', 'image'],  // 上传图片、上传视频
+  ]
   export default {
     data() {
       return {
         baseUrl: global.baseUrl,
+        // 富文本编辑器配置
+        editorOption: {
+          modules: {
+            history: {
+              delay: 1000,
+              maxStack: 50,
+              userOnly: false
+            },
+            toolbar: {
+              container: toolbarOptions,
+              handlers: {
+                image: function (value) {
+                  if (value) {
+                    // 调用element的图片上传组件
+                    document.querySelector('.chapter-avatar-uploader input').click()
+                  } else {
+                    this.quill.format('image', false)
+                  }
+                }
+              }
+            },
+          },
+          placeholder: '请输入正文',
+        },
         visible: false,
         props: {
           dictType: '',
@@ -198,14 +250,46 @@
         }
       }
     },
+    components: {
+      quillEditor
+    },
     created() {
     },
     mounted() {
     },
     methods: {
+      contentUploadSuccess(res, file) { 
+        // console.log(res)
+        let quill = this.$refs.myQuillEditor.quill
+        // 如果上传成功
+        if (res) {
+          // 获取光标所在位置
+          let length = quill.getSelection().index;
+          // 插入图片，res为服务器返回的图片链接地址
+          quill.insertEmbed(length, 'image', res.url)
+          // 调整光标到最后
+          quill.setSelection(length + 1)
+        } else {
+          // 提示信息，需引入Message
+          this.$message.error('图片插入失败！')
+        }
+
+      },
+      // 失去焦点事件
+      onEditorBlur(quill) {
+      //  console.log('editor blur!', quill)       
+      },
+      // 获得焦点事件
+      onEditorFocus(quill) {
+        //console.log('editor focus!', quill)
+      },
+      // 准备富文本编辑器
+      onEditorReady(quill) {
+       // console.log('editor ready!', quill)
+      },
       init(row, catalogue_id, courseid) {
         console.log('row2', row)
-        this.dataForm = row || {}
+        this.dataForm = JSON.parse(JSON.stringify(row)) || {}
         this.dataForm.courseId = courseid || ''
         this.dataForm.catalogueId = catalogue_id || ''
         this.visible = true