@techie_doubts/editor-plugin-chart 3.0.1
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 +217 -0
- package/dist/td-editor-plugin-chart.js +6880 -0
- package/dist/toastui-editor-plugin-chart.js +6880 -0
- package/package.json +55 -0
- package/types/index.d.ts +12 -0
package/README.md
ADDED
|
@@ -0,0 +1,217 @@
|
|
|
1
|
+
# TOAST UI Editor : Chart Plugin
|
|
2
|
+
|
|
3
|
+
> This is a plugin of [TOAST UI Editor](https://github.com/nhn/tui.editor/tree/master/apps/editor) to render chart.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@techie_doubts/editor-plugin-chart)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
## 🚩 Table of Contents
|
|
10
|
+
|
|
11
|
+
- [Bundle File Structure](#-bundle-file-structure)
|
|
12
|
+
- [Usage npm](#-usage-npm)
|
|
13
|
+
- [Usage CDN](#-usage-cdn)
|
|
14
|
+
|
|
15
|
+
## 📁 Bundle File Structure
|
|
16
|
+
|
|
17
|
+
### Files Distributed on npm
|
|
18
|
+
|
|
19
|
+
```
|
|
20
|
+
- node_modules/
|
|
21
|
+
- @techie_doubts/
|
|
22
|
+
- editor-plugin-chart/
|
|
23
|
+
- dist/
|
|
24
|
+
- td-editor-plugin-chart.js
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
### Files Distributed on CDN
|
|
28
|
+
|
|
29
|
+
The bundle files include all dependencies of this plugin.
|
|
30
|
+
|
|
31
|
+
```
|
|
32
|
+
- uicdn.toast.com/
|
|
33
|
+
- editor-plugin-chart/
|
|
34
|
+
- latest/
|
|
35
|
+
- td-editor-plugin-chart.js
|
|
36
|
+
- td-editor-plugin-chart.min.js
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## 📦 Usage npm
|
|
40
|
+
|
|
41
|
+
To use the plugin, [`@techie_doubts/tui.editor.2026`](https://github.com/nhn/tui.editor/tree/master/apps/editor) must be installed.
|
|
42
|
+
|
|
43
|
+
> Ref. [Getting Started](https://github.com/nhn/tui.editor/blob/master/docs/en/getting-started.md)
|
|
44
|
+
|
|
45
|
+
### Install
|
|
46
|
+
|
|
47
|
+
```sh
|
|
48
|
+
$ npm install @techie_doubts/editor-plugin-chart
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
### Import Plugin
|
|
52
|
+
|
|
53
|
+
Along with the plugin, the plugin's dependency style must be imported. The `chart` plugin has [TOAST UI Chart](https://github.com/nhn/tui.chart) as a dependency, and you need to add a CSS file of TOAST UI Chart.
|
|
54
|
+
|
|
55
|
+
#### ES Modules
|
|
56
|
+
|
|
57
|
+
```js
|
|
58
|
+
import '@techie_doubts/tui.chart.2026/dist/toastui-chart.css';
|
|
59
|
+
|
|
60
|
+
import chart from '@techie_doubts/editor-plugin-chart';
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
#### CommonJS
|
|
64
|
+
|
|
65
|
+
```js
|
|
66
|
+
require('@techie_doubts/tui.chart.2026/dist/toastui-chart.css');
|
|
67
|
+
|
|
68
|
+
const chart = require('@techie_doubts/editor-plugin-chart');
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
### Create Instance
|
|
72
|
+
|
|
73
|
+
#### Basic
|
|
74
|
+
|
|
75
|
+
```js
|
|
76
|
+
// ...
|
|
77
|
+
import '@techie_doubts/tui.chart.2026/dist/toastui-chart.css';
|
|
78
|
+
|
|
79
|
+
import Editor from '@techie_doubts/tui.editor.2026';
|
|
80
|
+
import chart from '@techie_doubts/editor-plugin-chart';
|
|
81
|
+
|
|
82
|
+
const editor = new Editor({
|
|
83
|
+
// ...
|
|
84
|
+
plugins: [chart]
|
|
85
|
+
});
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
#### With Viewer
|
|
89
|
+
|
|
90
|
+
```js
|
|
91
|
+
// ...
|
|
92
|
+
import '@techie_doubts/tui.chart.2026/dist/toastui-chart.css';
|
|
93
|
+
|
|
94
|
+
import Viewer from '@techie_doubts/tui.editor.2026/dist/td-editor-viewer';
|
|
95
|
+
import chart from '@techie_doubts/editor-plugin-chart';
|
|
96
|
+
|
|
97
|
+
const viewer = new Viewer({
|
|
98
|
+
// ...
|
|
99
|
+
plugins: [chart]
|
|
100
|
+
});
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
or
|
|
104
|
+
|
|
105
|
+
```js
|
|
106
|
+
// ...
|
|
107
|
+
import '@techie_doubts/tui.chart.2026/dist/toastui-chart.css';
|
|
108
|
+
|
|
109
|
+
import Editor from '@techie_doubts/tui.editor.2026';
|
|
110
|
+
import chart from '@techie_doubts/editor-plugin-chart';
|
|
111
|
+
|
|
112
|
+
const viewer = Editor.factory({
|
|
113
|
+
// ...
|
|
114
|
+
plugins: [chart],
|
|
115
|
+
viewer: true
|
|
116
|
+
});
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
## 🗂 Usage CDN
|
|
120
|
+
|
|
121
|
+
To use the plugin, the CDN files(CSS, Script) of `@techie_doubts/tui.editor.2026` must be included.
|
|
122
|
+
|
|
123
|
+
### Include Files
|
|
124
|
+
|
|
125
|
+
```html
|
|
126
|
+
...
|
|
127
|
+
<head>
|
|
128
|
+
...
|
|
129
|
+
<link rel="stylesheet" href="https://uicdn.toast.com/chart/latest/toastui-chart.min.css" />
|
|
130
|
+
...
|
|
131
|
+
</head>
|
|
132
|
+
<body>
|
|
133
|
+
...
|
|
134
|
+
<!-- Chart -->
|
|
135
|
+
<script src="https://uicdn.toast.com/chart/latest/toastui-chart.min.js"></script>
|
|
136
|
+
<!-- Editor -->
|
|
137
|
+
<script src="https://uicdn.toast.com/editor/latest/td-editor-all.min.js"></script>
|
|
138
|
+
<!-- Editor's Plugin -->
|
|
139
|
+
<script src="https://uicdn.toast.com/editor-plugin-chart/latest/td-editor-plugin-chart.min.js"></script>
|
|
140
|
+
...
|
|
141
|
+
</body>
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
### Create Instance
|
|
145
|
+
|
|
146
|
+
#### Basic
|
|
147
|
+
|
|
148
|
+
```js
|
|
149
|
+
const { Editor } = toastui;
|
|
150
|
+
const { chart } = Editor.plugin;
|
|
151
|
+
|
|
152
|
+
const editor = new Editor({
|
|
153
|
+
// ...
|
|
154
|
+
plugins: [chart]
|
|
155
|
+
});
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
#### With Viewer
|
|
159
|
+
|
|
160
|
+
```js
|
|
161
|
+
const Viewer = toastui.Editor;
|
|
162
|
+
const { chart } = Viewer.plugin;
|
|
163
|
+
|
|
164
|
+
const viewer = new Viewer({
|
|
165
|
+
// ...
|
|
166
|
+
plugins: [chart]
|
|
167
|
+
});
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
or
|
|
171
|
+
|
|
172
|
+
```js
|
|
173
|
+
const { Editor } = toastui;
|
|
174
|
+
const { chart } = Editor.plugin;
|
|
175
|
+
|
|
176
|
+
const viewer = Editor.factory({
|
|
177
|
+
// ...
|
|
178
|
+
plugins: [chart],
|
|
179
|
+
viewer: true
|
|
180
|
+
});
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
### [Optional] Use Plugin with Options
|
|
184
|
+
|
|
185
|
+
The `chart` plugin can set options when used. Just add the plugin function and options related to the plugin to the array(`[pluginFn, pluginOptions]`) and push them to the `plugins` option of the editor.
|
|
186
|
+
|
|
187
|
+
The following options are available in the `chart` plugin.
|
|
188
|
+
These options are used to set the dimensions of the chart drawn in the editor.
|
|
189
|
+
|
|
190
|
+
| Name | Type | Default Value | Description |
|
|
191
|
+
| ----------- | ---------------- | ------------- | -------------------- |
|
|
192
|
+
| `width` | `number\|string` | `'auto'` | Default width value |
|
|
193
|
+
| `height` | `number\|string` | `'auto'` | Default height value |
|
|
194
|
+
| `minWidth` | `number` | `0` | Minimum width value |
|
|
195
|
+
| `minHeight` | `number` | `0` | Minimum height value |
|
|
196
|
+
| `maxWidth` | `number` | `Infinity` | Maximum width value |
|
|
197
|
+
| `maxHeight` | `number` | `Infinity` | Maximum height value |
|
|
198
|
+
|
|
199
|
+
```js
|
|
200
|
+
// ...
|
|
201
|
+
import '@techie_doubts/tui.chart.2026/dist/toastui-chart.css';
|
|
202
|
+
|
|
203
|
+
import Editor from '@techie_doubts/tui.editor.2026';
|
|
204
|
+
import chart from '@techie_doubts/editor-plugin-chart';
|
|
205
|
+
|
|
206
|
+
const chartOptions = {
|
|
207
|
+
minWidth: 100,
|
|
208
|
+
maxWidth: 600,
|
|
209
|
+
minHeight: 100,
|
|
210
|
+
maxHeight: 300
|
|
211
|
+
};
|
|
212
|
+
|
|
213
|
+
const editor = new Editor({
|
|
214
|
+
// ...
|
|
215
|
+
plugins: [[chart, chartOptions]]
|
|
216
|
+
});
|
|
217
|
+
```
|