富文本相关

package.json

@@ -30,7 +30,7 @@
     "recorder-core": "^1.0.20040700",
     "register-service-worker": "^1.6.2",
     "rxjs": "^6.5.4",
-    "vant": "^2.5.4",
+    "vant": "^2.5.6",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.2",
     "vue-i18n": "^8.15.5",

src/app-register.ts

@@ -105,9 +105,11 @@ export const AppComponents = {
         v.component('app-list-index',() => import('@/components/app-list-index/app-list-index.vue'));
         // 下拉列表组件
         v.component('app-history-list',() => import('@/components/app-history-list/app-history-list.vue'));
-        // 富文本
+        // 富文本项
         v.component('app-mob-rich-text-editor',() => import('@/components/app-mob-rich-text-editor/app-mob-rich-text-editor.vue'));
         // 列表项插件
         v.component('app-list-index-text',() => import('@/components/app-list-index-text/app-list-index-text.vue'));
+        // 富文本（模态）
+        v.component('app-rich-text',() => import('@/components/app-rich-text/app-rich-text.vue'));
     },
 };
\ No newline at end of file

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

 <template>
-    <div>暂不支持</div>
+<div>
+  <div v-html="reValue"></div><ion-icon name="options-outline" @click="open"></ion-icon>
+</div>
 </template>
 <script lang = 'ts'>
 import { Vue, Component, Prop, Model, Watch } from 'vue-property-decorator';
@@ -12,14 +14,14 @@ export default class AppRichTextEditor extends Vue {
      * @type {string}
      * @memberof AppInput
      */
-    @Prop() public value?: string;
+    @Prop() public value?: any;
 
 
     get reValue(){
       return this.value;
     }
     set reValue(value:any){
-      
+      this.$emit("change", value);
     }
     /**
      * 类型
@@ -37,18 +39,6 @@ export default class AppRichTextEditor extends Vue {
      */
     @Prop() public placeholder?:string;   
     
-    /**
-     * change事件
-     *
-     * @memberof AppInput
-     */
-    public change(value: any) {
-      // console.log(value)
-        this.$emit("change", value.html);
-    }
-
-
-
     public messages = "";
 
     public   onEditorBlur(){}
@@ -57,15 +47,22 @@ export default class AppRichTextEditor extends Vue {
 
      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')) {
+            this.reValue = result.datas[0];
+        }
+    }
+
+    public openViewClose(result: any) {
+       
+    }
 
 }
 </script>
 <style lang="less">
-.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;
-}
 </style>
\ No newline at end of file

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

+.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% - 20vh);
+  }
+  .quill-editor-button{
+    text-align: center;
+      position: absolute;
+      bottom: 0;
+      width: 100%
+      ion-button{
+        width: 58%;
+      }
+  }
\ No newline at end of file

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

+<template>
+  <div class="richtext">
+    <quill-editor
+      class="ql-editor quill-editor"
+      v-model="resloutValue"
+      ref="myQuillEditor"
+      :options="editorOption"
+    ></quill-editor>
+    <ion-toolbar class="quill-editor-button">
+      <van-uploader v-show="false" :after-read="afterRead" ref="upload" />
+      <ion-button @click="onClickCancel" color="light">{{$t('app.button.cancel')}}</ion-button>
+      <ion-button @click="onClickOk">{{$t('app.button.confirm')}}</ion-button>
+    </ion-toolbar>
+  </div>
+</template>
+<script lang = 'ts'>
+import {
+  Vue,
+  Component,
+  Prop,
+  Model,
+  Watch,
+  Emit,
+} from "vue-property-decorator";
+import { Subject } from "rxjs";
+import { Environment } from "@/environments/environment";
+import axios from "axios";
+import qs from "qs";
+@Component({})
+export default class AppRichTextEditor extends Vue {
+  public editorOption = {
+    modules: {
+      toolbar: {
+        container: [
+          "bold",
+          "italic",
+          "underline",
+          "strike",
+          "image",
+          { list: "ordered" },
+          { list: "bullet" },
+          { color: [] },
+          { background: [] },
+        ],
+        handlers: {
+          image: () => {
+            this.uploadFile(this.uploadUrl, {});
+          },
+        },
+      },
+    },
+  };
+
+  /**
+   * 视图参数
+   *
+   * @type {string}
+   * @memberof AppRichTextEditor
+   */
+  @Prop() protected _viewparams!: string;
+
+  /**
+   * 上传文件路径
+   *
+   * @type {string}
+   * @memberof AppRichTextEditor
+   */
+  public uploadUrl = Environment.UploadFile;
+
+  /**
+   * 下载路径
+   *
+   * @type {string}
+   * @memberof AppRichTextEditor
+   */
+  public downloadUrl = Environment.BaseUrl + Environment.ExportFile;
+
+  /**
+   * 双向绑定值
+   *
+   * @type {string}
+   * @memberof AppRichTextEditor
+   */
+  public resloutValue: any = "";
+
+  /**
+   * 生命周期
+   *
+   * @type {string}
+   * @memberof AppRichTextEditor
+   */
+  public mounted() {
+    this.resloutValue = JSON.parse(this._viewparams).value;
+  }
+
+  /**
+   * 确定
+   *
+   * @memberof AppRichTextEditor
+   */
+  public onClickOk(): void {
+    this.$emit("close", [this.resloutValue]);
+  }
+
+  /**
+   * 取消
+   *
+   * @memberof AppRichTextEditor
+   */
+  public onClickCancel(): void {
+    this.$emit("close", null);
+  }
+
+  /**
+   * 上传文件
+   *
+   * @param url 路径
+   * @param formData 文件对象
+   * @memberof AppRichTextEditor
+   */
+  public uploadFile(url: string, formData: any) {
+    let up: any = this.$refs.upload;
+    if (up) {
+      up.chooseFile();
+    }
+  }
+
+  /**
+   * 开发模式文件数组
+   *
+   * @private
+   * @type {Array<any>}
+   * @memberof AppRichTextEditor
+   */
+  private devFiles: Array<any> = [];
+
+  /**
+   * 文件选择完成
+   *
+   * @protected
+   * @param {*} file 文件信息
+   * @param {*} detail 详情
+   * @memberof AppRichTextEditor
+   */
+  protected afterRead(file: any, detail: any): void {
+    const params = new FormData();
+    params.append("file", file.file, file.file.name);
+    const config = {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    };
+    axios
+      .post(this.uploadUrl, params, config)
+      .then((response: any) => {
+        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 {
+        }
+      })
+      .catch((response: any) => {});
+  }
+
+  /**
+   * 数据处理
+   *
+   * @private
+   * @memberof AppRichTextEditor
+   */
+  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="">';
+  }
+}
+</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);
+}
+}
+
+</style>
\ No newline at end of file