合规国际互联网加速 OSASE为企业客户提供高速稳定SD-WAN国际加速解决方案。 广告
# 富文本 这里提供一个 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('粘贴的内容'); }, } } ``` 你没看错,使用就是这么简单。