JEditor.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. <template>
  2. <div class="tinymce-editor">
  3. <editor
  4. v-model="myValue"
  5. :init="init"
  6. :disabled="disabled"
  7. @onClick="onClick">
  8. </editor>
  9. </div>
  10. </template>
  11. <script>
  12. import tinymce from 'tinymce/tinymce'
  13. import Editor from '@tinymce/tinymce-vue'
  14. import 'tinymce/themes/silver/theme'
  15. import 'tinymce/plugins/image'
  16. import 'tinymce/plugins/link'
  17. import 'tinymce/plugins/media'
  18. import 'tinymce/plugins/table'
  19. import 'tinymce/plugins/lists'
  20. import 'tinymce/plugins/contextmenu'
  21. import 'tinymce/plugins/wordcount'
  22. import 'tinymce/plugins/colorpicker'
  23. import 'tinymce/plugins/textcolor'
  24. import 'tinymce/plugins/fullscreen'
  25. import { uploadAction,getFileAccessHttpUrl } from '@/api/manage'
  26. export default {
  27. components: {
  28. Editor
  29. },
  30. props: {
  31. value: {
  32. type: String,
  33. required:false
  34. },
  35. triggerChange:{
  36. type: Boolean,
  37. default: false,
  38. required:false
  39. },
  40. disabled: {
  41. type: Boolean,
  42. default: false
  43. },
  44. plugins: {
  45. type: [String, Array],
  46. default: 'lists image link media table textcolor wordcount contextmenu fullscreen'
  47. },
  48. toolbar: {
  49. type: [String, Array],
  50. default: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists link unlink image media table | removeformat | fullscreen',
  51. branding:false
  52. }
  53. },
  54. data() {
  55. return {
  56. //初始化配置
  57. init: {
  58. language_url: '/tinymce/langs/zh_CN.js',
  59. language: 'zh_CN',
  60. skin_url: '/tinymce/skins/lightgray',
  61. height: 300,
  62. plugins: this.plugins,
  63. toolbar: this.toolbar,
  64. branding: false,
  65. menubar: false,
  66. toolbar_drawer: false,
  67. images_upload_handler: (blobInfo, success) => {
  68. let formData = new FormData()
  69. formData.append('file', blobInfo.blob(), blobInfo.filename());
  70. formData.append('biz', "jeditor");
  71. formData.append("jeditor","1");
  72. uploadAction(window._CONFIG['domianURL']+"/sys/common/upload", formData).then((res) => {
  73. if (res.success) {
  74. if(res.message == 'local'){
  75. const img = 'data:image/jpeg;base64,' + blobInfo.base64()
  76. success(img)
  77. }else{
  78. let img = getFileAccessHttpUrl(res.message)
  79. success(img)
  80. }
  81. }
  82. })
  83. }
  84. },
  85. myValue: this.value
  86. }
  87. },
  88. mounted() {
  89. tinymce.init({})
  90. },
  91. methods: {
  92. onClick(e) {
  93. this.$emit('onClick', e, tinymce)
  94. },
  95. //可以添加一些自己的自定义事件,如清空内容
  96. clear() {
  97. this.myValue = ''
  98. }
  99. },
  100. watch: {
  101. value(newValue) {
  102. this.myValue = (newValue == null ? '' : newValue)
  103. },
  104. myValue(newValue) {
  105. if(this.triggerChange){
  106. this.$emit('change', newValue)
  107. }else{
  108. this.$emit('input', newValue)
  109. }
  110. }
  111. }
  112. }
  113. </script>
  114. <style scoped>
  115. </style>