添加来源吗管理菜单

src/components/mould/lessonContent.vue

@@ -33,14 +33,14 @@
           </div>
           <div class="title-content">
             <ul>
-              <li v-for="data in splitContent">· {{data}}</li>
+              <li v-for="data in splitContent">{{data}}</li>
             </ul>
           </div>
           <div class="tips title2">
             {{formData.content.tips.title2}}
           </div>
           <div class="title-content title2">
-            · {{formData.content.tips.title2_content}}
+            {{formData.content.tips.title2_content}}
           </div>
         </div>
       </el-col>

src/components/textarea/index.vue

@@ -2,7 +2,7 @@
   <div class='tinymce'>
     <editor id='tinymce' v-model='tinymceHtml' :init='init'></editor>
     <div>
-      <div class="imgInter" @click="imgInter()">插入图片</div>
+      <div class="imgInter" @click="showDialog()">插入图片</div>
     </div>
     <el-dialog
       title="插入图片"
@@ -12,6 +12,37 @@
       center
       :append-to-body="true"
       width="30%">
+      <el-form label-width="80px">
+        <el-form-item label="图片">
+          <el-upload
+            action="/api/public/upload"
+            :http-request="uploadFile"
+            :on-remove="removeFile"
+            drag
+            :on-exceed="handleExceed"
+            multiple
+            :limit="1"
+            :file-list="form.imgList">
+            <i class="el-icon-upload"></i>
+            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+            <div class="el-upload__tip" slot="tip">只能上传png文件，且不超过100kb</div>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="铺满">
+          <el-switch
+            v-model="form.big">
+          </el-switch>
+        </el-form-item>
+        <el-form-item label="居中">
+          <el-switch
+            v-model="form.center">
+          </el-switch>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="imgInter">确 定</el-button>
+      </span>
     </el-dialog>
   </div>
 </template>
@@ -30,11 +61,19 @@
   import 'tinymce/plugins/colorpicker'
   import 'tinymce/plugins/preview'
   import 'tinymce/plugins/media'
+  import {uploadFileApi} from "../../service/api";
+
   export default {
     name: 'tinymce',
     data () {
       return {
         tinymceHtml: '请输入内容',
+        form:{
+          imgList:[],
+          big:false,
+          weight:'',
+          center:true
+        },
         show:'',
         dialogVisible:false,
         init: {
@@ -57,55 +96,81 @@
     },
     methods:{
       imgInter(){
-        let element = document.getElementById('tinymce_ifr').contentWindow.document.getElementById('tinymce');
-        let str= `<img src="https://cdn.singsingenglish.com/new-sing/20181011/2de184727933c47a1a20fb354c55ab29b17256631539238287351.jpg" style="display: block;width: 100%"/>`;
-        console.log(this.getCursortPosition(element))
-        if(this.getCursortPosition(element)){
-          this.tinymceHtml = this.insert_flg(this.tinymceHtml,str,this.getCursortPosition(element))
+        if(this.form.imgList.length < 1){
+          this.$message({
+            type: 'error',
+            message: '请选择图片'
+          });
+          return false
+        }
+        let ImageStyle = '';
+        if(this.form.big){
+          ImageStyle += 'width:100%;'
         }else{
-          this.tinymceHtml += str
+          ImageStyle += 'width:70%'
+        }
+        if(this.form.center){
+          ImageStyle = 'display:block;margin:auto'
         }
+        let str= `<img src="${this.form.imgList[0]}" style="${ImageStyle}"/>`;
+        this.insertContent(str)
+        this.dialogVisible = false
+      },
+      uploadFile(a){
+        if(a.file.size < 100*1024 && a.file.type === 'image/png'){
+          this.$store.dispatch('setProgress',{type:'new',id:a.file.uid});
+          uploadFileApi({file:a.file,type:'local'}).then(res=>{
+            this.$message({
+              type: 'success',
+              message: '上传成功!'
+            });
+            this.form.imgList = [process.env.IMAGE_URL_HEAD + res.url];
+            this.selectedMould[this.nowIndex].content.banner[0] = {name:res.name,url:process.env.IMAGE_URL_HEAD + res.url,title:'',lable:''};
+            this.$store.dispatch('setProgress',{type:'delete',id:a.file.uid});
+          })
+        }else {
+          this.$message({
+            type: 'error',
+            message: '上传失败，图片格式或大小不正确!'
+          });
+          this.form.imgList = [];
+        }
+
+
       },
       showDialog(){
         this.dialogVisible = true
       },
-      insert_flg(str,flg,sn){
-        var newstr="";
-        for(var i=0;i<str.length;i+=sn){
-          var tmp=str.substring(i, i+sn);
-          console.log(tmp);
-          if(i===0){
-            newstr+=tmp+flg;
-          }else{
-            newstr+=tmp
-          }
+      insertContent(content) {
+        if (!content) {//如果插入的内容为空则返回
+          return;
         }
-        return newstr;
-      },
-      getCursortPosition(element) {
-        var caretOffset = 0;
-        var doc = element.ownerDocument || element.document;
-        var win = doc.defaultView || doc.parentWindow;
-        var sel;
-        if (typeof win.getSelection != "undefined") {//谷歌、火狐
-          sel = win.getSelection();
-          console.log(sel);
-          if (sel.rangeCount > 0) {//选中的区域
-            var range = win.getSelection().getRangeAt(0);
-            var preCaretRange = range.cloneRange();//克隆一个选中区域
-            preCaretRange.selectNodeContents(element);//设置选中区域的节点内容为当前节点
-            preCaretRange.setEnd(range.endContainer, range.endOffset);  //重置选中区域的结束位置
-            caretOffset = preCaretRange.toString().length;
+        let sel = null;
+        if (document.selection) {//IE9以下
+          sel = document.selection;
+          sel.createRange().pasteHTML(content);
+        } else {
+          sel = document.getElementById('tinymce_ifr').contentWindow.getSelection();
+          if (sel.rangeCount > 0) {
+            let range = sel.getRangeAt(0);      //获取选择范围
+            range.deleteContents();             //删除选中的内容
+            let el = document.createElement("div"); //创建一个空的div外壳
+            el.innerHTML = content;                 //设置div内容为我们想要插入的内容。
+            let frag = document.createDocumentFragment();//创建一个空白的文档片段，便于之后插入dom树
+
+            let node = el.firstChild;
+            let lastNode = frag.appendChild(node);
+            range.insertNode(frag);                 //设置选择范围的内容为插入的内容
+            let contentRange = range.cloneRange();  //克隆选区
+            contentRange.setStartAfter(lastNode);          //设置光标位置为插入内容的末尾
+            contentRange.collapse(true);                   //移动光标位置到末尾
+            sel.removeAllRanges();                  //移出所有选区
+            sel.addRange(contentRange);             //添加修改后的选区
           }
-        } else if ((sel = doc.selection) && sel.type != "Control") {//IE
-          var textRange = sel.createRange();
-          var preCaretTextRange = doc.body.createTextRange();
-          preCaretTextRange.moveToElementText(element);
-          preCaretTextRange.setEndPoint("EndToEnd", textRange);
-          caretOffset = preCaretTextRange.text.length;
         }
-        return caretOffset;
-      }
+      },
+      removeFile(){},
+      handleExceed(){}
     },
     created:function(){
       tinymce.init({})