@licium/vue-editor 3.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +320 -0
- package/dist/esm/index.js +299 -0
- package/dist/toastui-vue-editor.js +2 -0
- package/dist/toastui-vue-editor.js.LICENSE.txt +6 -0
- package/index.d.ts +28 -0
- package/package.json +40 -0
package/README.md
ADDED
|
@@ -0,0 +1,320 @@
|
|
|
1
|
+
# TOAST UI Editor for Vue
|
|
2
|
+
|
|
3
|
+
> This is [Vue](https://vuejs.org/) component wrapping [TOAST UI Editor](https://github.com/nhn/tui.editor/tree/master/apps/editor).
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@toast-ui/vue-editor)
|
|
6
|
+
|
|
7
|
+
## 🚩 Table of Contents
|
|
8
|
+
|
|
9
|
+
- [Collect Statistics on the Use of Open Source](#collect-statistics-on-the-use-of-open-source)
|
|
10
|
+
- [Install](#-install)
|
|
11
|
+
- [Editor Usage](#-editor-usage)
|
|
12
|
+
- [Viewer Usage](#-viewer-usage)
|
|
13
|
+
|
|
14
|
+
## Collect Statistics on the Use of Open Source
|
|
15
|
+
|
|
16
|
+
Vue Wrapper of TOAST UI Editor applies Google Analytics (GA) to collect statistics on the use of open source, in order to identify how widely TOAST UI Editor is used throughout the world. It also serves as important index to determine the future course of projects. location.hostname (e.g. ui.toast.com) is to be collected and the sole purpose is nothing but to measure statistics on the usage. To disable GA, use the following `usageStatistics` options when declare Vue Wrapper component.
|
|
17
|
+
|
|
18
|
+
```js
|
|
19
|
+
const options = {
|
|
20
|
+
...
|
|
21
|
+
usageStatistics: false
|
|
22
|
+
}
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## 💾 Install
|
|
26
|
+
|
|
27
|
+
### Using npm
|
|
28
|
+
|
|
29
|
+
```sh
|
|
30
|
+
npm install --save @toast-ui/vue-editor
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## 📝 Editor Usage
|
|
34
|
+
|
|
35
|
+
### Import
|
|
36
|
+
|
|
37
|
+
You can use Toast UI Editor for Vue as a ECMAScript module or a CommonJS module. As this module does not contain CSS files, you should import `toastui-editor.css` from `@toast-ui/editor` in the script.
|
|
38
|
+
|
|
39
|
+
- ES Modules
|
|
40
|
+
|
|
41
|
+
```js
|
|
42
|
+
import '@toast-ui/editor/dist/toastui-editor.css';
|
|
43
|
+
|
|
44
|
+
import { Editor } from '@toast-ui/vue-editor';
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
- CommonJS
|
|
48
|
+
|
|
49
|
+
```js
|
|
50
|
+
require('@toast-ui/editor/dist/toastui-editor.css');
|
|
51
|
+
|
|
52
|
+
const { Editor } = require('@toast-ui/vue-editor');
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### Creating Component
|
|
56
|
+
|
|
57
|
+
First implement `<editor/>` in the template.
|
|
58
|
+
|
|
59
|
+
```html
|
|
60
|
+
<template>
|
|
61
|
+
<editor />
|
|
62
|
+
</template>
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
And then add `Editor` to the `components` in your component or Vue instance like this:
|
|
66
|
+
|
|
67
|
+
```js
|
|
68
|
+
import '@toast-ui/editor/dist/toastui-editor.css';
|
|
69
|
+
|
|
70
|
+
import { Editor } from '@toast-ui/vue-editor';
|
|
71
|
+
|
|
72
|
+
export default {
|
|
73
|
+
components: {
|
|
74
|
+
editor: Editor
|
|
75
|
+
}
|
|
76
|
+
};
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
or
|
|
80
|
+
|
|
81
|
+
```js
|
|
82
|
+
import '@toast-ui/editor/dist/toastui-editor.css';
|
|
83
|
+
|
|
84
|
+
import { Editor } from '@toast-ui/vue-editor';
|
|
85
|
+
|
|
86
|
+
new Vue({
|
|
87
|
+
el: '#app',
|
|
88
|
+
components: {
|
|
89
|
+
editor: Editor
|
|
90
|
+
}
|
|
91
|
+
});
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
### Props
|
|
95
|
+
|
|
96
|
+
| Name | Type | Default | Description |
|
|
97
|
+
| --------------- | ------ | -------------------------- | --------------------------------------------------------- |
|
|
98
|
+
| initialValue | String | '' | Editor's initial value . |
|
|
99
|
+
| initialEditType | String | 'markdown' | Initial editor type (markdown, wysiwyg). |
|
|
100
|
+
| options | Object | following `defaultOptions` | Options of tui.editor. This is for initailize tui.editor. |
|
|
101
|
+
| height | String | '300px' | This prop can control the height of the editor. |
|
|
102
|
+
| previewStyle | String | 'vertical' | Markdown editor's preview style (tab, vertical). |
|
|
103
|
+
|
|
104
|
+
```js
|
|
105
|
+
const defaultOptions = {
|
|
106
|
+
minHeight: '200px',
|
|
107
|
+
language: 'en-US',
|
|
108
|
+
useCommandShortcut: true,
|
|
109
|
+
usageStatistics: true,
|
|
110
|
+
hideModeSwitch: false,
|
|
111
|
+
toolbarItems: [
|
|
112
|
+
['heading', 'bold', 'italic', 'strike'],
|
|
113
|
+
['hr', 'quote'],
|
|
114
|
+
['ul', 'ol', 'task', 'indent', 'outdent'],
|
|
115
|
+
['table', 'image', 'link'],
|
|
116
|
+
['code', 'codeblock'],
|
|
117
|
+
['scrollSync'],
|
|
118
|
+
]
|
|
119
|
+
};
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
```html
|
|
123
|
+
<template>
|
|
124
|
+
<editor
|
|
125
|
+
:initialValue="editorText"
|
|
126
|
+
:options="editorOptions"
|
|
127
|
+
height="500px"
|
|
128
|
+
initialEditType="wysiwyg"
|
|
129
|
+
previewStyle="vertical"
|
|
130
|
+
/>
|
|
131
|
+
</template>
|
|
132
|
+
<script>
|
|
133
|
+
import '@toast-ui/editor/dist/toastui-editor.css';
|
|
134
|
+
|
|
135
|
+
import { Editor } from '@toast-ui/vue-editor';
|
|
136
|
+
|
|
137
|
+
export default {
|
|
138
|
+
components: {
|
|
139
|
+
editor: Editor
|
|
140
|
+
},
|
|
141
|
+
data() {
|
|
142
|
+
return {
|
|
143
|
+
editorText: 'This is initialValue.',
|
|
144
|
+
editorOptions: {
|
|
145
|
+
hideModeSwitch: true
|
|
146
|
+
}
|
|
147
|
+
};
|
|
148
|
+
}
|
|
149
|
+
};
|
|
150
|
+
</script>
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
### Instance Methods
|
|
154
|
+
|
|
155
|
+
If you want to more manipulate the Editor, you can use `invoke` method to call the method of toastui.editor. For more information of method, see [instance methods of TOAST UI Editor](https://nhn.github.io/tui.editor/latest/ToastUIEditor#addHook).
|
|
156
|
+
|
|
157
|
+
First, you need to assign `ref` attribute of `<editor/>` and then you can use `invoke` method through `this.$refs` like this:
|
|
158
|
+
|
|
159
|
+
```html
|
|
160
|
+
<template>
|
|
161
|
+
<editor ref="toastuiEditor" />
|
|
162
|
+
</template>
|
|
163
|
+
<script>
|
|
164
|
+
import '@toast-ui/editor/dist/toastui-editor.css';
|
|
165
|
+
|
|
166
|
+
import { Editor } from '@toast-ui/vue-editor';
|
|
167
|
+
|
|
168
|
+
export default {
|
|
169
|
+
components: {
|
|
170
|
+
editor: Editor
|
|
171
|
+
},
|
|
172
|
+
methods: {
|
|
173
|
+
scroll() {
|
|
174
|
+
this.$refs.toastuiEditor.invoke('setScrollTop', 10);
|
|
175
|
+
},
|
|
176
|
+
moveTop() {
|
|
177
|
+
this.$refs.toastuiEditor.invoke('moveCursorToStart');
|
|
178
|
+
},
|
|
179
|
+
getHTML() {
|
|
180
|
+
let html = this.$refs.toastuiEditor.invoke('getHTML');
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
};
|
|
184
|
+
</script>
|
|
185
|
+
```
|
|
186
|
+
|
|
187
|
+
### Events
|
|
188
|
+
|
|
189
|
+
- load : It would be emitted when editor fully load
|
|
190
|
+
- change : It would be emitted when content changed
|
|
191
|
+
- caretChange : It would be emitted when format change by cursor position
|
|
192
|
+
- focus : It would be emitted when editor get focus
|
|
193
|
+
- blur : It would be emitted when editor loose focus
|
|
194
|
+
|
|
195
|
+
```html
|
|
196
|
+
<template>
|
|
197
|
+
<editor
|
|
198
|
+
@load="onEditorLoad"
|
|
199
|
+
@focus="onEditorFocus"
|
|
200
|
+
@blur="onEditorBlur"
|
|
201
|
+
@change="onEditorChange"
|
|
202
|
+
@caretChange="onEditorCaretChange"
|
|
203
|
+
/>
|
|
204
|
+
</template>
|
|
205
|
+
<script>
|
|
206
|
+
import { Editor } from '@toast-ui/vue-editor';
|
|
207
|
+
|
|
208
|
+
export default {
|
|
209
|
+
components: {
|
|
210
|
+
editor: Editor
|
|
211
|
+
},
|
|
212
|
+
methods: {
|
|
213
|
+
onEditorLoad() {
|
|
214
|
+
// implement your code
|
|
215
|
+
},
|
|
216
|
+
onEditorFocus() {
|
|
217
|
+
// implement your code
|
|
218
|
+
},
|
|
219
|
+
onEditorBlur() {
|
|
220
|
+
// implement your code
|
|
221
|
+
},
|
|
222
|
+
onEditorChange() {
|
|
223
|
+
// implement your code
|
|
224
|
+
},
|
|
225
|
+
onEditorCaretChange() {
|
|
226
|
+
// implement your code
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
};
|
|
230
|
+
</script>
|
|
231
|
+
```
|
|
232
|
+
|
|
233
|
+
## 📃 Viewer Usage
|
|
234
|
+
|
|
235
|
+
### Import
|
|
236
|
+
|
|
237
|
+
- ES Modules
|
|
238
|
+
|
|
239
|
+
```js
|
|
240
|
+
import '@toast-ui/editor/dist/toastui-editor-viewer.css';
|
|
241
|
+
|
|
242
|
+
import { Viewer } from '@toast-ui/vue-editor';
|
|
243
|
+
```
|
|
244
|
+
|
|
245
|
+
- CommonJS
|
|
246
|
+
|
|
247
|
+
```js
|
|
248
|
+
require('@toast-ui/editor/dist/toastui-editor-viewer.css');
|
|
249
|
+
|
|
250
|
+
const { Viewer } = require('@toast-ui/vue-editor');
|
|
251
|
+
```
|
|
252
|
+
|
|
253
|
+
### Creating Component
|
|
254
|
+
|
|
255
|
+
First implement `<viewer />` in the template.
|
|
256
|
+
|
|
257
|
+
```html
|
|
258
|
+
<template>
|
|
259
|
+
<viewer />
|
|
260
|
+
</template>
|
|
261
|
+
```
|
|
262
|
+
|
|
263
|
+
And then add `Viewer` to the `components` in your component or Vue instance like this:
|
|
264
|
+
|
|
265
|
+
```js
|
|
266
|
+
import '@toast-ui/editor/dist/toastui-editor-viewer.css';
|
|
267
|
+
|
|
268
|
+
import { Viewer } from '@toast-ui/vue-editor';
|
|
269
|
+
|
|
270
|
+
export default {
|
|
271
|
+
components: {
|
|
272
|
+
viewer: Viewer
|
|
273
|
+
}
|
|
274
|
+
};
|
|
275
|
+
```
|
|
276
|
+
|
|
277
|
+
or
|
|
278
|
+
|
|
279
|
+
```js
|
|
280
|
+
import '@toast-ui/editor/dist/toastui-editor-viewer.css';
|
|
281
|
+
|
|
282
|
+
import { Viewer } from '@toast-ui/vue-editor';
|
|
283
|
+
|
|
284
|
+
new Vue({
|
|
285
|
+
el: '#app',
|
|
286
|
+
components: {
|
|
287
|
+
viewer: Viewer
|
|
288
|
+
}
|
|
289
|
+
});
|
|
290
|
+
```
|
|
291
|
+
|
|
292
|
+
### Props
|
|
293
|
+
|
|
294
|
+
| Name | Type | Default | Description |
|
|
295
|
+
| ------------ | ------ | ------- | ----------------------------------------------- |
|
|
296
|
+
| initialValue | String | '' | Viewer's initial value |
|
|
297
|
+
| height | String | '300px' | This prop can control the height of the viewer. |
|
|
298
|
+
| options | Object | above `defaultOptions` | Options of tui.editor. This is for initailize tui.editor. |
|
|
299
|
+
|
|
300
|
+
```html
|
|
301
|
+
<template>
|
|
302
|
+
<viewer :initialValue="viewerText" height="500px" />
|
|
303
|
+
</template>
|
|
304
|
+
<script>
|
|
305
|
+
import '@toast-ui/editor/dist/toastui-editor-viewer.css';
|
|
306
|
+
|
|
307
|
+
import { Viewer } from '@toast-ui/vue-editor';
|
|
308
|
+
|
|
309
|
+
export default {
|
|
310
|
+
components: {
|
|
311
|
+
viewer: Viewer
|
|
312
|
+
},
|
|
313
|
+
data() {
|
|
314
|
+
return {
|
|
315
|
+
viewerText: '# This is Viewer.\n Hello World.'
|
|
316
|
+
};
|
|
317
|
+
}
|
|
318
|
+
};
|
|
319
|
+
</script>
|
|
320
|
+
```
|
|
@@ -0,0 +1,299 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* TOAST UI Editor : Vue Wrapper
|
|
3
|
+
* @version 3.2.3 | Sun Dec 28 2025
|
|
4
|
+
* @author NHN Cloud FE Development Lab <dl_javascript@nhn.com>
|
|
5
|
+
* @license MIT
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
import Editor from '@toast-ui/editor';
|
|
9
|
+
import Viewer from '@toast-ui/editor/dist/toastui-editor-viewer';
|
|
10
|
+
|
|
11
|
+
/*! *****************************************************************************
|
|
12
|
+
Copyright (c) Microsoft Corporation.
|
|
13
|
+
|
|
14
|
+
Permission to use, copy, modify, and/or distribute this software for any
|
|
15
|
+
purpose with or without fee is hereby granted.
|
|
16
|
+
|
|
17
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
18
|
+
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
19
|
+
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
20
|
+
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
21
|
+
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
22
|
+
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
23
|
+
PERFORMANCE OF THIS SOFTWARE.
|
|
24
|
+
***************************************************************************** */
|
|
25
|
+
var __assign = function () {
|
|
26
|
+
__assign = Object.assign || function __assign(t) {
|
|
27
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
28
|
+
s = arguments[i];
|
|
29
|
+
for (var p in s)
|
|
30
|
+
if (Object.prototype.hasOwnProperty.call(s, p))
|
|
31
|
+
t[p] = s[p];
|
|
32
|
+
}
|
|
33
|
+
return t;
|
|
34
|
+
};
|
|
35
|
+
return __assign.apply(this, arguments);
|
|
36
|
+
};
|
|
37
|
+
function __spreadArray(to, from, pack) {
|
|
38
|
+
if (pack || arguments.length === 2)
|
|
39
|
+
for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
40
|
+
if (ar || !(i in from)) {
|
|
41
|
+
if (!ar)
|
|
42
|
+
ar = Array.prototype.slice.call(from, 0, i);
|
|
43
|
+
ar[i] = from[i];
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
var editorEvents = [
|
|
50
|
+
'load',
|
|
51
|
+
'change',
|
|
52
|
+
'caretChange',
|
|
53
|
+
'focus',
|
|
54
|
+
'blur',
|
|
55
|
+
'keydown',
|
|
56
|
+
'keyup',
|
|
57
|
+
'beforePreviewRender',
|
|
58
|
+
'beforeConvertWysiwygToMarkdown',
|
|
59
|
+
];
|
|
60
|
+
var defaultValueMap = {
|
|
61
|
+
initialEditType: 'markdown',
|
|
62
|
+
initialValue: '',
|
|
63
|
+
height: '300px',
|
|
64
|
+
previewStyle: 'vertical',
|
|
65
|
+
};
|
|
66
|
+
var optionsMixin = {
|
|
67
|
+
data: function () {
|
|
68
|
+
var _this = this;
|
|
69
|
+
var eventOptions = {};
|
|
70
|
+
editorEvents.forEach(function (event) {
|
|
71
|
+
eventOptions[event] = function () {
|
|
72
|
+
var args = [];
|
|
73
|
+
for (var _i = 0; _i < arguments.length; _i++) {
|
|
74
|
+
args[_i] = arguments[_i];
|
|
75
|
+
}
|
|
76
|
+
_this.$emit.apply(_this, __spreadArray([event], args));
|
|
77
|
+
};
|
|
78
|
+
});
|
|
79
|
+
var options = __assign(__assign({}, this.options), { initialEditType: this.initialEditType, initialValue: this.initialValue, height: this.height, previewStyle: this.previewStyle, events: eventOptions });
|
|
80
|
+
Object.keys(defaultValueMap).forEach(function (key) {
|
|
81
|
+
if (!options[key]) {
|
|
82
|
+
options[key] = defaultValueMap[key];
|
|
83
|
+
}
|
|
84
|
+
});
|
|
85
|
+
return { editor: null, computedOptions: options };
|
|
86
|
+
},
|
|
87
|
+
methods: {
|
|
88
|
+
invoke: function (methodName) {
|
|
89
|
+
var _a;
|
|
90
|
+
var args = [];
|
|
91
|
+
for (var _i = 1; _i < arguments.length; _i++) {
|
|
92
|
+
args[_i - 1] = arguments[_i];
|
|
93
|
+
}
|
|
94
|
+
var result = null;
|
|
95
|
+
if (this.editor[methodName]) {
|
|
96
|
+
result = (_a = this.editor)[methodName].apply(_a, args);
|
|
97
|
+
}
|
|
98
|
+
return result;
|
|
99
|
+
},
|
|
100
|
+
},
|
|
101
|
+
destroyed: function () {
|
|
102
|
+
var _this = this;
|
|
103
|
+
editorEvents.forEach(function (event) {
|
|
104
|
+
_this.editor.off(event);
|
|
105
|
+
});
|
|
106
|
+
this.editor.destroy();
|
|
107
|
+
},
|
|
108
|
+
};
|
|
109
|
+
|
|
110
|
+
//
|
|
111
|
+
var script$1 = {
|
|
112
|
+
name: 'ToastuiEditor',
|
|
113
|
+
mixins: [optionsMixin],
|
|
114
|
+
props: {
|
|
115
|
+
previewStyle: {
|
|
116
|
+
type: String,
|
|
117
|
+
},
|
|
118
|
+
height: {
|
|
119
|
+
type: String,
|
|
120
|
+
},
|
|
121
|
+
initialEditType: {
|
|
122
|
+
type: String,
|
|
123
|
+
},
|
|
124
|
+
initialValue: {
|
|
125
|
+
type: String,
|
|
126
|
+
},
|
|
127
|
+
options: {
|
|
128
|
+
type: Object,
|
|
129
|
+
},
|
|
130
|
+
},
|
|
131
|
+
watch: {
|
|
132
|
+
previewStyle: function (newValue) {
|
|
133
|
+
this.editor.changePreviewStyle(newValue);
|
|
134
|
+
},
|
|
135
|
+
height: function (newValue) {
|
|
136
|
+
this.editor.height(newValue);
|
|
137
|
+
},
|
|
138
|
+
},
|
|
139
|
+
mounted: function () {
|
|
140
|
+
var options = __assign(__assign({}, this.computedOptions), { el: this.$refs.toastuiEditor });
|
|
141
|
+
this.editor = new Editor(options);
|
|
142
|
+
},
|
|
143
|
+
methods: {
|
|
144
|
+
getRootElement: function () {
|
|
145
|
+
return this.$refs.toastuiEditor;
|
|
146
|
+
},
|
|
147
|
+
},
|
|
148
|
+
};
|
|
149
|
+
|
|
150
|
+
function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
|
|
151
|
+
if (typeof shadowMode !== 'boolean') {
|
|
152
|
+
createInjectorSSR = createInjector;
|
|
153
|
+
createInjector = shadowMode;
|
|
154
|
+
shadowMode = false;
|
|
155
|
+
}
|
|
156
|
+
// Vue.extend constructor export interop.
|
|
157
|
+
var options = typeof script === 'function' ? script.options : script;
|
|
158
|
+
// render functions
|
|
159
|
+
if (template && template.render) {
|
|
160
|
+
options.render = template.render;
|
|
161
|
+
options.staticRenderFns = template.staticRenderFns;
|
|
162
|
+
options._compiled = true;
|
|
163
|
+
// functional template
|
|
164
|
+
if (isFunctionalTemplate) {
|
|
165
|
+
options.functional = true;
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
// scopedId
|
|
169
|
+
if (scopeId) {
|
|
170
|
+
options._scopeId = scopeId;
|
|
171
|
+
}
|
|
172
|
+
var hook;
|
|
173
|
+
if (moduleIdentifier) {
|
|
174
|
+
// server build
|
|
175
|
+
hook = function (context) {
|
|
176
|
+
// 2.3 injection
|
|
177
|
+
context =
|
|
178
|
+
context || // cached call
|
|
179
|
+
(this.$vnode && this.$vnode.ssrContext) || // stateful
|
|
180
|
+
(this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
|
|
181
|
+
// 2.2 with runInNewContext: true
|
|
182
|
+
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
|
|
183
|
+
context = __VUE_SSR_CONTEXT__;
|
|
184
|
+
}
|
|
185
|
+
// inject component styles
|
|
186
|
+
if (style) {
|
|
187
|
+
style.call(this, createInjectorSSR(context));
|
|
188
|
+
}
|
|
189
|
+
// register component module identifier for async chunk inference
|
|
190
|
+
if (context && context._registeredComponents) {
|
|
191
|
+
context._registeredComponents.add(moduleIdentifier);
|
|
192
|
+
}
|
|
193
|
+
};
|
|
194
|
+
// used by ssr in case component is cached and beforeCreate
|
|
195
|
+
// never gets called
|
|
196
|
+
options._ssrRegister = hook;
|
|
197
|
+
}
|
|
198
|
+
else if (style) {
|
|
199
|
+
hook = shadowMode
|
|
200
|
+
? function (context) {
|
|
201
|
+
style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
|
|
202
|
+
}
|
|
203
|
+
: function (context) {
|
|
204
|
+
style.call(this, createInjector(context));
|
|
205
|
+
};
|
|
206
|
+
}
|
|
207
|
+
if (hook) {
|
|
208
|
+
if (options.functional) {
|
|
209
|
+
// register for functional component in vue file
|
|
210
|
+
var originalRender_1 = options.render;
|
|
211
|
+
options.render = function renderWithStyleInjection(h, context) {
|
|
212
|
+
hook.call(context);
|
|
213
|
+
return originalRender_1(h, context);
|
|
214
|
+
};
|
|
215
|
+
}
|
|
216
|
+
else {
|
|
217
|
+
// inject component registration as beforeCreate hook
|
|
218
|
+
var existing = options.beforeCreate;
|
|
219
|
+
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
return script;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
/* script */
|
|
226
|
+
var __vue_script__$1 = script$1;
|
|
227
|
+
/* template */
|
|
228
|
+
var __vue_render__$1 = function () {
|
|
229
|
+
var _vm = this;
|
|
230
|
+
var _h = _vm.$createElement;
|
|
231
|
+
var _c = _vm._self._c || _h;
|
|
232
|
+
return _c("div", { ref: "toastuiEditor" });
|
|
233
|
+
};
|
|
234
|
+
var __vue_staticRenderFns__$1 = [];
|
|
235
|
+
__vue_render__$1._withStripped = true;
|
|
236
|
+
/* style */
|
|
237
|
+
var __vue_inject_styles__$1 = undefined;
|
|
238
|
+
/* scoped */
|
|
239
|
+
var __vue_scope_id__$1 = undefined;
|
|
240
|
+
/* module identifier */
|
|
241
|
+
var __vue_module_identifier__$1 = undefined;
|
|
242
|
+
/* functional template */
|
|
243
|
+
var __vue_is_functional_template__$1 = false;
|
|
244
|
+
/* style inject */
|
|
245
|
+
/* style inject SSR */
|
|
246
|
+
/* style inject shadow dom */
|
|
247
|
+
var __vue_component__$1 = /*#__PURE__*/ normalizeComponent({ render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 }, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, undefined, undefined, undefined);
|
|
248
|
+
|
|
249
|
+
//
|
|
250
|
+
var script = {
|
|
251
|
+
name: 'ToastuiEditorViewer',
|
|
252
|
+
mixins: [optionsMixin],
|
|
253
|
+
props: {
|
|
254
|
+
height: {
|
|
255
|
+
type: String,
|
|
256
|
+
},
|
|
257
|
+
initialValue: {
|
|
258
|
+
type: String,
|
|
259
|
+
},
|
|
260
|
+
options: {
|
|
261
|
+
type: Object,
|
|
262
|
+
},
|
|
263
|
+
},
|
|
264
|
+
mounted: function () {
|
|
265
|
+
var options = __assign(__assign({}, this.computedOptions), { el: this.$refs.toastuiEditorViewer });
|
|
266
|
+
this.editor = new Viewer(options);
|
|
267
|
+
},
|
|
268
|
+
methods: {
|
|
269
|
+
getRootElement: function () {
|
|
270
|
+
return this.$refs.toastuiEditorViewer;
|
|
271
|
+
},
|
|
272
|
+
},
|
|
273
|
+
};
|
|
274
|
+
|
|
275
|
+
/* script */
|
|
276
|
+
var __vue_script__ = script;
|
|
277
|
+
/* template */
|
|
278
|
+
var __vue_render__ = function () {
|
|
279
|
+
var _vm = this;
|
|
280
|
+
var _h = _vm.$createElement;
|
|
281
|
+
var _c = _vm._self._c || _h;
|
|
282
|
+
return _c("div", { ref: "toastuiEditorViewer" });
|
|
283
|
+
};
|
|
284
|
+
var __vue_staticRenderFns__ = [];
|
|
285
|
+
__vue_render__._withStripped = true;
|
|
286
|
+
/* style */
|
|
287
|
+
var __vue_inject_styles__ = undefined;
|
|
288
|
+
/* scoped */
|
|
289
|
+
var __vue_scope_id__ = undefined;
|
|
290
|
+
/* module identifier */
|
|
291
|
+
var __vue_module_identifier__ = undefined;
|
|
292
|
+
/* functional template */
|
|
293
|
+
var __vue_is_functional_template__ = false;
|
|
294
|
+
/* style inject */
|
|
295
|
+
/* style inject SSR */
|
|
296
|
+
/* style inject shadow dom */
|
|
297
|
+
var __vue_component__ = /*#__PURE__*/ normalizeComponent({ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ }, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
|
|
298
|
+
|
|
299
|
+
export { __vue_component__$1 as Editor, __vue_component__ as Viewer };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
/*! For license information please see toastui-vue-editor.js.LICENSE.txt */
|
|
2
|
+
!function(){"use strict";var t={n:function(e){var i=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(i,{a:i}),i},d:function(e,i){for(var r in i)t.o(i,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:i[r]})},o:function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r:function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{Editor:function(){return p},Viewer:function(){return g}});var i=function(){var t=this.$createElement;return(this._self._c||t)("div",{ref:"toastuiEditor"})};i._withStripped=!0;var r=function(){return r=Object.assign||function(t){for(var e,i=1,r=arguments.length;i<r;i++)for(var n in e=arguments[i])Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t},r.apply(this,arguments)};function n(t,e,i){if(i||2===arguments.length)for(var r,n=0,o=e.length;n<o;n++)!r&&n in e||(r||(r=Array.prototype.slice.call(e,0,n)),r[n]=e[n]);return t.concat(r||Array.prototype.slice.call(e))}Object.create,Object.create;var o=require("@toast-ui/editor"),a=t.n(o),s=["load","change","caretChange","focus","blur","keydown","keyup","beforePreviewRender","beforeConvertWysiwygToMarkdown"],u={initialEditType:"markdown",initialValue:"",height:"300px",previewStyle:"vertical"},l={data:function(){var t=this,e={};s.forEach((function(i){e[i]=function(){for(var e=[],r=0;r<arguments.length;r++)e[r]=arguments[r];t.$emit.apply(t,n([i],e))}}));var i=r(r({},this.options),{initialEditType:this.initialEditType,initialValue:this.initialValue,height:this.height,previewStyle:this.previewStyle,events:e});return Object.keys(u).forEach((function(t){i[t]||(i[t]=u[t])})),{editor:null,computedOptions:i}},methods:{invoke:function(t){for(var e,i=[],r=1;r<arguments.length;r++)i[r-1]=arguments[r];var n=null;return this.editor[t]&&(n=(e=this.editor)[t].apply(e,i)),n}},destroyed:function(){var t=this;s.forEach((function(e){t.editor.off(e)})),this.editor.destroy()}};function c(t,e,i,r,n,o,a,s){var u,l="function"==typeof t?t.options:t;if(e&&(l.render=e,l.staticRenderFns=i,l._compiled=!0),r&&(l.functional=!0),o&&(l._scopeId="data-v-"+o),a?(u=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),n&&n.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},l._ssrRegister=u):n&&(u=s?function(){n.call(this,(l.functional?this.parent:this).$root.$options.shadowRoot)}:n),u)if(l.functional){l._injectStyles=u;var c=l.render;l.render=function(t,e){return u.call(e),c(t,e)}}else{var d=l.beforeCreate;l.beforeCreate=d?[].concat(d,u):[u]}return{exports:t,options:l}}var d=c({name:"ToastuiEditor",mixins:[l],props:{previewStyle:{type:String},height:{type:String},initialEditType:{type:String},initialValue:{type:String},options:{type:Object}},watch:{previewStyle:function(t){this.editor.changePreviewStyle(t)},height:function(t){this.editor.height(t)}},mounted:function(){var t=r(r({},this.computedOptions),{el:this.$refs.toastuiEditor});this.editor=new(a())(t)},methods:{getRootElement:function(){return this.$refs.toastuiEditor}}},i,[],!1,null,null,null);d.options.__file="src/Editor.vue";var p=d.exports,f=function(){var t=this.$createElement;return(this._self._c||t)("div",{ref:"toastuiEditorViewer"})};f._withStripped=!0;var h=require("@toast-ui/editor/dist/toastui-editor-viewer"),v=t.n(h),y=c({name:"ToastuiEditorViewer",mixins:[l],props:{height:{type:String},initialValue:{type:String},options:{type:Object}},mounted:function(){var t=r(r({},this.computedOptions),{el:this.$refs.toastuiEditorViewer});this.editor=new(v())(t)},methods:{getRootElement:function(){return this.$refs.toastuiEditorViewer}}},f,[],!1,null,null,null);y.options.__file="src/Viewer.vue";var g=y.exports;module.exports=e}();
|
package/index.d.ts
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import Vue from 'vue';
|
|
2
|
+
import ToastuiEditor from '@licium/editor';
|
|
3
|
+
import ToastuiEditorViewer from '@licium/editor/dist/toastui-editor-viewer';
|
|
4
|
+
|
|
5
|
+
type FunctionKeys<T extends object> = {
|
|
6
|
+
[K in keyof T]: T[K] extends Function ? K : never;
|
|
7
|
+
}[keyof T];
|
|
8
|
+
|
|
9
|
+
type EditorFnKeys = FunctionKeys<ToastuiEditor>;
|
|
10
|
+
type ViewerFnKeys = FunctionKeys<ToastuiEditorViewer>;
|
|
11
|
+
|
|
12
|
+
export class Editor extends Vue {
|
|
13
|
+
invoke<T extends EditorFnKeys>(
|
|
14
|
+
fname: T,
|
|
15
|
+
...args: Parameters<ToastuiEditor[T]>
|
|
16
|
+
): ReturnType<ToastuiEditor[T]>;
|
|
17
|
+
|
|
18
|
+
getRootElement(): HTMLElement;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export class Viewer extends Vue {
|
|
22
|
+
invoke<T extends ViewerFnKeys>(
|
|
23
|
+
fname: T,
|
|
24
|
+
...args: Parameters<ToastuiEditorViewer[T]>
|
|
25
|
+
): ReturnType<ToastuiEditorViewer[T]>;
|
|
26
|
+
|
|
27
|
+
getRootElement(): HTMLElement;
|
|
28
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@licium/vue-editor",
|
|
3
|
+
"version": "3.2.3",
|
|
4
|
+
"description": "TOAST UI Editor for Vue",
|
|
5
|
+
"main": "dist/toastui-vue-editor.js",
|
|
6
|
+
"module": "dist/esm/index.js",
|
|
7
|
+
"files": [
|
|
8
|
+
"dist",
|
|
9
|
+
"index.d.ts"
|
|
10
|
+
],
|
|
11
|
+
"scripts": {
|
|
12
|
+
"lint": "eslint .",
|
|
13
|
+
"serve": "snowpack dev",
|
|
14
|
+
"build": "webpack build && rollup -c"
|
|
15
|
+
},
|
|
16
|
+
"homepage": "https://ui.toast.com",
|
|
17
|
+
"bugs": {
|
|
18
|
+
"url": "https://github.com/nhn/tui.editor/issues"
|
|
19
|
+
},
|
|
20
|
+
"author": "NHN Cloud FE Development Lab <dl_javascript@nhn.com>",
|
|
21
|
+
"repository": {
|
|
22
|
+
"type": "git",
|
|
23
|
+
"url": "https://github.com/nhn/tui.editor.git",
|
|
24
|
+
"directory": "apps/vue-editor"
|
|
25
|
+
},
|
|
26
|
+
"license": "MIT",
|
|
27
|
+
"devDependencies": {
|
|
28
|
+
"@morgul/snowpack-plugin-vue2": "^0.4.0",
|
|
29
|
+
"vue": "^2.5.0",
|
|
30
|
+
"vue-loader": "^15.9.8",
|
|
31
|
+
"vue-template-compiler": "^2.6.12"
|
|
32
|
+
},
|
|
33
|
+
"peerDependencies": {
|
|
34
|
+
"vue": "^2.5.0"
|
|
35
|
+
},
|
|
36
|
+
"dependencies": {
|
|
37
|
+
"@licium/editor": "^3.2.2"
|
|
38
|
+
},
|
|
39
|
+
"gitHead": "cbc7cab7b3f081a1aaf1d338b8138512ace132b9"
|
|
40
|
+
}
|