editor.vue 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255
  1. <template>
  2. <view class="container">
  3. <view class="page-body">
  4. <view class="select-input">
  5. <input class="input" style="display:none;" />
  6. <text>标题:</text><input class="input" placeholder="请输入标题" />
  7. </view>
  8. <view class="head-wrapper">
  9. <view class='wrapper'>
  10. <view class='toolbar' @tap="format" style="height: 120px;overflow-y: auto;">
  11. <view :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold">
  12. </view>
  13. <view :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti"
  14. data-name="italic"></view>
  15. <view :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian"
  16. data-name="underline"></view>
  17. <view :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian"
  18. data-name="strike"></view>
  19. <view :class="formats.align === 'left' ? 'ql-active' : ''" class="iconfont icon-zuoduiqi"
  20. data-name="align" data-value="left"></view>
  21. <view :class="formats.align === 'center' ? 'ql-active' : ''" class="iconfont icon-juzhongduiqi"
  22. data-name="align" data-value="center"></view>
  23. <view :class="formats.align === 'right' ? 'ql-active' : ''" class="iconfont icon-youduiqi"
  24. data-name="align" data-value="right"></view>
  25. <view :class="formats.align === 'justify' ? 'ql-active' : ''" class="iconfont icon-zuoyouduiqi"
  26. data-name="align" data-value="justify"></view>
  27. <view :class="formats.lineHeight ? 'ql-active' : ''" class="iconfont icon-line-height"
  28. data-name="lineHeight" data-value="2"></view>
  29. <view :class="formats.letterSpacing ? 'ql-active' : ''" class="iconfont icon-Character-Spacing"
  30. data-name="letterSpacing" data-value="2em"></view>
  31. <view :class="formats.marginTop ? 'ql-active' : ''" class="iconfont icon-722bianjiqi_duanqianju"
  32. data-name="marginTop" data-value="20px"></view>
  33. <view :class="formats.previewarginBottom ? 'ql-active' : ''"
  34. class="iconfont icon-723bianjiqi_duanhouju" data-name="marginBottom" data-value="20px">
  35. </view>
  36. <view class="iconfont icon-clearedformat" @tap="removeFormat"></view>
  37. <view :class="formats.fontFamily ? 'ql-active' : ''" class="iconfont icon-font"
  38. data-name="fontFamily" data-value="Pacifico"></view>
  39. <view :class="formats.fontSize === '24px' ? 'ql-active' : ''" class="iconfont icon-fontsize"
  40. data-name="fontSize" data-value="24px"></view>
  41. <view :class="formats.color === '#0000ff' ? 'ql-active' : ''" class="iconfont icon-text_color"
  42. data-name="color" data-value="#0000ff"></view>
  43. <view :class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''"
  44. class="iconfont icon-fontbgcolor" data-name="backgroundColor" data-value="#00ff00"></view>
  45. <view class="iconfont icon-date" @tap="insertDate"></view>
  46. <view class="iconfont icon--checklist" data-name="list" data-value="check"></view>
  47. <view :class="formats.list === 'ordered' ? 'ql-active' : ''" class="iconfont icon-youxupailie"
  48. data-name="list" data-value="ordered"></view>
  49. <view :class="formats.list === 'bullet' ? 'ql-active' : ''" class="iconfont icon-wuxupailie"
  50. data-name="list" data-value="bullet"></view>
  51. <view class="iconfont icon-undo" @tap="undo"></view>
  52. <view class="iconfont icon-redo" @tap="redo"></view>
  53. <view class="iconfont icon-outdent" data-name="indent" data-value="-1"></view>
  54. <view class="iconfont icon-indent" data-name="indent" data-value="+1"></view>
  55. <view class="iconfont icon-fengexian" @tap="insertDivider"></view>
  56. <view class="iconfont icon-charutupian" @tap="insertImage"></view>
  57. <view :class="formats.header === 1 ? 'ql-active' : ''" class="iconfont icon-format-header-1"
  58. data-name="header" :data-value="1"></view>
  59. <view :class="formats.script === 'sub' ? 'ql-active' : ''" class="iconfont icon-zitixiabiao"
  60. data-name="script" data-value="sub"></view>
  61. <view :class="formats.script === 'super' ? 'ql-active' : ''" class="iconfont icon-zitishangbiao"
  62. data-name="script" data-value="super"></view>
  63. <view class="iconfont icon-shanchu" @tap="clear"></view>
  64. <view :class="formats.direction === 'rtl' ? 'ql-active' : ''"
  65. class="iconfont icon-direction-rtl" data-name="direction" data-value="rtl"></view>
  66. </view>
  67. <view class="editor-wrapper">
  68. <editor id="editor" class="ql-container" placeholder="开始输入..." showImgSize showImgToolbar
  69. showImgResize @statuschange="onStatusChange" :read-only="readOnly" @ready="onEditorReady">
  70. </editor>
  71. </view>
  72. </view>
  73. </view>
  74. <!-- <button>提交</button> -->
  75. <view class="btn-area">
  76. <button type="primary" formType="submit">确认</button>
  77. </view>
  78. </view>
  79. </view>
  80. </template>
  81. <script>
  82. export default {
  83. data() {
  84. return {
  85. readOnly: false,
  86. formats: {}
  87. }
  88. },
  89. methods: {
  90. readOnlyChange() {
  91. this.readOnly = !this.readOnly
  92. },
  93. onEditorReady() {
  94. uni.createSelectorQuery().select('#editor').context((res) => {
  95. this.editorCtx = res.context
  96. }).exec()
  97. },
  98. undo() {
  99. this.editorCtx.undo()
  100. },
  101. redo() {
  102. this.editorCtx.redo()
  103. },
  104. format(e) {
  105. let {
  106. name,
  107. value
  108. } = e.target.dataset
  109. if (!name) return
  110. // console.log('format', name, value)
  111. this.editorCtx.format(name, value)
  112. },
  113. onStatusChange(e) {
  114. const formats = e.detail
  115. this.formats = formats
  116. },
  117. insertDivider() {
  118. this.editorCtx.insertDivider({
  119. success: function() {
  120. console.log('insert divider success')
  121. }
  122. })
  123. },
  124. clear() {
  125. this.editorCtx.clear({
  126. success: function(res) {
  127. console.log("clear success")
  128. }
  129. })
  130. },
  131. removeFormat() {
  132. this.editorCtx.removeFormat()
  133. },
  134. insertDate() {
  135. const date = new Date()
  136. const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
  137. this.editorCtx.insertText({
  138. text: formatDate
  139. })
  140. },
  141. insertImage() {
  142. uni.chooseImage({
  143. count: 1,
  144. success: (res) => {
  145. this.editorCtx.insertImage({
  146. src: res.tempFilePaths[0],
  147. alt: '图像',
  148. success: function() {
  149. console.log('insert image success')
  150. }
  151. })
  152. }
  153. })
  154. }
  155. },
  156. onLoad() {
  157. uni.loadFontFace({
  158. family: 'Pacifico',
  159. source: 'url("https://sungd.github.io/Pacifico.ttf")'
  160. })
  161. },
  162. }
  163. </script>
  164. <style lang="scss">
  165. @import "./editor-icon.css";
  166. .page-body {
  167. height: calc(100vh - var(--window-top) - var(--status-bar-height));
  168. }
  169. .head-wrapper {
  170. border-style: solid;
  171. border-width: 2px;
  172. margin: 10px;
  173. }
  174. .wrapper {
  175. height: 100%;
  176. }
  177. .editor-wrapper {
  178. height: calc(100vh - var(--window-top) - var(--status-bar-height) - 50px - 240px);
  179. background: #fff;
  180. }
  181. .iconfont {
  182. display: inline-block;
  183. padding: 8px 8px;
  184. width: 24px;
  185. height: 24px;
  186. cursor: pointer;
  187. font-size: 20px;
  188. }
  189. .toolbar {
  190. box-sizing: border-box;
  191. border-bottom: 0;
  192. font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  193. }
  194. .ql-container {
  195. box-sizing: border-box;
  196. padding: 12px 15px;
  197. width: 100%;
  198. min-height: 30vh;
  199. height: 100%;
  200. margin-top: 20px;
  201. font-size: 16px;
  202. line-height: 1.5;
  203. }
  204. .ql-active {
  205. color: #06c;
  206. }
  207. .btn-area {
  208. padding: 50upx;
  209. padding-top: 20upx;
  210. padding-bottom: 0upx;
  211. button {
  212. background-color: #007AFF;
  213. }
  214. }
  215. .select-input {
  216. display: flex;
  217. flex-direction: row;
  218. justify-content: flex-start;
  219. font-size: 16px;
  220. margin: 30upx 0 50upx 30upx;
  221. input {
  222. padding-left: 20upx;
  223. // padding-top: 10upx;
  224. background-color: #FFFFFF;
  225. width: 500upx;
  226. height: 50upx;
  227. box-shadow: 0upx 0upx 20upx #D3D3D3;
  228. border-radius: 5upx;
  229. }
  230. }
  231. </style>