# tui-editor
TuiEditor (opens new window) 组件基于 tui-editor 封装，是一款 Markdown 编辑器；tui-editor 官网 (opens new window)，GitHub (opens new window)。
# Editor
# Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| value | String | " " | 编辑器的内容. 如果使用 v-model, 不要使用它. |
| id | String | 'tui-editor-' + +new Date() + Math.floor(Math.random() * 1000); | 编辑器的ID |
| options | Object | defaultOptions | tui.editor 的配置. |
| height | String | '300px' | 编辑器的高度. |
| mode | String | 'markdown' | 编辑器的模式. (markdownor wysiwyg) |
| language | String | 'zh-CN' | 语言(en_US or zh-CN) ,如果需要其他语言，请自己扩充 |
| placeholder | String | '请输入内容' | 编辑器的 placeholder |
| imgUpload | [Function, String] | null | 自定义上传图片，1、如果是 String 请填写上传的url地址；2、如果是 Function 自定义上传 function(fileOrBlob,callback)；3、其他(不设置) base64。文档 |
const defaultOptions = {
minHeight: '200px',
previewStyle: 'vertical',
useCommandShortcut: true,
useDefaultHTMLSanitizer: true,
usageStatistics: false,
hideModeSwitch: false,
toolbarItems: [
'heading',
'bold',
'italic',
'strike',
'divider',
'hr',
'quote',
'divider',
'ul',
'ol',
'task',
'indent',
'outdent',
'divider',
'table',
'image',
'link',
'divider',
'code',
'codeblock'
]
}
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
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
# Methods
| 名称 | 说明 | 参数 |
|---|---|---|
| setLanguage | 设置新的语言 | （ name: 语言名, Obj: 内容 ）样例 (opens new window) |
| setValue | 设置编辑器内容 | （ value: 编辑器内容 Markdown 类型 ） |
| getValue | 获取编辑器内容 Markdown 类型 | - |
| setHtml | 设置编辑器html内容 | （ value: 编辑器内容 html 类型 ） |
| getHtml | 获取编辑器html内容 | - |
# Viewer
# Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| value | String | " " | 显示的内容. 如果使用 v-model, 不要使用它. |
| id | String | 'tui-editor-viewer' + +new Date() + Math.floor(Math.random() * 1000); | 查看器的ID |
# Methods
| 名称 | 说明 | 参数 |
|---|---|---|
| setValue | 设置查看器内容 | （ value: 查看器内容 Markdown 类型 ） |
| getHtml | 获取查看器html内容 | - |
# 上传图片
# Base64
编辑器默认上传图片转为 Base64 ，例如，如下：
1
2
3
2
3
# 自定义上传地址
你可以自定义上传图片的后端地址，但是对后端的数据返回格式有如下要求：
{
code: 200, // 状态码
data: {
url: 'http://uploads.liqingsong.cc/20210430/f62d2436-8d92-407d-977f-35f1e4b891fc.png', // 图片地址
name '赞助码' // 图片说明
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
前端代码如下：
<tui-editor ref="tuieditor" v-model="content" imgUpload="http://ajax.com/upload/img"></tui-editor>
1
# 自定义上传函数
你也可以自定义上传函数，样列如下：
<template>
<el-card shadow="never" class="border-none margin-t24">
<div slot="header">
<span>自定义上传图片</span>
</div>
<tui-editor ref="tuieditor" v-model="content" :imgUpload="imgUpload"></tui-editor>
</el-card>
</template>
<script>
import TuiEditor from '@/components/TuiEditor';
export default {
components: {
TuiEditor
},
data() {
return {
content: '# This is Test.'
};
},
methods: {
imgUpload(fileOrBlob, callback) {
var formdata = new FormData();
formdata.append('image', fileOrBlob);
// ajax上传
this.$axios({
url: '/upload/img',
method: 'post',
data: formdata,
headers: { 'Content-Type': 'multipart/form-data' }
}).then(res => {
const { data } = res;
const { url, name } = data;
callback(url, name);
}).catch(err => {
console.log(err);
});
}
}
};
</script>
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
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
友情提示
你可以修改此组件，删除 imgUpload 此 props，然后在组件内部直接进行调整，统一整个后台编辑器的上传，方便，避免每次调用组件都设置上次图片。相关代码可以，如下修改样列：
export default {
computed: {
editorOptions() {
const _this = this;
const options = Object.assign({}, defaultOptions, this.options);
options.hooks = {};
options.initialEditType = _this.mode;
options.height = _this.height;
options.language = _this.language;
options.placeholder = _this.placeholder;
/*
// 此代码if判断删除：
if (['string', 'function'].includes(_this.typeofImgUpload)) {
options.hooks.addImageBlobHook = _this.$imgUpload;
}
*/
// 调整如下：
options.hooks.addImageBlobHook = _this.$imgUpload;
return options;
},
// typeofImgUpload 可以删除
typeofImgUpload() {
return typeof this.imgUpload;
}
},
methods: {
$imgUpload(fileOrBlob, callback){
const _this = this;
/*
// 此代码 switch 删除
switch (_this.typeofImgUpload) {
case 'string': // 表示是上传地址
var formdata = new FormData();
formdata.append('image', fileOrBlob);
request({
url: _this.imgUpload,
method: 'post',
data: formdata,
headers: { 'Content-Type': 'multipart/form-data' }
}).then(res => {
const { data } = res;
const { url, name } = data;
callback(url, name);
}).catch(err => {
console.log(err);
});
break;
case 'function': // 表示自定义上传
_this.imgUpload(fileOrBlob, callback);
break;
default:
break;
}
*/
// 调整如下
var formdata = new FormData();
formdata.append('image', fileOrBlob);
this.$axios({
url: '上传的后端地址写死到这里，这样就避免掉了每次调用编辑器都要去设置上传了',
method: 'post',
data: formdata,
headers: { 'Content-Type': 'multipart/form-data' }
}).then(res => {
const { data } = res;
const { url, name } = data;
callback(url, name);
}).catch(err => {
console.log(err);
});
}
}
};
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
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
# 扩展插件
你可以按照开发需求自定义扩展插件如：chart 、code-syntax-highlight 、plugin-color-syntax 、table-merged-cell 、uml等。
以 code-syntax-highlight 为例：
# 第一步：安装
$ npm install @toast-ui/editor-plugin-code-syntax-highlight
1
# 第二步：引入
import 'highlight.js/styles/github.css';
import codeSyntaxHightlight from '@toast-ui/editor-plugin-code-syntax-highlight';
import hljs from 'highlight.js';
1
2
3
2
3
# 第三步：相关设置
export default {
methods: {
initEditor() {
this.editor = new Editor({
el: document.getElementById(this.id),
/* 添加插件代码 S */
plugins: [[codeSyntaxHightlight, { hljs }]],
/* 添加插件代码 E */
...this.editorOptions
});
if (this.value) {
this.setValue(this.value);
}
this.editor.on('change', () => {
this.$emit('input', this.getValue());
});
}
}
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Example
<template>
<div class="main-conent main-conent-minheight">
<el-card shadow="never" class="border-none">
<div slot="header">
<span>默认</span>
</div>
<tui-editor ref="tuieditor" v-model="content"></tui-editor>
</el-card>
<el-card shadow="never" class="border-none margin-t24">
<div slot="header">
<span>自定义上传图片</span>
</div>
<tui-editor ref="tuieditor" v-model="content" :imgUpload="imgUpload"></tui-editor>
</el-card>
<el-card shadow="never" class="border-none" style="margin-top:4px;">
<el-button @click="getContent">获取HTML</el-button>
<hr>
<div v-html="contentHtml"></div>
</el-card>
<el-card shadow="never" class="border-none margin-t24">
<tui-editor-viewer v-model="content"></tui-editor-viewer>
</el-card>
</div>
</template>
<script>
import TuiEditor from '@/components/TuiEditor';
import TuiEditorViewer from '@/components/TuiEditor/Viewer';
export default {
components: {
TuiEditor,
TuiEditorViewer
},
data() {
return {
content: '# This is Test.',
contentHtml: ''
};
},
computed: {
},
watch: {
},
methods: {
getContent() {
this.contentHtml = this.$refs.tuieditor.getHtml();
},
imgUpload(fileOrBlob, callback) {
var formdata = new FormData();
formdata.append('image', fileOrBlob);
console.log(formdata, fileOrBlob);
/*
// ajax上传
request({
url: '/upload/img',
method: 'post',
data: formdata,
headers: { 'Content-Type': 'multipart/form-data' }
}).then(res => {
const { data } = res;
const { url, name } = data;
callback(url, name);
}).catch(err => {
console.log(err);
}); */
callback('http://uploads.liqingsong.cc/20210430/f62d2436-8d92-407d-977f-35f1e4b891fc.png','赞助码');
}
},
mounted() {
}
};
</script>
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
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
# 卸载
如果你不需要此组件，然后代码打包感觉不需要，可以卸载此组件。
1、CMD 运行
npm uninstall @toast-ui/editor
1
2、删除组件文件目录 TuiEditor (opens new window)