3 changed files with 156 additions and 103 deletions
Unified View
Diff Options
-
+3 -0pages.json
-
+3 -103pages/index/index.vue
-
+150 -0pages_order/author/editor.vue
+ 3
- 0
pages.json
View File
+ 3
- 103
pages/index/index.vue
View File
+ 150
- 0
pages_order/author/editor.vue
View File
| @ -0,0 +1,150 @@ | |||||
| <template> | |||||
| <view class="page"> | |||||
| <navbar title="1531字" | |||||
| leftClick @leftClick="$utils.navigateBack"/> | |||||
| <view class="title"> | |||||
| <input type="text" | |||||
| placeholder="请输入章节标题" | |||||
| v-model="form.title"/> | |||||
| </view> | |||||
| <editor id="editor" | |||||
| class="ql-container" | |||||
| placeholder="请输入正文..." | |||||
| @statuschange="onStatusChange" | |||||
| @input="onInput" | |||||
| @ready="onEditorReady"> | |||||
| </editor> | |||||
| <view class="plus"> | |||||
| 发布 | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| export default { | |||||
| data() { | |||||
| return { | |||||
| formats: {}, | |||||
| form : { | |||||
| title : '', | |||||
| }, | |||||
| } | |||||
| }, | |||||
| onLoad() { | |||||
| }, | |||||
| methods: { | |||||
| onInput(e){ | |||||
| console.log(e.detail); | |||||
| }, | |||||
| onEditorReady() { | |||||
| uni.createSelectorQuery().select('#editor').context((res) => { | |||||
| this.editorCtx = res.context | |||||
| }).exec() | |||||
| }, | |||||
| undo() { | |||||
| this.editorCtx.undo() | |||||
| }, | |||||
| redo() { | |||||
| this.editorCtx.redo() | |||||
| }, | |||||
| format(e) { | |||||
| let { | |||||
| name, | |||||
| value | |||||
| } = e.target.dataset | |||||
| if (!name) return | |||||
| // console.log('format', name, value) | |||||
| this.editorCtx.format(name, value) | |||||
| }, | |||||
| onStatusChange(e) { | |||||
| const formats = e.detail | |||||
| this.formats = formats | |||||
| }, | |||||
| insertDivider() { | |||||
| this.editorCtx.insertDivider({ | |||||
| success: function() { | |||||
| console.log('insert divider success') | |||||
| } | |||||
| }) | |||||
| }, | |||||
| clear() { | |||||
| uni.showModal({ | |||||
| title: '清空编辑器', | |||||
| content: '确定清空编辑器全部内容？', | |||||
| success: res => { | |||||
| if (res.confirm) { | |||||
| this.editorCtx.clear({ | |||||
| success: function(res) { | |||||
| console.log("clear success") | |||||
| } | |||||
| }) | |||||
| } | |||||
| } | |||||
| }) | |||||
| }, | |||||
| removeFormat() { | |||||
| this.editorCtx.removeFormat() | |||||
| }, | |||||
| insertDate() { | |||||
| const date = new Date() | |||||
| const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}` | |||||
| this.editorCtx.insertText({ | |||||
| text: formatDate | |||||
| }) | |||||
| }, | |||||
| insertImage() { | |||||
| uni.chooseImage({ | |||||
| count: 1, | |||||
| success: (res) => { | |||||
| this.editorCtx.insertImage({ | |||||
| src: res.tempFilePaths[0], | |||||
| alt: '图像', | |||||
| success: function() { | |||||
| console.log('insert image success') | |||||
| } | |||||
| }) | |||||
| } | |||||
| }) | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style scoped lang="scss"> | |||||
| .page{ | |||||
| font-size: 32rpx; | |||||
| .title{ | |||||
| padding: 30rpx; | |||||
| background-color: #fff; | |||||
| margin: 10rpx 0; | |||||
| input{ | |||||
| } | |||||
| } | |||||
| .ql-container{ | |||||
| background-color: #fff; | |||||
| padding: 30rpx; | |||||
| width: 100%; | |||||
| box-sizing: border-box; | |||||
| min-height: calc(100vh - 300rpx); | |||||
| line-height: 50rpx; | |||||
| } | |||||
| .plus{ | |||||
| background-color: $uni-color; | |||||
| color: #fff; | |||||
| position: fixed; | |||||
| right: 20rpx; | |||||
| top: 40%; | |||||
| width: 100rpx; | |||||
| height: 100rpx; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| border-radius: 25rpx; | |||||
| } | |||||
| } | |||||
| </style> | |||||