admin-editor.vue 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <template lang='pug'>
  2. v-card(tile, :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"')
  3. .pa-3.pt-4
  4. .headline.primary--text Editor
  5. .subheading.grey--text Configure the content editor
  6. v-tabs(:color='$vuetify.dark ? "primary" : "grey lighten-4"', fixed-tabs, :slider-color='$vuetify.dark ? "white" : "primary"', show-arrows)
  7. v-tab(key='settings'): v-icon settings
  8. v-tab(key='code') Markdown
  9. v-tab-item(key='settings', :transition='false', :reverse-transition='false')
  10. v-card.pa-3(flat, tile)
  11. .body-2.grey--text.text--darken-1 Select which editors to enable:
  12. .caption.grey--text.pb-2 Some editors require additional configuration in their dedicated tab (when selected).
  13. v-form
  14. v-radio-group(v-model='selectedEditor')
  15. v-radio(v-for='(editor, n) in editors', :key='n', :label='editor.text', :value='editor.value', color='primary')
  16. v-tab-item(key='code', :transition='false', :reverse-transition='false')
  17. v-card.pa-3(flat, tile)
  18. v-form
  19. v-subheader Editor Configuration
  20. .body-1.ml-3 This editor has no configuration options you can modify.
  21. v-card-chin
  22. v-btn(color='primary', @click='save')
  23. v-icon(left) chevron_right
  24. span Apply Configuration
  25. v-spacer
  26. v-btn(icon, @click='refresh')
  27. v-icon.grey--text refresh
  28. </template>
  29. <script>
  30. export default {
  31. data() {
  32. return {
  33. editors: [
  34. { text: 'Markdown (default)', value: 'code' }
  35. ],
  36. selectedEditor: 'code'
  37. }
  38. },
  39. methods: {
  40. save() {},
  41. refresh() {}
  42. }
  43. }
  44. </script>
  45. <style lang='scss'>
  46. </style>