11

src/pages/teacher/contribution/addimageText.vue

+<style>
+    .addimageText {
+        width: 100%;
+        height: 100%;
+        margin: 15px;
+        display: flex;
+    }
+
+    .box_l {
+        width: 400px;
+
+    }
+
+    .box_l_center {
+        width: 370px;
+        margin-left: 15px;
+        border-radius: 5px;
+    }
+
+    .box_r {
+        flex: 1;
+        width: 1px;
+        background: #FFF;
+        border-radius: 9px;
+        padding: 15px;
+        margin-right: 30px;
+    }
+
+    .appmsg_account {
+        background-color: #fff;
+        padding: 10px 15px;
+        display: flex;
+        align-items: center;
+        border-radius: 5px 5px 0 0;
+    }
+
+    .appmsg_one {
+        width: 100%;
+        height: 143px;
+        position: relative;
+        background: #999;
+        color: #FFF;
+    }
+
+    .appmsg_two {
+        width: 100%;
+        height: 72px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 15px;
+    }
+</style>
 <template>
-    <div class="page-body">
-       124  
+    <div class="addimageText">
+        <div class="box_l">
+            <div class="box_l_center">
+                <div class="appmsg_account">
+                    <img style="width: 24px;height: 24px;border-radius: 50%;margin-right: 10px;"
+                        src="http://wx.qlogo.cn/mmopen/B2EfAOZfS1hP0WNR9tGwEFJibrib3NcWYd4VXF10YAia2Fy6OmkzicpibHmabNRic4Yqj9wtImErdG3picwY3ia3AjVoZaBZAFQTnBJl/64"
+                        alt="">
+                    赞羊生活
+                </div>
+                <div class="appmsg" v-for="(x,y) in list" :key='y' :style="{border:x.Id==select?'2px solid #07c160':''}"
+                    @click="select=x.Id">
+                    <div class="appmsg_one" v-if="y==0">
+                        <span>{{x.Name!=''?x.Name:'标题'}}</span>
+                    </div>
+                    <div class="appmsg_two" v-if="y!=0">
+                        <span>{{x.Name!=''?x.Name:'标题'}}</span>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+        <div class="box_r">
+            <div style="width: 100%;display: flex;align-items: center;justify-content: center;">
+                <q-btn-group push>
+                    <q-btn-dropdown push label="图片">
+                        <q-list>
+                            <q-item clickable v-close-popup @click="onItemClick">
+                                本地上传
+                            </q-item>
+                            <q-item clickable v-close-popup @click="onItemClick">
+                                从图片库选择
+                            </q-item>
+                        </q-list>
+                    </q-btn-dropdown>
+                    <q-btn push label="视频" />
+                    <q-btn push label="音频" />
+                    <q-btn push label="超链接" />
+                    <q-btn push label="小程序" />
+                </q-btn-group>
+            </div>
+            <q-input clearable standout="bg-primary text-white" v-model="Name" label="标题" maxlength="64" />
+            <q-input clearable standout="bg-primary text-white" v-model="author" label="作者" maxlength="8"
+                style="margin-top: 20px;" />
+            <contributionUE :config="config" ref="UE_Title"></contributionUE>
+            <!-- <template id="app-rich-text">
+                <div class="app-rich-text">
+                    <textarea style="width: 100%" :id="id"></textarea>
+                </div>
+            </template> -->
+        </div>
+
+
     </div>
 </template>
 
 <script>
+    import contributionUE from './ue/contributionUE'
 
     export default {
         meta: {
             title: "新增/修改图文"
         },
+        components: {
+            contributionUE,
+        },
 
         data() {
             return {
-            
+                select: 1,
+                list: [{ Id: 1, Name: '' }, { Id: 2, Name: '23' }],
+                Name: '',
+                author: '',
+                config: {
+                    initialFrameWidth: null,
+                    initialFrameHeight: 300,
+
+                },
+                attachmentDialogVisible: false, //上传附件弹窗
+                id: 'app-rich-text-' + (Math.floor((Math.random() * 10000) + 1)),
+                ue: null,
+                tempContent: this.value,
+                isInputChange: false,
+                uploadType: "1", //1-上传图片，2-上传附件,3-上传音频
+                //默认图片域名
+                defaultImgDomain: "https://imgfile.oytour.com/static/",
+                ViewDomain: "",
             }
         },
 
         mounted() {
-           
+
         },
         methods: {
-           
+            onItemClick() {
+
+            }
         }
     }
 
