index.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. <template>
  2. <Editor v-model="contentValue" :init="init" :disabled="disabled" :placeholder="placeholder" @onClick="onClick" />
  3. </template>
  4. <script setup name="Editor">
  5. import Editor from '@tinymce/tinymce-vue'
  6. import tinymce from 'tinymce/tinymce'
  7. import 'tinymce/themes/silver'
  8. import 'tinymce/icons/default'
  9. import 'tinymce/models/dom'
  10. // 引入编辑器插件
  11. import 'tinymce/plugins/code' // 编辑源码
  12. import 'tinymce/plugins/image' // 插入编辑图片
  13. import 'tinymce/plugins/link' // 超链接
  14. import 'tinymce/plugins/preview' // 预览
  15. import 'tinymce/plugins/table' // 表格
  16. import 'tinymce/plugins/lists' // 列表编号
  17. import 'tinymce/plugins/advlist' //高级列表编号
  18. const emit = defineEmits(['update:modelValue', 'onClick'])
  19. const props = defineProps({
  20. modelValue: {
  21. type: String,
  22. default: ''
  23. },
  24. placeholder: {
  25. type: String,
  26. default: ''
  27. },
  28. height: {
  29. type: Number,
  30. default: 300
  31. },
  32. disabled: {
  33. type: Boolean,
  34. default: false
  35. },
  36. plugins: {
  37. type: [String, Array],
  38. default: 'code image link preview table lists advlist'
  39. },
  40. toolbar: {
  41. type: [String, Array],
  42. default:
  43. 'undo redo | forecolor backcolor bold italic underline strikethrough link | blocks fontfamily fontsize | \
  44. alignleft aligncenter alignright alignjustify outdent indent lineheight | bullist numlist | \
  45. image table preview | code selectall'
  46. },
  47. fileUploadFunction: {
  48. type: Function,
  49. default: undefined
  50. }
  51. })
  52. const init = ref({
  53. language_url: '/tinymce/langs/zh_CN.js',
  54. language: 'zh_CN',
  55. skin_url: '/tinymce/skins/ui/oxide',
  56. content_css: '/tinymce/skins/content/default/content.css',
  57. menubar: false,
  58. statusbar: true,
  59. plugins: props.plugins,
  60. toolbar: props.toolbar,
  61. fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px',
  62. height: props.height,
  63. placeholder: props.placeholder,
  64. branding: false,
  65. resize: true,
  66. elementpath: true,
  67. content_style: '',
  68. images_upload_handler(blobInfo, progress) {
  69. return new Promise((resolve, reject) => {
  70. const param = new FormData()
  71. param.append('file', blobInfo.blob(), blobInfo.filename())
  72. props
  73. .fileUploadFunction(param)
  74. .then((data) => {
  75. return resolve(data)
  76. })
  77. .catch((err) => {
  78. return reject('err:' + err)
  79. })
  80. })
  81. },
  82. setup: (editor) => {
  83. editor.on('init', () => {
  84. // getBody().style.fontSize = '14px'
  85. })
  86. }
  87. })
  88. const contentValue = ref()
  89. watch(props, (newValue) => {
  90. contentValue.value = newValue.modelValue
  91. emit('update:modelValue', newValue.modelValue)
  92. })
  93. watch(contentValue, (newValue) => {
  94. emit('update:modelValue', newValue)
  95. })
  96. const onClick = (e) => {
  97. emit('onClick', e, tinymce)
  98. }
  99. onMounted(() => {
  100. tinymce.init({})
  101. })
  102. </script>