vue富文本框的使用和问题总结(插入文字、图片和视频)

今天在vue中插入富文本的时候，遇到了一些小漏洞，提供给大家参考。如有错误，请多加更正。

我在这里使用元素界面的上传图片组件

首先介绍Element-ui(我就不赘述了，详情请参考Element中文官网)

介绍富文本组件vue-quill编辑器

用于在main.js中引入相应的样式

从' vue-quill-editor ' import ' quill/dist/quill . core . CSS ' import ' quill/dist/quill . snow . CSS ' import ' quill/dist/quill . bubble . CSS ' vue . use(VueQuillEditor)导入VueQuillEditor；您现在可以在vue中使用富文本

模板！-富文本编辑器-El-form-item label=' content ' : label-width=' formlabelwidth ' quiet-editor v-model=' value ' ref=' myquilleditor ' : options=' editor option ' @ chan ge=' onEditorChange($ event)'/quill-editor/El-form-item/templatescript export default { data(){ return { value 3: ' '，editor option 3: { Placeholder 3: '请输入学院简介'，主题3:日志(这个。值)} } }/脚本这里需要注意的是，必须配置EditorOption

由于其样式没有在模块中配置，所以事故显示相对简单

如果您需要上传图片或视频，您需要在模块中重建工具栏(使用处理程序)

模块： {工具栏： {处理程序： {容器：工具栏选项，//工具栏'图像' 3360函数(值){If(值){Alert (1)} Else {this。quiet.format ('image '，false)；} }，' video ' : function(value){ if(value){ alert(2)} else { this . quill . format(' image '，false)；}}、}}}配置后，你会发现整个富文本编辑器的工具栏都没有变化，或者只保留了几个基本的富文本功能。

这是因为handlers是用来定义自定义程序的，添加一个自定义的handlers会覆盖它在这个省的工具栏和主体行为，所以我们要自己配置需要的工具栏。所有功能的配置如下，也可以根据需要进行配置。

const toolboroptions=[[[' bold '，' italic '，'下划线'，' strike']，//切换按钮['blockquote '，' code-block']，[{ 'header': 1 }，{ 'header': 2 }]，//自定义按钮值[{ 'list': 'ordered' }，{ 'list': 'bullet' }，[{ 'script': 'sub' }，{ ' script ' : ' super ' }，//上标[{ 'color': [] }，{ 'background': [] }]，//带有来自主题[{'font' : []}]的默认值的下拉菜单，[{'align' : []}]，['link '，' image '，' video']，[' clean ']//remove formatting button]将在此时丰富文本工具

这样，它的工具栏就会有一个上传图片和视频的界面，然后你可以在工具栏的配置中配置上传图片或视频中的图片和视频，你可以根据它的点击给他相应的处理响应，也可以为它重定向事件。这里我将向您介绍重定向事件。

首先，定义一个上传组件。我在这里使用我自己的上传组件

div class=' avatar-uploader ' myupv-: getimgur=' addinputurl '/myup/div设置相应的属性值和事件

脚本导入myup from' @/page/test'//upload组件导出default { data(){ return { value : }，编辑器选项： {placeholder : '请输入机构简介'，主题： 'snow '，//或' bubble '模块： { toolbar : { container 3: toolbarOptions，//工具栏handlers : { ' image ' : function(value){ if(value){//consoleserver URL)document . queryselector('。化身上传者')。click()//alert(1)} else { this . quill . format(' image '，false)；} }，' video ' : function(value){ if(value){ alert(2)} else { this . quill . format(' image '，false)；}}，}}}}，}}，方法： {oneditorchange () {console。日志(这个。value) varcontent=this。重视这个。$ emit ('gettext '，content)}}}/script这里需要注意的是，如果想直接上传，需要点击图片进行上传。

因为上传是我自己写的，要插入到富文本中，所以添加内容的时候需要加上img标签，因为富文本支持图片的分析

AddInputUrl(data){ var a=data var Tp=a . length var imghz=a . slice(Tp-4，Tp)var src=' src=' http : ' a ' ' var bq=' img ' src ' alt=' '/' this。value=bq}只需在这里做一个支持上传图片的富文本即可。我们来谈谈视频。由于大多数导入的富文本没有内置播放器，视频标签在富文本中会失效。

var bq=' iframe frame border=' 0 ' width=' 100% ' height=' 40% ' src '的摘要允许全屏/iframe' this。值=bq

以上是边肖介绍的vue富文本框(插入文字、图片、视频)的使用及问题总结，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！