rte.vue 844 B

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. <template>
  2. <div class="edit_container">
  3. <quill-editor
  4. :options="editorOption"
  5. @blur="onEditorBlur($event)"
  6. @change="onEditorChange($event)"
  7. @focus="onEditorFocus($event)"
  8. ref="myQuillEditor"
  9. v-model="content"
  10. ></quill-editor>
  11. <button v-on:click="saveHtml">保存</button>
  12. </div>
  13. </template>
  14. <script>
  15. export default {
  16. name: 'App',
  17. data() {
  18. return {
  19. content: `<p>hello world</p>`,
  20. editorOption: {}
  21. }
  22. },
  23. computed: {
  24. editor() {
  25. return this.$refs.myQuillEditor.quill
  26. }
  27. },
  28. methods: {
  29. // onEditorReady(editor) { // 准备编辑器
  30. // },
  31. onEditorBlur() {}, // 失去焦点事件
  32. onEditorFocus() {}, // 获得焦点事件
  33. onEditorChange() {}, // 内容改变事件
  34. saveHtml() {} // 保存方法
  35. }
  36. }
  37. </script>
  38. <style>
  39. </style>