提交

src/components/Course/catalogCourseware.vue

@@ -326,7 +326,7 @@
   import courseHomework from '@/components/Course/courseHomework.vue'
   import courseExam from '@/components/Course/courseExam.vue'
   import simplePaper from "@/components/Course/simpleTestPaper.vue";
-  import WxEditor from "@/components/Editor/index.vue";
+  import WxEditor from "@/components/Editor/indexCourse.vue";
   import fileUpload from '@/components/FileUpload/index.vue';
   import apiCourse from '../../api/modules/course.js';
   import apiCourseFile from '../../api/modules/courseFile.js';

src/components/Course/weikeContent.vue

@@ -521,7 +521,7 @@
   </div>
 </template>
 <script>
-  import WxEditor from "@/components/Editor/index.vue";
+  import WxEditor from "@/components/Editor/indexCourse.vue";
   import simplePaper from "@/components/Course/simpleTestPaper.vue";
   import FileUpload from '@/components/FileUpload/index.vue';
   import pdfPreview from "@/components/PdfPreview/index.vue";

src/components/Editor/indexCourse.vue

@@ -0,0 +1,410 @@
+<template>
+<div>
+    <div class="editor" ref="editor" :style="styles"></div>
+    <input type="file" @change="change" id="upload" style="display:none;" />
+    <el-dialog
+      title="提示"
+      :modal="false"
+      :close-on-click-modal="false"
+      :visible.sync="dialogVisible"
+      width="700px">
+      <div style="padding-top: 10px;min-height: 500px;">
+              <div style="display: flex;justify-content: flex-start;">
+                <div>
+                  <el-input maxlength="50" v-model="hasCWare.keyword" placeholder="名称"></el-input>
+                </div>
+                <div style="padding-left: 10px;">
+                  <el-button @click="findCWare()" type="primary">搜索</el-button>
+                  <el-button @click="closeCWareFind()" type="primary">返回</el-button>
+                </div>
+              </div>
+              <div style="text-align: center;padding-top: 10px;">
+                <el-table style="100%" :data="hasCWare.list" border stripe>
+                  <el-table-column label="类型"  width="60" prop="author"><template slot-scope="scope">{{getType(scope.row.resType)}}</template></el-table-column>
+                  <el-table-column label="名称" prop="name"></el-table-column>
+                  <el-table-column label="创建" prop="sysCreateBy" width="100"></el-table-column>
+                   <el-table-column label="创建时间" prop="sysCreateTime" width="160"></el-table-column>
+                  <el-table-column label="选择" width="70" align="center">
+                    <template slot-scope="scope">
+                        <el-button size="mini" @click="chooseHasCWare(scope.row)" type="primary">选择</el-button>
+                    </template>
+                  </el-table-column>
+                </el-table>
+                <div style="text-align: center">
+                  <el-pagination
+                    @size-change="handleSizeChange"
+                    @current-change="handleCurrentChange"
+                    :current-page="hasCWare.pageIndex"
+                    :page-sizes="[5, 10]"
+                    :page-size="hasCWare.pageSize"
+                    layout="total, sizes, prev, pager, next, jumper"
+                    :total="hasCWare.count"
+                  ></el-pagination>
+                </div>
+              </div>
+            </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
+</div>
+</template>
+
+<script>
+ import apiCourseFile from '../../api/modules/courseFile.js';
+import {getType} from '../../utils/tools.js';
+import { upload } from "@/api/tools.js";  //上传接口
+import Quill from "quill";
+import "quill/dist/quill.core.css";
+import "quill/dist/quill.snow.css";
+import "quill/dist/quill.bubble.css";
+import { ImageDrop } from 'quill-image-drop-module' // 图片拖动组件引用
+import ImageResize from 'quill-image-resize-module' // 图片缩放组件引用
+Quill.register('modules/imageDrop', ImageDrop) // 注册
+Quill.register('modules/imageResize', ImageResize) // 注册
+const Size = Quill.import('attributors/style/size')
+  Size.whitelist = ['15px', '18px']
+  Quill.register(Size, true);
+const Parchment = Quill.import("parchment");
+class lineHeightAttributor extends Parchment.Attributor.Style { }
+const lineHeightStyle = new lineHeightAttributor("lineHeight", "line-height", {
+  scope: Parchment.Scope.INLINE,
+  whitelist: ["1", "1.5", "2", "3", "4"]
+});
+const toolbarOptions = [
+    ["bold", "italic", "underline", "strike"],       // 加粗 斜体 下划线 删除线
+    ["blockquote", "code-block"],                    // 引用  代码块
+    [{ list: "ordered" }, { list: "bullet" }],       // 有序、无序列表
+    [{ indent: "-1" }, { indent: "+1" }],            // 缩进
+    [{ size: [false,"18px"] }],   // 字体大小
+    [{ header: [1, 2, 3, 4, 5, 6, false] }],         // 标题
+    [{ color: [] }, { background: [] }],             // 字体颜色、字体背景颜色
+    [{ align: [] }],                                 // 对齐方式
+    [{ lineheight: ['initial', '1', '1.5', '2', '3', '4'] }],
+    ["clean"],                                       // 清除文本格式
+    // ["link", "image"],
+    ["selectPicture"],
+  ]
+Quill.register({ 'formats/lineHeight': lineHeightStyle }, true)
+export default {
+  name: "Editor",
+  props: {
+    /* 编辑器的内容 */
+    value: {
+      type: String,
+      default: "",
+    },
+    toobar:{
+      type: Boolean,
+      default: true
+    },
+    placeholder: {
+      type: String,
+      default: "请输入长度大于100个字符的内容",
+    },
+    /* 高度 */
+    height: {
+      type: Number,
+      default: null,
+    },
+    /* 最小高度 */
+    minHeight: {
+      type: Number,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      getType,
+      fileBaseUrl:this.$Constants.fileBaseUrl,
+      hasCWare:{
+        list:[],
+        keyword:'',
+        pageSize:10,
+        pageIndex:1,
+        count:0,
+      },
+      dialogVisible:false,
+      QuillObj: null,
+      currentValue: "",
+      options: {
+        theme: "snow",
+        bounds: document.body,
+        debug: "warn",
+        modules: {
+          imageDrop: true,      //图片拖拽
+          imageResize: {          //放大缩小
+            displayStyles: {
+              backgroundColor: "black",
+              border: "none",
+              color: "white"
+            },
+            modules: ["Resize", "DisplaySize", "Toolbar"]
+          },
+          // 工具栏配置
+          toolbar: {
+            container:this.toobar? toolbarOptions:[],
+            handlers: {
+              image: function(value) {
+                if (value) {
+                  document.querySelector('#upload').click()  // 劫持原来的图片点击按钮事件
+                } else {
+                  this.QuillObj.format('image', false)
+                }
+              },
+              lineheight: (value) => {
+                if (value) {
+                  this.QuillObj.format("lineHeight", value)
+                }
+              },
+              selectPicture: this.showHandle
+            }
+          }
+        },
+        placeholder: this.placeholder,
+        readOnly: false,
+      },
+    };
+  },
+  computed: {
+    styles() {
+      let style = {};
+      if (this.minHeight) {
+        style.minHeight = `${this.minHeight}px`;
+      }
+      if (this.height) {
+        style.height = `${this.height}px`;
+      }
+      return style;
+    },
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (val !== this.currentValue) {
+          this.currentValue = val === null ? "" : val;
+          if (this.QuillObj) {
+            this.QuillObj.pasteHTML(this.currentValue);
+          }
+        }
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+    this.init();
+  },
+  beforeDestroy() {
+    this.QuillObj = null;
+  },
+  methods: {
+    closeCWareFind(){
+
+    },
+    chooseHasCWare(row){// 选中图片
+       let length = this.QuillObj.getSelection().index//光标位置
+       // 插入图片  图片地址
+       console.log(this.fileBaseUrl + row.filePath,'this.fileBaseUrl + row.filePath');
+       this.QuillObj.insertEmbed(length, 'image', this.fileBaseUrl + row.filePath)
+       // 调整光标到最后
+       this.QuillObj.setSelection(length + 1)//光标后移一位
+       this.dialogVisible = false;
+    },
+    showHandle(){
+     this.getCoursewareList();
+     this.dialogVisible = true;
+     },
+    initButton(){
+     const editorButton = document.querySelector('.ql-selectPicture')
+     editorButton.innerHTML = '<i class="el-icon-share"></i>'
+    },
+    getCoursewareList() {
+      //  resType: 文件类型,10视频，20音频，30图片， 40 文档，41表图文，50表scrom包,90表其它 图文41，连接52，作业60，考试61，评估62
+      let data = {
+        name: this.hasCWare.keyword,
+        resType:30,
+        pageSize: this.hasCWare.pageSize,
+        pageIndex: this.hasCWare.pageIndex,
+        self:true
+      }
+      apiCourseFile.pageList(data).then(res=>{
+        if(res.status === 200) {
+          this.hasCWare.list = res.result.list;
+          this.hasCWare.count = res.result.count;
+          if(res.result.count==0){
+            this.$message.error("未找到符合条件的数据");
+          }
+        }
+      })
+    },
+    handleSizeChange(val) {
+      this.hasCWare.pageSize = val;
+      this.hasCWare.pageIndex = 1;
+      this.getCoursewareList();
+    },
+    handleCurrentChange(val) {
+      this.hasCWare.pageIndex = val;
+      this.getCoursewareList();
+    },
+    init() {
+      const editor = this.$refs.editor;
+      this.QuillObj = new Quill(editor, this.options);
+      this.QuillObj.pasteHTML(this.currentValue);
+      this.QuillObj.on("text-change", (delta, oldDelta, source) => {
+        const html = this.$refs.editor.children[0].innerHTML;
+        const text = this.QuillObj.getText();
+        const quill = this.QuillObj;
+        this.currentValue = html;
+        this.$emit("input", html);
+        this.$emit("on-change", { html, text, quill });
+      });
+      this.QuillObj.on("text-change", (delta, oldDelta, source) => {
+        this.$emit("on-text-change", delta, oldDelta, source);
+      });
+      this.QuillObj.on("selection-change", (range, oldRange, source) => {
+        this.$emit("on-selection-change", range, oldRange, source);
+      });
+      this.QuillObj.on("editor-change", (eventName, ...args) => {
+        this.$emit("on-editor-change", eventName, ...args);
+      });
+      this.initButton();
+    },
+    change(e) {
+      let file = e.target.files[0]
+      const formData = new FormData()
+      formData.append('file', file)
+      upload(formData)
+        .then(res => {
+          if (res.status === 200) {
+            // const formdata = _.extend({}, this.formdata)
+            let length = this.QuillObj.getSelection().index//光标位置
+            // 插入图片  图片地址
+            this.QuillObj.insertEmbed(length, 'image', res.result.httpPath)
+            // 调整光标到最后
+            this.QuillObj.setSelection(length + 1)//光标后移一位
+          }
+        })
+        .catch(err => {
+          console.error(err)
+        })
+    },
+  },
+};
+</script>
+
+<style>
+ .editor{
+ min-height: 250px !important;
+} 
+.ql-editor{
+  min-height: 250px !important;
+} 
+.ql-container{
+  font-size: 15px;
+}
+.editor, .ql-toolbar {
+  white-space: pre-wrap!important;
+  line-height: normal !important;
+}
+.quill-img {
+  display: none;
+}
+.ql-snow .ql-tooltip[data-mode="link"]::before {
+  content: "请输入链接地址:";
+}
+.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 {
+  content: "请输入视频地址:";
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item::before {
+  content: "15px";
+}
+
+.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";
+}
+.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";
+}
+
+
+.ql-snow .ql-picker.ql-header .ql-picker-label::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item::before {
+  content: "文本";
+}
+.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 {
+  content: "标题1";
+}
+.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 {
+  content: "标题2";
+}
+.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 {
+  content: "标题3";
+}
+.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 {
+  content: "标题4";
+}
+.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 {
+  content: "标题5";
+}
+.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 {
+  content: "标题6";
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item::before {
+  content: "标准字体";
+}
+.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 {
+  content: "衬线字体";
+}
+.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 {
+  content: "等宽字体";
+}
+
+.ql-snow .ql-picker.ql-lineheight .ql-picker-label::before {
+  content: '行高';
+  font-size: 12px;
+  width: 80px;
+}
+.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="1"]::before,
+.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value="1"]::before {
+  content: '1';
+}
+.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="1.5"]::before,
+.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1.5']::before {
+  content: '1.5';
+}
+.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="2"]::before,
+.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='2']::before {
+  content: '2';
+}
+.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="3"]::before,
+.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='3']::before {
+  content: '3';
+}
+.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="4"]::before,
+.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='4']::before {
+  content: '4';
+}
+
+
+</style>