微信小程序笔记功能(富文本editor功能)开发

一、效果图展示

模拟器及pc 端效果图 手机端就不贴了

二、把官方示例copy到自己的项目传送门

三、改一改上传图片功能

js 复制代码
  insertImage() {
    const that = this
    wx.chooseImage({
    // count:1   一次选择图片的个数
      success: function (response) {
      // 多张图片上传
        response.tempFilePaths.map(item => {
          wx.uploadFile({
            url: '上传图片api',
            name: 'file',
            formData: {
              systemId: '49603D09F8B64F068F77B7FC965410E0'  // 需要的值
            },
            filePath: item,
            success: res => {
            // 把图片插入到富文本
              that.editorCtx.insertImage({
                src: JSON.parse(res.data).data.url,
                data: {
                  id: 'abcd',
                  role: 'god'
                },
                width: '80%',
                success: function () {
                  console.log('insert image success')
                }
              })
            },
            fail: err1 => {
              console.log(err1, '是比啊了');
            }
          })
        })


      },
      fail: err => {
        console.log(err, '你失败了');
      }
    })
  }

四、兼容pc端 示例中的代码只适合手机端 所以模拟器上没法使用

原理:示例中只区分了ios 和安卓 并且keyboardHeight 时不显示工具栏 这里pc被当成了安卓 所以不显示

解决: 1、区分pc和手机端 2、pc端的工具栏一般放在顶部

js 复制代码
 // 区分手机端和pc端
 const platform = wx.getSystemInfoSync().platform
    this.setData({
      isPC: platform == 'windows' || platform == 'mac' || platform == 'devtools' ? true : false
    })
html 复制代码
// 自己研读isPC的功能
<view class="container" style="height:{{editorHeight}}px;top: {{isPC?'50px':''}};">
  <editor id="editor" class="ql-container" placeholder="{{placeholder}}" bindstatuschange="onStatusChange" bindready="onEditorReady" bindinput='editorIps' read-only="{{readOnly}}">
  </editor>
</view>
<!-- 手机端的工具栏 -->
<view class="toolbar" catchtouchend="format" hidden="{{keyboardHeight > 0 ? false : true}}" style="bottom: {{isIOS ? keyboardHeight : 0}}px" wx:if="{{!isPC}}">
  <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>
  <i class="iconfont icon-zitijiacu {{formats.bold ? 'ql-active' : ''}}" data-name="bold"></i>
  <i class="iconfont icon-zitixieti {{formats.italic ? 'ql-active' : ''}}" data-name="italic"></i>
  <i class="iconfont icon-zitixiahuaxian {{formats.underline ? 'ql-active' : ''}}" data-name="underline"></i>
  <i class="iconfont icon--checklist" data-name="list" data-value="check"></i>
  <i class="iconfont icon-youxupailie {{formats.list === 'ordered' ? 'ql-active' : ''}}" data-name="list" data-value="ordered"></i>
  <i class="iconfont icon-wuxupailie {{formats.list === 'bullet' ? 'ql-active' : ''}}" data-name="list" data-value="bullet"></i>
</view>

<!-- pc端的工具栏 去掉了hidden属性 及让工具栏位于顶部 -->
<view class="toolbar" catchtouchend="format" style="top:0" wx:if="{{isPC}}">
  <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>
  <i class="iconfont icon-zitijiacu {{formats.bold ? 'ql-active' : ''}}" data-name="bold"></i>
  <i class="iconfont icon-zitixieti {{formats.italic ? 'ql-active' : ''}}" data-name="italic"></i>
  <i class="iconfont icon-zitixiahuaxian {{formats.underline ? 'ql-active' : ''}}" data-name="underline"></i>
  <i class="iconfont icon--checklist" data-name="list" data-value="check"></i>
  <i class="iconfont icon-youxupailie {{formats.list === 'ordered' ? 'ql-active' : ''}}" data-name="list" data-value="ordered"></i>
  <i class="iconfont icon-wuxupailie {{formats.list === 'bullet' ? 'ql-active' : ''}}" data-name="list" data-value="bullet"></i>
</view>

五、editor bindinput事件为关键事件 用于获取实时数据

html 复制代码
  <editor id="editor" class="ql-container" placeholder="{{placeholder}}"  bindinput='editorIps' read-only="{{readOnly}}">
  </editor>
js 复制代码
 editorIps(e) {
    this.setData({
      editorDetail: e.detail.html,
    })
相关推荐
Emma歌小白2 天前
如何首次运行小程序后端
微信小程序
赣州云智科技的技术铺子2 天前
【一步步开发AI运动APP】十二、自定义扩展新运动项目1
微信小程序·小程序·云开发·智能小程序
_落纸2 天前
三大基础无源电子元件——电阻(R)、电感(L)、电容(C)
笔记
2501_915918412 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
Alice-YUE2 天前
【CSS学习笔记3】css特性
前端·css·笔记·html
2303_Alpha2 天前
SpringBoot
笔记·学习
00后程序员张2 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
Hello_Embed2 天前
STM32HAL 快速入门(二十):UART 中断改进 —— 环形缓冲区解决数据丢失
笔记·stm32·单片机·学习·嵌入式软件
咸甜适中2 天前
rust语言 (1.88) 学习笔记:客户端和服务器端同在一个项目中
笔记·学习·rust
Grassto2 天前
RAG 从入门到放弃?丐版 demo 实战笔记(go+python)
笔记