富文本样式优化

src/components/app-mob-rich-text-editor/app-mob-rich-text-editor.less

+.app-mob-rich-text-editor{
+    width: 100%;
+    height: 100%;
+    justify-content: flex-end;
+    display: flex;
+    .app-mob-rich-text-editor-icon{
+        margin-right: 4px;
+        color: #777272;
+        font-size: 18px;
+    }
+}
\ No newline at end of file

src/components/app-mob-rich-text-editor/app-mob-rich-text-editor.vue

 <template>
-<div>
-  <div v-html="reValue"></div><ion-icon name="options-outline" @click="open"></ion-icon>
-</div>
+  <div class="app-mob-rich-text-editor" @click="open">
+    <div v-html="reValue"></div>
+    <ion-icon class="app-mob-rich-text-editor-icon" v-if="!reValue" name="options-outline" @click="open"></ion-icon>
+  </div>
 </template>
 <script lang = 'ts'>
 import { Vue, Component, Prop, Model, Watch } from 'vue-property-decorator';
@@ -9,48 +10,49 @@ import { Vue, Component, Prop, Model, Watch } from 'vue-property-decorator';
 export default class AppRichTextEditor extends Vue {
 
     /**
-     * 输入值
+     * 值
      *
      * @type {string}
-     * @memberof AppInput
+     * @memberof AppRichTextEditor
      */
     @Prop() public value?: any;
 
-
+   /**
+     * 绑定值
+     *
+     * @type {string}
+     * @memberof AppRichTextEditor
+     */
     get reValue(){
       return this.value;
     }
+
+    /**
+     * 获取值
+     *
+     * @type {string}
+     * @memberof AppRichTextEditor
+     */
     set reValue(value:any){
       this.$emit("change", value);
     }
+
     /**
-     * 类型
+     * 打开富文本
      *
      * @type {string}
-     * @memberof AppInput
+     * @memberof AppRichTextEditor
      */
-    @Prop() public type?: string;
+    public open(){
+       this.openPopupModal({ viewname: 'app-rich-text', title: 'app-rich-text'},{},{value:this.value});
+    }
 
     /**
-     * 占位提示文字
+     * 模态打开富文本
      *
      * @type {string}
-     * @memberof AppInput
+     * @memberof AppRichTextEditor
      */
-    @Prop() public placeholder?:string;   
-    
-    public messages = "";
-
-    public   onEditorBlur(){}
-
-    public  onEditorFocus(){}
-
-     public onEditorReady(){}
-
-     public open(){
-       this.openPopupModal({ viewname: 'app-rich-text', title: 'app-rich-text'},{},{value:this.value});
-     }
-
     private async openPopupModal(view: any, context: any, param: any): Promise<any> {
         const result: any = await this.$appmodal.openModal(view, context, param);
         if (result || Object.is(result.ret, 'OK')) {
@@ -58,11 +60,8 @@ export default class AppRichTextEditor extends Vue {
         }
     }
 
-    public openViewClose(result: any) {
-       
-    }
-
 }
 </script>
 <style lang="less">
+@import './app-mob-rich-text-editor.less';
 </style>
\ No newline at end of file

src/components/app-rich-text/app-rich-text.less

-.quill-editor {
+.richtext{
+  height: calc(100% - 10vh);
+  .quill-editor {
     -webkit-touch-callout: text !important;
     -webkit-user-select: text !important;
     -khtml-user-select: text !important;
     -moz-user-select: text !important;
     -ms-user-select: text !important;
+    img{
+      max-width: 90%;
+    }
   }
-  .richtext{
-    height: calc(100% - 20vh);
-  }
-  .quill-editor-button{
+
+  .quill-editor-button {
     text-align: center;
-      position: absolute;
-      bottom: 0;
-      width: 100%
-      ion-button{
-        width: 58%;
-      }
-  }
\ No newline at end of file
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    ion-button {
+      width: 48%;
+    }
+  }
+  .ql-container {
+    height: calc(100% - 65px);
+  }
+}
\ No newline at end of file

src/components/app-rich-text/app-rich-text.vue

@@ -90,7 +90,7 @@ export default class AppRichTextEditor extends Vue {
    * @memberof AppRichTextEditor
    */
   public mounted() {
-    this.resloutValue = JSON.parse(this._viewparams).value;
+    this.resloutValue = JSON.parse(this._viewparams).value?JSON.parse(this._viewparams).value:"";
   }
 
   /**
@@ -156,7 +156,6 @@ export default class AppRichTextEditor extends Vue {
         if (response && response.data && response.status === 200) {
           let data: any = response.data;
           if (process.env.NODE_ENV === "development") {
-            this.devFiles.push(Object.assign({}, data, { url: file.content }));
             this.dataProcess(Object.assign({}, data, { url: file.content }));
           }
         } else {
@@ -174,46 +173,13 @@ export default class AppRichTextEditor extends Vue {
   private dataProcess(file: any): void {
     let _uploadUrl = `${Environment.BaseUrl}${Environment.UploadFile}`;
     this.uploadUrl = _uploadUrl;
-    if (process.env.NODE_ENV === "development") {
-      let index = this.devFiles.findIndex((devFile: any) =>
-        Object.is(devFile.id, file.id)
-      );
-      if (index !== -1) {
-        file.url = this.devFiles[index].url;
-        file.isImage = true;
-      }
-    }
     let _downloadUrl = `${this.downloadUrl}/${file.id}`;
     file.isImage = true;
     file.url = _downloadUrl;
-    this.resloutValue = '<img src="' + file.url + '" alt="">';
+    this.resloutValue = this.resloutValue + '<img src="' + file.url + '" alt="">';
   }
 }
 </script>
 <style lang="less">
-.richtext{
-.quill-editor {
-  -webkit-touch-callout: text !important;
-  -webkit-user-select: text !important;
-  -khtml-user-select: text !important;
-  -moz-user-select: text !important;
-  -ms-user-select: text !important;
-}
-.richtext {
-  height: calc(100% - 10vh);
-}
-.quill-editor-button {
-  text-align: center;
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  ion-button {
-    width: 48%;
-  }
-}
-.ql-container {
-  height: calc(100% - 65px);
-}
-}
-
+@import './app-rich-text.less';
 </style>
\ No newline at end of file