editor.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. const util = require('../../../../util/util.js')
  2. const compareVersion = util.compareVersion
  3. Page({
  4. onShareAppMessage() {
  5. return {
  6. title: 'editor',
  7. path: 'page/component/pages/editor/editor'
  8. }
  9. },
  10. data: {
  11. formats: {},
  12. bottom: 0,
  13. readOnly: false,
  14. placeholder: '开始输入...',
  15. },
  16. readOnlyChange() {
  17. this.setData({
  18. readOnly: !this.data.readOnly
  19. })
  20. },
  21. onLoad() {
  22. this.canUse = true
  23. wx.loadFontFace({
  24. family: 'Pacifico',
  25. source: 'url("https://sungd.github.io/Pacifico.ttf")',
  26. success: console.log
  27. })
  28. const {SDKVersion} = wx.getSystemInfoSync()
  29. if (compareVersion(SDKVersion, '2.7.0') >= 0) {
  30. //
  31. } else {
  32. this.canUse = false
  33. // 如果希望用户在最新版本的客户端上体验您的小程序,可以这样子提示
  34. wx.showModal({
  35. title: '提示',
  36. content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'
  37. })
  38. }
  39. },
  40. onEditorReady() {
  41. const that = this
  42. wx.createSelectorQuery().select('#editor').context(function (res) {
  43. that.editorCtx = res.context
  44. }).exec()
  45. },
  46. undo() {
  47. this.editorCtx.undo()
  48. },
  49. redo() {
  50. this.editorCtx.redo()
  51. },
  52. format(e) {
  53. if (!this.canUse) return
  54. const {name, value} = e.target.dataset
  55. if (!name) return
  56. // console.log('format', name, value)
  57. this.editorCtx.format(name, value)
  58. },
  59. onStatusChange(e) {
  60. const formats = e.detail
  61. this.setData({formats})
  62. },
  63. insertDivider() {
  64. this.editorCtx.insertDivider({
  65. success() {
  66. console.log('insert divider success')
  67. }
  68. })
  69. },
  70. clear() {
  71. this.editorCtx.clear({
  72. success() {
  73. console.log('clear success')
  74. }
  75. })
  76. },
  77. removeFormat() {
  78. this.editorCtx.removeFormat()
  79. },
  80. insertDate() {
  81. const date = new Date()
  82. const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
  83. this.editorCtx.insertText({
  84. text: formatDate
  85. })
  86. },
  87. insertImage() {
  88. const that = this
  89. wx.chooseImage({
  90. count: 1,
  91. success() {
  92. that.editorCtx.insertImage({
  93. src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1543767268337&di=5a3bbfaeb30149b2afd33a3c7aaa4ead&imgtype=0&src=http%3A%2F%2Fimg02.tooopen.com%2Fimages%2F20151031%2Ftooopen_sy_147004931368.jpg',
  94. data: {
  95. id: 'abcd',
  96. role: 'god'
  97. },
  98. success() {
  99. console.log('insert image success')
  100. }
  101. })
  102. }
  103. })
  104. }
  105. })