QuillEditor.vue 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. <template>
  2. <div :class="prefixCls">
  3. <quill-editor
  4. v-model="content"
  5. ref="myQuillEditor"
  6. :options="editorOption"
  7. @blur="onEditorBlur($event)"
  8. @focus="onEditorFocus($event)"
  9. @ready="onEditorReady($event)"
  10. @change="onEditorChange($event)">
  11. </quill-editor>
  12. </div>
  13. </template>
  14. <script>
  15. import 'quill/dist/quill.core.css'
  16. import 'quill/dist/quill.snow.css'
  17. import 'quill/dist/quill.bubble.css'
  18. import { quillEditor } from 'vue-quill-editor'
  19. export default {
  20. name: 'QuillEditor',
  21. components: {
  22. quillEditor
  23. },
  24. props: {
  25. prefixCls: {
  26. type: String,
  27. default: 'ant-editor-quill'
  28. },
  29. // 表单校验用字段
  30. // eslint-disable-next-line
  31. value: {
  32. type: String
  33. }
  34. },
  35. data () {
  36. return {
  37. content: null,
  38. editorOption: {
  39. // some quill options
  40. }
  41. }
  42. },
  43. methods: {
  44. onEditorBlur (quill) {
  45. console.log('editor blur!', quill)
  46. },
  47. onEditorFocus (quill) {
  48. console.log('editor focus!', quill)
  49. },
  50. onEditorReady (quill) {
  51. console.log('editor ready!', quill)
  52. },
  53. onEditorChange ({ quill, html, text }) {
  54. console.log('editor change!', quill, html, text)
  55. this.$emit('change', html)
  56. }
  57. },
  58. watch: {
  59. value (val) {
  60. this.content = val
  61. }
  62. }
  63. }
  64. </script>
  65. <style lang="less" scoped>
  66. @import url('../index.less');
  67. /* 覆盖 quill 默认边框圆角为 ant 默认圆角,用于统一 ant 组件风格 */
  68. .ant-editor-quill {
  69. /deep/ .ql-toolbar.ql-snow {
  70. border-radius: @border-radius-base @border-radius-base 0 0;
  71. }
  72. /deep/ .ql-container.ql-snow {
  73. border-radius: 0 0 @border-radius-base @border-radius-base;
  74. }
  75. }
  76. </style>