You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

64 lines
1.3 KiB

3 years ago
3 years ago
  1. <template>
  2. <editor
  3. ref="toastuiEditor"
  4. :initial-value="project.guideline"
  5. :options="editorOptions"
  6. preview-style="vertical"
  7. height="inherit"
  8. @change="updateProject"
  9. />
  10. </template>
  11. <script>
  12. import _ from 'lodash'
  13. import 'tui-editor/dist/tui-editor.css'
  14. import 'tui-editor/dist/tui-editor-contents.css'
  15. import 'codemirror/lib/codemirror.css'
  16. import { Editor } from '@toast-ui/vue-editor'
  17. import '@/assets/style/editor.css'
  18. export default {
  19. components: {
  20. Editor
  21. },
  22. layout: 'project',
  23. validate({ params }) {
  24. return /^\d+$/.test(params.id)
  25. },
  26. data() {
  27. return {
  28. editorOptions: {
  29. language: this.$t('toastui.localeCode')
  30. },
  31. project: {},
  32. mounted: false,
  33. }
  34. },
  35. async mounted() {
  36. const projectId = this.$route.params.id
  37. this.project = await this.$services.project.findById(projectId)
  38. this.$refs.toastuiEditor.invoke('setMarkdown', this.project.guideline)
  39. this.mounted = true
  40. },
  41. methods: {
  42. updateProject: _.debounce(function() {
  43. if (this.mounted) {
  44. this.project.guideline = this.$refs.toastuiEditor.invoke('getMarkdown')
  45. this.$services.project.update(this.project)
  46. }
  47. }, 1000)
  48. }
  49. }
  50. </script>
  51. <style>
  52. .te-md-container .CodeMirror, .tui-editor-contents {
  53. font-size: 20px;
  54. }
  55. </style>