rte.vue 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <template>
  2. <div>
  3. <h1>富文本编辑器</h1>
  4. <div class="edit_container">
  5. <quill-editor
  6. :options="editorOption"
  7. @blur="onEditorBlur($event)"
  8. @change="onEditorChange($event)"
  9. @focus="onEditorFocus($event)"
  10. ref="myQuillEditor"
  11. v-model="content"
  12. ></quill-editor>
  13. <el-button plain @click="saveHtml">保存</el-button>
  14. </div>
  15. <h1>markdown编辑器</h1>
  16. <div class="edit">
  17. <mavon-editor v-model="model.content"></mavon-editor>
  18. <el-button type="primary" size="small" @click="submit">发表</el-button>
  19. </div>
  20. </div>
  21. </template>
  22. <script>
  23. export default {
  24. name: 'App',
  25. data() {
  26. return {
  27. content: `<p>hello world</p>`,
  28. editorOption: {},
  29. model:{
  30. content:''
  31. }
  32. }
  33. },
  34. computed: {
  35. editor() {
  36. return this.$refs.myQuillEditor.quill
  37. }
  38. },
  39. methods: {
  40. // onEditorReady(editor) { // 准备编辑器
  41. // },
  42. onEditorBlur() {}, // 失去焦点事件
  43. onEditorFocus() {}, // 获得焦点事件
  44. onEditorChange() {}, // 内容改变事件
  45. saveHtml() {
  46. console.log(this.content)
  47. }, // 保存方法
  48. submit(){}
  49. }
  50. }
  51. </script>