UeAndImg.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. <template>
  2. <div class="ue">
  3. <div :id="'editor' + index" type="text/plain"></div>
  4. <!-- <tinymce id="index" v-model="value"></tinymce> -->
  5. </div>
  6. </template>
  7. <script>
  8. export default {
  9. name: "ue",
  10. data() {
  11. return {
  12. editor: null,
  13. defConfig: {
  14. initialFrameHeight: 300,
  15. scaleEnabled:true,
  16. 'fontfamily':[
  17. { label: '', name: 'songti', val: '宋体,SimSun' },
  18. { label: '', name: 'SimSun', val: '仿宋,SimSun' },
  19. { label:'',name:'FangSong_GB2312',val:'仿宋_GB2312 ,FangSong_GB2312'},
  20. { label:'',name:'kaiti',val:'楷体,楷体_GB2312, SimKai'},
  21. { label:'',name:'yahei',val:'微软雅黑,Microsoft YaHei'},
  22. { label:'',name:'heiti',val:'黑体, SimHei'},
  23. { label:'',name:'lishu',val:'隶书, SimLi'},
  24. { label:'',name:'andaleMono',val:'andale mono'},
  25. { label:'',name:'arial',val:'arial, helvetica,sans-serif'},
  26. { label:'',name:'arialBlack',val:'arial black,avant garde'},
  27. { label:'',name:'comicSansMs',val:'comic sans ms'},
  28. { label:'',name:'impact',val:'impact,chicago'},
  29. { label:'',name:'timesNewRoman',val:'times new roman'}
  30. ],
  31. },
  32. setContentFinished: false,
  33. index: (new Date().getTime() + Math.floor((Math.random() * 100) + 1)),
  34. ready: false,
  35. };
  36. },
  37. props: {
  38. value: {
  39. type: String,
  40. default: ''
  41. },
  42. config: {
  43. type: Object,
  44. default: () => {
  45. return {};
  46. }
  47. },
  48. // index: {
  49. // type: [String, Number],
  50. // default: (new Date().getTime() + '')
  51. // }
  52. readonly: {
  53. type: Boolean,
  54. default: false
  55. }
  56. },
  57. watch: {
  58. value(val, oldval) {
  59. if (!this.setContentFinished || val == this.getUEContent()) {
  60. return;
  61. }
  62. console.log("watch ue value");
  63. this.initUe(false);
  64. },
  65. editor() {
  66. if (!this.ready) {
  67. this.ready = true;
  68. this.editor.ready(() => {
  69. // console.log("ue1 " + this.value)
  70. this.editor.setContent(this.value || ''); // 确保UE加载完成后,放入内容。
  71. this.setContentFinished = true;
  72. this.editor.addListener("contentchange", () => {
  73. // console.log(this.getUEContent())
  74. this.$emit('input', this.getUEContent());
  75. })
  76. });
  77. }
  78. }
  79. },
  80. mounted() {
  81. if(this.config) {
  82. Object.assign(this.defConfig, this.config);
  83. }
  84. this.defConfig['readonly'] = this.readonly;
  85. this.initUe(true);
  86. },
  87. methods: {
  88. initUe: function(isInit) {
  89. if (!isInit && this.setContentFinished) {
  90. this.editor.setContent(this.value || ''); // 确保UE加载完成后,放入内容。
  91. return;
  92. }
  93. console.log("初始化---")
  94. this.editor = UE.getEditor("editor" + this.index, this.defConfig); // 初始化UE
  95. },
  96. getUEContent() {
  97. return this.editor.getContent();
  98. },
  99. setContent(content) {
  100. this.editor.ready(() => {
  101. this.editor.setContent(content);
  102. });
  103. },
  104. setInitContent: function() {
  105. this.$nextTick(() => {
  106. });
  107. }
  108. },
  109. destroyed() {
  110. if (this.editor && this.editor.body) {
  111. this.editor.destroy();
  112. console.log("ue des " + this.index);
  113. }
  114. }
  115. };
  116. </script>
  117. <style scoped>
  118. .ue {
  119. color: #676a6c;
  120. }
  121. </style>