1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
| <template>
| <div :id="id" />
| </template>
|
| <script>
| // deps for editor
| import 'codemirror/lib/codemirror.css' // codemirror
| import 'tui-editor/dist/tui-editor.css' // editor ui
| import 'tui-editor/dist/tui-editor-contents.css' // editor content
|
| import Editor from 'tui-editor'
| import defaultOptions from './default-options'
|
| export default {
| name: 'MarkdownEditor',
| props: {
| value: {
| type: String,
| default: ''
| },
| id: {
| type: String,
| required: false,
| default() {
| return 'markdown-editor-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
| }
| },
| options: {
| type: Object,
| default() {
| return defaultOptions
| }
| },
| mode: {
| type: String,
| default: 'markdown'
| },
| height: {
| type: String,
| required: false,
| default: '300px'
| },
| language: {
| type: String,
| required: false,
| default: 'en_US' // https://github.com/nhnent/tui.editor/tree/master/src/js/langs
| }
| },
| data() {
| return {
| editor: null
| }
| },
| computed: {
| editorOptions() {
| const options = Object.assign({}, defaultOptions, this.options)
| options.initialEditType = this.mode
| options.height = this.height
| options.language = this.language
| return options
| }
| },
| watch: {
| value(newValue, preValue) {
| if (newValue !== preValue && newValue !== this.editor.getValue()) {
| this.editor.setValue(newValue)
| }
| },
| language(val) {
| this.destroyEditor()
| this.initEditor()
| },
| height(newValue) {
| this.editor.height(newValue)
| },
| mode(newValue) {
| this.editor.changeMode(newValue)
| }
| },
| mounted() {
| this.initEditor()
| },
| destroyed() {
| this.destroyEditor()
| },
| methods: {
| initEditor() {
| this.editor = new Editor({
| el: document.getElementById(this.id),
| ...this.editorOptions
| })
| if (this.value) {
| this.editor.setValue(this.value)
| }
| this.editor.on('change', () => {
| this.$emit('input', this.editor.getValue())
| })
| },
| destroyEditor() {
| if (!this.editor) return
| this.editor.off('change')
| this.editor.remove()
| },
| setValue(value) {
| this.editor.setValue(value)
| },
| getValue() {
| return this.editor.getValue()
| },
| setHtml(value) {
| this.editor.setHtml(value)
| },
| getHtml() {
| return this.editor.getHtml()
| }
| }
| }
| </script>
|
|
