WangEditor.vue 1009 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <template>
  2. <div :class="prefixCls">
  3. <div ref="editor" class="editor-wrapper"></div>
  4. </div>
  5. </template>
  6. <script>
  7. import WEditor from 'wangeditor'
  8. export default {
  9. name: 'WangEditor',
  10. props: {
  11. prefixCls: {
  12. type: String,
  13. default: 'ant-editor-wang'
  14. },
  15. // eslint-disable-next-line
  16. value: {
  17. type: String
  18. }
  19. },
  20. data () {
  21. return {
  22. editor: null,
  23. editorContent: null
  24. }
  25. },
  26. watch: {
  27. value (val) {
  28. this.editorContent = val
  29. this.editor.txt.html(val)
  30. }
  31. },
  32. mounted () {
  33. this.initEditor()
  34. },
  35. methods: {
  36. initEditor () {
  37. this.editor = new WEditor(this.$refs.editor)
  38. // this.editor.onchangeTimeout = 200
  39. this.editor.customConfig.onchange = (html) => {
  40. this.editorContent = html
  41. this.$emit('change', this.editorContent)
  42. }
  43. this.editor.create()
  44. }
  45. }
  46. }
  47. </script>
  48. <style lang="less" scoped>
  49. .ant-editor-wang {
  50. .editor-wrapper {
  51. text-align: left;
  52. }
  53. }
  54. </style>