Ver Fonte

富文本编辑

zhaoxiaohai há 3 anos atrás
pai
commit
caa6e18a60

+ 92 - 14
pages/storeMessage/editor/editor.js

@@ -1,3 +1,7 @@
+import {
+  ApiModel
+} from "../../../utils/api";
+const _Http = new ApiModel();
 Page({
   data: {
     formats: {},
@@ -5,14 +9,20 @@ Page({
     placeholder: '开始输入...',
     editorHeight: 300,
     keyboardHeight: 0,
-    isIOS: false
+    isIOS: false,
+    showRichText: '', //富文本文件
   },
   readOnlyChange() {
     this.setData({
       readOnly: !this.data.readOnly
     })
   },
-  onLoad() {
+  onLoad(options) {
+    console.log(options)
+    this.setData({
+      showRichText: "<p>asdasdsdgss<img src=\"https://bwj.obs.cn-east-2.myhuaweicloud.com:443/202201061641468934405B8cac64d.png\" width=\"80%\" data-custom=\"id=535&amp;role=god\"></p><p><br></p>"
+    })
+
     const platform = wx.getSystemInfoSync().platform
     const isIOS = platform === 'ios'
     this.setData({
@@ -63,12 +73,18 @@ Page({
   onEditorReady() {
     const that = this
     wx.createSelectorQuery().select('#editor').context(function (res) {
+      console.log(res)
       that.editorCtx = res.context
+      that.editorCtx.setContents({
+        html: that.data.showRichText //将数据写入编辑器内
+      })
+      event.on('resetEditor', that, that.onEditorReady.bind(that))
     }).exec()
+
   },
-  asd54(e) {
+  compileText(e) {
     this.setData({
-      htmlT: e.detail.html
+      showRichText: e.detail.html
     })
   },
   blur() {
@@ -115,22 +131,84 @@ Page({
     })
   },
   insertImage() {
-    const that = this
+    const that = this;
     wx.chooseImage({
       count: 1,
       success: function (res) {
-        that.editorCtx.insertImage({
-          src: res.tempFilePaths[0],
-          data: {
-            id: 'abcd',
-            role: 'god'
+        console.log(res)
+        //获取文件后缀
+        var index = res.tempFiles[0].path.lastIndexOf(".");
+        var ext = res.tempFiles[0].path.substr(index + 1);
+        //文件名称
+        const timestamp = Date.parse(new Date());;
+        //发送请求
+        wx.getFileSystemManager().readFile({
+          filePath: res.tempFiles[0].path,
+          success: result => {
+            console.log("临时路径", result)
+            //返回临时文件路径
+            const fileData = result.data
+            _Http.basic({
+              "accesstoken": wx.getStorageSync('userData').token,
+              "classname": "system.system.docManage",
+              "method": "getFileName",
+              "content": {
+                "filename": timestamp,
+                "filetype": ext,
+                "ownertable": "tagents",
+                "ownerid": wx.getStorageSync('userData').tagentsid,
+                "ftype": "richtext"
+              }
+            }).then(res => {
+              console.log("上传成功", res)
+              if (res.msg != "成功") return wx.showToast({
+                title: "文件上传失败,请稍后再试",
+                icon: "none"
+              });
+              that.uploadFile(res, fileData)
+            }).catch(err => {})
           },
-          width: '80%',
-          success: function () {
-            console.log('insert image success')
+          fail: console.error
+        })
+      }
+    })
+  },
+  /* 上传成功反馈 */
+  uploadFile(res, data) {
+    console.log("文件上传")
+    var that = this;
+    wx.request({
+      url: res.data.obsuploadurl,
+      method: "PUT",
+      data: data,
+      header: {
+        'content-type': 'application/octet-stream' // 默认值
+      },
+      success() {
+        _Http.basic({
+          "accesstoken": wx.getStorageSync('userData').token,
+          "classname": "system.system.docManage",
+          "method": "uploadSuccess",
+          "content": {
+            "obsfilename": res.data.obsfilename
           }
+        }).then(res => {
+          console.log("上传成功反馈", res)
+          that.editorCtx.insertImage({
+            src: res.data[0].fobsurl,
+            data: {
+              id: res.data[0].tattachmentid,
+              role: 'god'
+            },
+            width: '80%',
+            success: function () {
+              console.log('insert image success')
+            }
+          })
+        }).catch(err => {
+          console.log(err)
         })
       }
     })
-  }
+  },
 })

+ 8 - 5
pages/storeMessage/editor/editor.wxml

@@ -1,10 +1,13 @@
-<view class="container" style="height:300px;"><!-- {{editorHeight}} -->
-  <editor id="editor" class="ql-container" placeholder="{{placeholder}}" bindstatuschange="onStatusChange" bindready="onEditorReady" bindinput='asd54'>
+<view class="container" style="height:65vh;">
+  <!-- {{editorHeight}} -->
+  <editor id="editor" class="ql-container" placeholder="{{placeholder}}" bindstatuschange="onStatusChange" bindready="onEditorReady" bindinput='compileText'>
   </editor>
 </view>
-<view style="margin-top: 500rpx;">{{htmlT}}</view>
-
-<view class="toolbar" catchtouchend="format" hidden="{{keyboardHeight > 0 ? false : true}}" style="bottom: {{isIOS ? keyboardHeight : 0}}px">
+<view style="margin-top: 67vh;">
+  <van-button type="default">保存</van-button>
+</view>
+<!-- hidden="{{keyboardHeight > 0 ? false : true}}" style="bottom: {{isIOS ? keyboardHeight : 0}}px" -->
+<view class="toolbar" catchtouchend="format" >
   <i class="iconfont icon-charutupian" catchtouchend="insertImage"></i>
   <i class="iconfont icon-format-header-2 {{formats.header === 2 ? 'ql-active' : ''}}" data-name="header" data-value="{{2}}"></i>
   <i class="iconfont icon-format-header-3 {{formats.header === 3 ? 'ql-active' : ''}}" data-name="header" data-value="{{3}}"></i>

+ 1 - 0
pages/storeMessage/editor/editor.wxss

@@ -6,6 +6,7 @@
   top: 0; 
   left: 0; 
   width: 100%;
+  background-color: #ffffff;
 }
 
 .ql-container {

+ 11 - 1
pages/storeMessage/index.js

@@ -77,6 +77,12 @@ Page({
             this.returnData(data)
         }
     },
+    //跳转富文本
+    toRichText() {
+        wx.navigateTo({
+            url: './editor/editor?isDisabled=' + this.data.isDisabled,
+        })
+    },
     /* 添加图片 */
     imageChange(data) {
         this.setData({
@@ -114,7 +120,11 @@ Page({
                 ownertable: data.attinfos[i].ownertable,
                 fdocument: data.attinfos[i].fdocument
             };
-            (data.attinfos[i].ftype == "brandlogo") ? attinfos.unshift(Data): coverAttinfos.unshift(Data);
+            if (data.attinfos[i].ftype == "brandlogo") {
+                attinfos.unshift(Data)
+            } else if (data.attinfos[i].ftype == "brandcover") {
+                coverAttinfos.unshift(Data)
+            }
         }
 
         //格式化经营类目

+ 1 - 1
pages/storeMessage/index.wxml

@@ -30,7 +30,7 @@
         </My_GreyRectangleForm>
         <import src="/wxParse/wxParse" />
         <My_GreyRectangleForm title="公司介绍" required>
-            <view style="width: 400rpx; text-align: right;">
+            <view style="width: 400rpx; text-align: right; color: #4BBECF; text-decoration: underline;" bindtap="toRichText">
                 编辑/预览
                 <!-- <template is="wxParse" data="{{wxParseData:article.nodes}}" /> -->
             </view>

+ 7 - 0
project.private.config.json

@@ -163,6 +163,13 @@
                     "name": "",
                     "pathName": "pages/businessPartner/applyFor",
                     "query": "",
+                    "launchMode": "default",
+                    "scene": null
+                },
+                {
+                    "name": "",
+                    "pathName": "pages/storeMessage/editor/editor",
+                    "query": "isDisabled=false",
                     "scene": null,
                     "launchMode": "default"
                 }