template.vue 1012 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. <!--onlyoffice 编辑器-->
  2. <template>
  3. <div>
  4. <div id="editorDiv" ref="editor" class="nav" />
  5. </div>
  6. </template>
  7. <script>
  8. export default {
  9. name: 'editor',
  10. data () {
  11. return {
  12. configKey: '',
  13. option: {}
  14. }
  15. },
  16. watch: {
  17. option: {
  18. handler (n, o) {
  19. this.setEditor(n)
  20. },
  21. deep: true
  22. }
  23. },
  24. mounted () {
  25. const temp = localStorage.getItem('templateOption')
  26. this.option = temp ? JSON.parse(temp) : {}
  27. if (this.$utils.isNotEmpty(this.option)) {
  28. this.setEditor(this.option)
  29. }
  30. },
  31. methods: {
  32. setEditor (option) {
  33. const config = {
  34. ...option,
  35. width: '100%',
  36. height: document.body.clientHeight + 'px'
  37. }
  38. const docEditor = new DocsAPI.DocEditor('editorDiv', config)
  39. this.configKey = config.document.key
  40. }
  41. }
  42. }
  43. </script>