editor.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. Page({
  2. data: {
  3. formats: {},
  4. readOnly: false,
  5. placeholder: '开始输入...',
  6. editorHeight: 300,
  7. keyboardHeight: 0,
  8. isIOS: false
  9. },
  10. readOnlyChange() {
  11. this.setData({
  12. readOnly: !this.data.readOnly
  13. })
  14. },
  15. onLoad() {
  16. const platform = wx.getSystemInfoSync().platform
  17. const isIOS = platform === 'ios'
  18. this.setData({
  19. isIOS
  20. })
  21. const that = this
  22. this.updatePosition(0)
  23. let keyboardHeight = 0
  24. wx.onKeyboardHeightChange(res => {
  25. if (res.height === keyboardHeight) return
  26. const duration = res.height > 0 ? res.duration * 1000 : 0
  27. keyboardHeight = res.height
  28. setTimeout(() => {
  29. wx.pageScrollTo({
  30. scrollTop: 0,
  31. success() {
  32. that.updatePosition(keyboardHeight)
  33. that.editorCtx.scrollIntoView()
  34. }
  35. })
  36. }, duration)
  37. })
  38. },
  39. updatePosition(keyboardHeight) {
  40. const toolbarHeight = 50
  41. const {
  42. windowHeight,
  43. platform
  44. } = wx.getSystemInfoSync()
  45. let editorHeight = keyboardHeight > 0 ? (windowHeight - keyboardHeight - toolbarHeight) : windowHeight
  46. this.setData({
  47. editorHeight,
  48. keyboardHeight
  49. })
  50. },
  51. calNavigationBarAndStatusBar() {
  52. const systemInfo = wx.getSystemInfoSync()
  53. const {
  54. statusBarHeight,
  55. platform
  56. } = systemInfo
  57. const isIOS = platform === 'ios'
  58. const navigationBarHeight = isIOS ? 44 : 48
  59. return statusBarHeight + navigationBarHeight
  60. },
  61. onEditorReady() {
  62. const that = this
  63. wx.createSelectorQuery().select('#editor').context(function (res) {
  64. that.editorCtx = res.context
  65. }).exec()
  66. },
  67. asd54(e) {
  68. this.setData({
  69. htmlT: e.detail.html
  70. })
  71. },
  72. blur() {
  73. this.editorCtx.blur()
  74. },
  75. format(e) {
  76. let {
  77. name,
  78. value
  79. } = e.target.dataset
  80. if (!name) return
  81. // console.log('format', name, value)
  82. this.editorCtx.format(name, value)
  83. },
  84. onStatusChange(e) {
  85. const formats = e.detail
  86. this.setData({
  87. formats
  88. })
  89. },
  90. insertDivider() {
  91. this.editorCtx.insertDivider({
  92. success: function () {
  93. console.log('insert divider success')
  94. }
  95. })
  96. },
  97. clear() {
  98. this.editorCtx.clear({
  99. success: function (res) {
  100. console.log("clear success")
  101. }
  102. })
  103. },
  104. removeFormat() {
  105. this.editorCtx.removeFormat()
  106. },
  107. insertDate() {
  108. const date = new Date()
  109. const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
  110. this.editorCtx.insertText({
  111. text: formatDate
  112. })
  113. },
  114. insertImage() {
  115. const that = this
  116. wx.chooseImage({
  117. count: 1,
  118. success: function (res) {
  119. that.editorCtx.insertImage({
  120. src: res.tempFilePaths[0],
  121. data: {
  122. id: 'abcd',
  123. role: 'god'
  124. },
  125. width: '80%',
  126. success: function () {
  127. console.log('insert image success')
  128. }
  129. })
  130. }
  131. })
  132. }
  133. })