# 富文本
这里提供一个 editor富文本,也是为了经常会用到,懒得再去搞了,拿来直接就能用。对 wang-editor富文本 不熟悉的请看官方文档,代码:
#### 基本使用
```
<component-wang-editor :height="350"></component-wang-editor>
```
所有属性,列出均为默认值与使用示例
```
<!-- 所有属性 -->
<component-wang-editor style="width: 600px;"
:params="{key:'额外参数'}"
:height="350"
:disabled='false'
:isClear="false"
:headers='{}'
:debug='false'
:customUploadImg='customUploadImg'
:showLinkImg='true'
:uploadFileName='"file"'
:uploadImgServer='"/api/upload"'
:uploadImgMaxSize='2 * 1024 * 1024'
:uploadImgAccept="['jpg', 'jpeg', 'png', 'gif', 'bmp']"
:uploadImgMaxLength="5"
:uploadImgParams="{token: 'xxxxx',x: 100}"
:uploadImgParamsWithUrl="false"
:uploadImgHeaders="{}"
:uploadImgTimeout="5 * 1000"
:customUploadVideo="customUploadVideo"
:showLinkVideo="true"
:uploadVideoServer='"/api/upload"'
:uploadVideoName='"file"'
:uploadVideoHeaders='{}'
:uploadVideoParams='{token: 'xxxxx',x: 100}'
:uploadVideoParamsWithUrl='false'
:uploadVideoSize='1 * 1024 * 1024 * 1024' // 1024M
:uploadVideoTimeout='1000 * 60 * 5'
:uploadVideoAccept='["mp4"]'
:pasteTextHandle='pasteTextHandle'
:emotions='[]'
:lineHeights='[]'
:colors='[]'
:fontNames='[]'
:fontSizes='{}'
:highlight='hljs'
:showFullScreen='true'
:menus='[]'
@fail="handleFail"
@success="handleSuccess"
@timeout="handleTimeout"
@error="handleError"
@before="handleBefore"
@failVideo="handleFail"
@successVideo="handleSuccessVideo"
@timeoutVideo="handleTimeoutVideo"
@errorVideo="handleErrorVideo"
@beforeVideo="handleBeforeVideo"
@change="handleChange">
</component-wang-editor>
```
结构
```
import hljs from 'highlight.js'
export default {
data () {
uploadUrl:'上传图片地址',
value:'富文本内容',
isClear:'是否清空',
isdisable:'是否禁用',
headers:'请求头设置',
debug:'开启debug模式'
// ...其他属性就不一一列举了
},
methods:{
handleChange(val,params){
console.log(val,params);
},
handleFail(xhr, params, editor, result, editor,editorDom){
console.log(result);
},
handleSuccess(xhr, params, editor,editorDom){
console.log(result);
},
handleTimeout(xhr, params, editor,editorDom){
console.log(editor);
},
handleError(xhr, params, editor, editor,editorDom){
console.log(editor);
},
handleBefore(xhr, params, editor,editorDom){
// insertImgFn(imgUrl)
console.log(editor);
},
// 自定义上传图片 需要手动把上传后的视频插入到编辑器 insertImgFn(imgUrl)
customUploadImg(insertImgFn, resultFiles, params,editor,editorDom){
// insertImgFn(imgUrl)
console.log(editor);
},
// 自定义上传视频 需要手动把上传后的视频插入到编辑器 insertVideoFn(videoUrl)
customUploadVideo(insertVideoFn, resultFiles, params,editor,editorDom){
// insertVideoFn(videoUrl);
console.log(editor);
},
handleFailVideo(xhr, params, editor, result, editor,editorDom){
console.log(result);
},
handleSuccessVideo(xhr, params, editor,editorDom){
console.log(result);
},
handleTimeoutVideo(xhr, params, editor,editorDom){
console.log(editor);
},
handleErrorVideo(xhr, params, editor, editor,editorDom){
console.log(editor);
},
handleBeforeVideo(xhr, params, editor,editorDom){
// insertImgFn(imgUrl)
console.log(editor);
},
pasteTextHandle(value, params,editor,editorDom){
console.log('粘贴的内容');
},
}
}
```
你没看错,使用就是这么简单。