index.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. import polyfill from './polyfill-ie'
  2. import buildInModules from './modules/index'
  3. import editor from './editor'
  4. import i18nZhCn from './i18n/zh-cn'
  5. import i18nEnUs from './i18n/en-us'
  6. import mixin from './util/mixin'
  7. polyfill()
  8. /**
  9. * Vue html5 Editor
  10. * @param Vue {Vue}
  11. * @param options {Object}
  12. */
  13. class VueHtml5Editor {
  14. /**
  15. * build an editor component
  16. */
  17. constructor(options = {}) {
  18. let modules = [...buildInModules]
  19. const components = {}
  20. // extended modules
  21. if (Array.isArray(options.modules)) {
  22. options.modules.forEach((module) => {
  23. if (module.name) {
  24. modules.push(module)
  25. }
  26. })
  27. }
  28. // hidden modules
  29. if (Array.isArray(options.hiddenModules)) {
  30. modules = (() => {
  31. const arr = []
  32. modules.forEach((m) => {
  33. if (!options.hiddenModules.includes(m.name)) {
  34. arr.push(m)
  35. }
  36. })
  37. return arr
  38. })()
  39. }
  40. // visible modules
  41. if (Array.isArray(options.visibleModules)) {
  42. modules = (() => {
  43. const arr = []
  44. options.visibleModules.forEach((name) => {
  45. modules.forEach((module) => {
  46. if (module.name === name) {
  47. arr.push(module)
  48. }
  49. })
  50. })
  51. return arr
  52. })()
  53. }
  54. modules.forEach((module) => {
  55. // specify the config for each module in options by name
  56. const config = options[module.name]
  57. module.config = mixin(module.config, config)
  58. if (module.dashboard) {
  59. // $options.module
  60. module.dashboard.module = module
  61. components[`dashboard-${module.name}`] = module.dashboard
  62. }
  63. if (options.icons && options.icons[module.name]) {
  64. module.icon = options.icons[module.name]
  65. }
  66. module.hasDashboard = !!module.dashboard
  67. // prevent vue sync
  68. module.dashboard = null
  69. })
  70. // i18n
  71. const i18n = {'zh-cn': i18nZhCn, 'en-us': i18nEnUs}
  72. const customI18n = options.i18n || {}
  73. Object.keys(customI18n).forEach((key) => {
  74. i18n[key] = i18n[key] ? mixin(i18n[key], customI18n[key]) : customI18n[key]
  75. })
  76. const language = options.language || 'en-us'
  77. const locale = i18n[language]
  78. // showModuleName
  79. const defaultShowModuleName = !!options.showModuleName
  80. // ######################################
  81. const compo = mixin(editor, {
  82. data() {
  83. return {modules, locale, defaultShowModuleName}
  84. },
  85. components
  86. })
  87. mixin(this, compo)
  88. }
  89. /**
  90. * global install
  91. *
  92. * @param Vue
  93. * @param options
  94. */
  95. static install(Vue, options = {}) {
  96. Vue.component(options.name || 'vue-html5-editor', new VueHtml5Editor(options))
  97. }
  98. }
  99. export default VueHtml5Editor