-</script>
-<style lang="sass">
-    @import url('~assets/css/table.sass')
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file

src/pages/teacher/contribution/ue/contributionUE.vue

+<style>
+</style>
+<template id="app-rich-text">
+  <div class="app-rich-text">
+    <textarea style="width: 100%" :id="id"></textarea>
+  </div>
+</template>
+<script>
+//   import appAttachment from '../attachment/app-attachment'
+  export default {
+    props: {
+      value: null,
+      //上传单选还是多选
+      uploadMultple: false,
+      //文件单选还是多选
+      chooseMultple: false,
+      //插入图片图标
+      labelIcon: {
+        type: String,
+        default: '插入图片',
+      },
+      //是否显示插入图片
+      isShowInsertImage: {
+        type: Boolean,
+        default: true
+      },
+      //是否显示上传附件
+      isShowAttachment: {
+        type: Boolean,
+        default: true
+      },
+      //是否显示音频
+      isShowVoice: {
+        type: Boolean,
+        default: true
+      },
+      //UEEditor配置信息
+      config: {
+        type: Object
+      },
+      noMargin: {
+        type: Boolean,
+        default: false
+      },
+      placeHolder: {
+        type: String,
+        default: '请输入内容',
+      },
+    },
+    components: {
+    //   appAttachment
+    },
+    data() {
+      return {
+        attachmentDialogVisible: false, //上传附件弹窗
+        id: 'app-rich-text-' + (Math.floor((Math.random() * 10000) + 1)),
+        ue: null,
+        tempContent: this.value,
+        isInputChange: false,
+        uploadType: "1", //1-上传图片，2-上传附件,3-上传音频
+        //默认图片域名
+        defaultImgDomain: "https://imgfile.oytour.com/static/",
+        ViewDomain: "",
+      };
+    },
+    watch: {
+      value(newVal, oldVal) {
+        if (!this.isInputChange) {
+          if (this.ue) {
+            if (this.ue.isReady !== 1) {
+              let self = this;
+
+              let time = setInterval(() => {
+                //循环查
+                if (self.ue.isReady === 1) {
+                  clearInterval(time);
+                  self.ue.setContent(newVal);
+                  self.isInputChange = false;
+                }
+              }, 100);
+              return;
+            }
+            ("监听到变化",newVal)
+            this.ue.setContent(newVal);
+          } else {
+            this.tempContent = newVal;
+          }
+        }
+        this.isInputChange = false;
+      },
+    },
+    created() {
+      this.ViewDomain = this.domainManager().ViewFileUrl;
+    },
+    mounted() {
+      this.loadUe();
+    },
+    methods: {
+      focus() {
+        this.ue.focus(true)
+      },
+      //关闭上传文件弹窗
+      attachmentClosed() {
+        this.attachmentDialogVisible = false;
+      },
+      //选择文件弹窗
+      attachmentSelected(fileArray) {
+        if (fileArray && fileArray.length) {
+          let html = '';
+          //图片
+          if (this.uploadType == 1) {
+            fileArray.forEach(item => {
+              html += '<img src="' + item.fileUrl + '" style="max-width: 100%;">';
+            })
+          }
+          //附件
+          else {
+            fileArray.forEach(item => {
+              var obj = this.getIcon(item.fileName);
+              if (obj.fileType == 4) {
+                html += this.audioIframeStr(item);
+              } else {
+                html += this.getIconContent(item);
+              }
+              //  else if (obj.fileType == 1 || obj.fileType == 2 || obj.fileType == 3) {
+              //   html += this.fileIframeList(item, obj.fileType);
+              // }
+            })
+          }
+          if (html && html != '') {
+            this.ue.execCommand('inserthtml', html);
+          }
+        }
+        this.attachmentDialogVisible = false;
+      },
+      //获取图标配置内容
+      getIconContent(item) {
+        var iconObj = this.getIcon(item.fileName);
+        var fileUrl = encodeURIComponent(item.fileUrl);
+        let dataUrl =
+          `${this.ViewDomain + '/read.html?fileName=' + item.fileName + '&url=' + fileUrl + '&fileType=' + iconObj.fileType}`;
+        var linkAttr = "";
+        if (iconObj.fileType == 1 || iconObj.fileType == 2 || iconObj.fileType == 3) {
+          linkAttr = ` class='attachNew' accessKey='${dataUrl}'`;
+        }
+       var str=
+        `<p ${linkAttr}>`+
+          `<span ${linkAttr} contenteditable="false" style="display:inline-block;margin-top:10px;background: #F7F8FA;padding: 14px 16px;min-width: 572px;overflow: hidden;cursor:pointer;-webkit-box-align: center;text-align:left;cursor:pointer;" name="${iconObj.dataType}" data="${item.fileName}">`+
+            `<img ${linkAttr} src="${iconObj.iconUrl}" style="width:42px; height:42px; overflow:hidden; margin-right:14px;border-radius:4px;float:left;">`+
+            `<span ${linkAttr} style="font-size:14px; color:#181E33; line-height:20px; display:block; overflow:hidden;  text-overflow:ellipsis;margin-top:15px;">${item.fileName}</span>`+
+          `</span>`+
+         `</p>`;
+         return str;
+      },
+      //获取文件图标和类型
+      getIcon(fileName) {
+        var obj = {
+          iconUrl: "",
+          dataType: "",
+          fileType: 0, //1视频，2-pdf,3-word、ppt、xls,4-mp3
+        }
+        if (!fileName) {
+          obj.iconUrl = this.defaultImgDomain + "file.png";
+          obj.dataType = "";
+          return obj;
+        }
+        var index = fileName.lastIndexOf('.');
+        var type = fileName.substr(index+1);
+        type = type.toLowerCase();
+        obj.dataType = type;
+        if (type === 'video' || type === 'svideo') {
+          obj.iconUrl = this.defaultImgDomain + "video.png";
+          obj.fileType = 1;
+        } else if (type === 'txt' || type === 'text') {
+          obj.iconUrl = this.defaultImgDomain + "txt.png";
+        } else if (type === 'xls' || type === 'xlsx') {
+          obj.iconUrl = this.defaultImgDomain + "excel.png";
+          obj.fileType = 3;
+        } else if (type === 'doc' || type === 'docx') {
+          obj.iconUrl = this.defaultImgDomain + "word.png";
+          obj.fileType = 3;
+        } else if (type === 'zip' || type === 'rar' || type === 'gz') {
+          obj.iconUrl = this.defaultImgDomain + "zip.png";
+        } else if (type === 'mp3') {
+          obj.iconUrl = this.defaultImgDomain + "sound.png";
+          obj.fileType = 4;
+        } else if (type === 'pdf') {
+          obj.iconUrl = this.defaultImgDomain + "pdf.png";
+          obj.fileType = 2;
+        } else if (type === 'ppt' || type === 'pptx') {
+          obj.iconUrl = this.defaultImgDomain + "ppt.png";
+          obj.fileType = 3;
+        } else if (type === 'avi' || type === 'rmvb' || type === '3gp' || type === 'mpg' ||
+          type === 'mpeg' || type === 'mov' || type === 'wmv' || type === 'asf' ||
+          type === 'mkv' || type === 'mp4' || type === 'vob' || type === 'f4v' ||
+          type === 'flv') {
+          obj.iconUrl = this.defaultImgDomain + "movie.png";
+          obj.fileType = 1;
+        } else {
+          obj.iconUrl = this.defaultImgDomain + "unknown.png";
+        }
+        return obj;
+      },
+      //音频[MP3]
+      audioIframeStr(data) {
+        var fileUrl = encodeURIComponent(data.fileUrl);
+        return '<p><iframe height="62px" width="auto" frameborder="0"  allowtransparency="true" ' +
+          ' style="background-color:transparent;border-radius: 3px;overflow: hidden;z-index: 0;" scrolling="no" ' +
+          ' src="' + this.ViewDomain + '/index.html?fileName=' + data.fileName + '&url=' + fileUrl +
+          '" class="ans-insertaudio-module" module="_insertaudio">' + ' </iframe></p>';
+      },
+      //视频、PDF、WORD、PPT、EXCEL
+      fileIframeList(data, fileType) {
+        //视频1 音频 2  ppt/word 3
+        var fileUrl = encodeURIComponent(data.fileUrl);
+        return '<p><iframe height="62px" width="auto" frameborder="0"  allowtransparency="true" ' +
+          ' style="background-color:transparent;border-radius: 3px;overflow: hidden;z-index: 0;" scrolling="no" ' +
+          ' src="' + this.ViewDomain + '/read.html?fileName=' + data.fileName + '&url=' + fileUrl + '&fileType=' +
+          fileType +
+          '" class="ans-insertaudio-module" module="_insertaudio">' + ' </iframe></p>';
+      },
+      reloadNewValue(){
+        this.isInputChange=false
+      },
+      loadUe() {
+        const _this = this;
+        //上传附件
+        if (_this.isShowInsertImage) {
+          UE.registerUI('self-image', (editor, uiName) => {
+            return new UE.ui.Button({
+              name: uiName,
+              title: _this.labelIcon,
+              onclick() {
+                _this.ue = editor
+                _this.uploadType = "1"
+                _this.attachmentDialogVisible = true;
+              },
+            });
+          });
+        }
+        //上传附件
+        if (_this.isShowAttachment) {
+          UE.registerUI('self-attachment', (editor, uiName) => {
+            return new UE.ui.Button({
+              name: uiName,
+              title: "附件",
+              onclick() {
+                _this.ue = editor
+                _this.uploadType = "2"
+                _this.attachmentDialogVisible = true;
+              },
+            });
+          });
+        }
+        //是否显示音频
+        if (_this.isShowVoice) {
+          UE.registerUI('self-video', (editor, uiName) => {
+            return new UE.ui.Button({
+              name: uiName,
+              title: "音频",
+              onclick() {
+                _this.ue = editor
+                _this.uploadType = "3"
+                _this.attachmentDialogVisible = true;
+              },
+            });
+          });
+        }
+        this.ue = UE.getEditor(this.id, this.config);
+
+        this.ue.addListener('ready', editor => {
+          this.$emit("ready")
+          if (this.tempContent) {
+            this.ue.setContent(this.tempContent);
+          }
+          if (this.noMargin) {
+            UE.dom.domUtils.setStyles(this.ue.body, {
+              'margin': '0px'
+            });
+          }
+        });
+        this.ue.addListener('keyup', editor => {
+          this.isInputChange = true;
+          this.$emit('input', this.ue.getContent());
+        });
+        this.ue.addListener('contentChange', (editor,e) => {
+          this.isInputChange = true;
+          console.log(editor,e)
+          this.$emit('input', this.ue.getContent());
+        });
+        this.ue.addListener('blur', editor => {
+          this.isInputChange = true;
+          this.$emit('blur', this.ue.getContent());
+        });
+        this.ue.addListener('focus', editor => {
+          this.$emit('focus');
+        });
+        this.ue.addListener('selectionchange',editor=>{
+            // console.log(this.ue.selection.getStart() )
+        })
+        this.ue.addListener('click',(editor,a)=>{
+            var state = editor.queryCommandState()
+            console.log(state)
+            // console.log(editor,a)
+            // console.log(this.ue.getContent())
+        })
+      }
+    },
+  }
+
+</script>