免费素材网站大全,宁波手机网站开发公司,抽奖网站建设,企业招聘ppt模板免费vue使用富文本编辑器上传图片#xff1a; 我是用的是wangEditor 富文本编辑器 demo:http://www.wangeditor.com/ 1).安装依赖:npm install wangeditor 2).我自己是创建了一个组件这样再用到的时候可以直接调用#xff08;可能有更简单的方法#xff09; template lang 我是用的是wangEditor 富文本编辑器 demo:http://www.wangeditor.com/ 1).安装依赖:npm install wangeditor 2).我自己是创建了一个组件这样再用到的时候可以直接调用可能有更简单的方法 template langhtmldiv classeditordiv reftoolbar classtoolbar/divdiv refeditor classtext/div/div /templatescriptimport E from wangeditorlet editornullexport default {name: Editorbar,data () {return {info_: null}},model: {prop: value,event: change},props: {value: {type: String,default: },isClear: {type: Boolean,default: false}},watch: {isClear (val) {// 触发清除文本域内容if (val) {editor.txt.clear()this.info_ null}},value (val) {// 使用 v-model 时,设置初始值editor.txt.html(val)}},mounted () {this.seteditor()},methods: {seteditor () {editor new E(this.$refs.toolbar, this.$refs.editor)editor.customConfig.uploadImgShowBase64 true // base 64 存储图片editor.customConfig.uploadImgServer http://47.106.198.122/api/CanteenAdmin/CanteenManagement/UploadImage// 配置服务器端地址editor.customConfig.uploadImgHeaders { token:sessionStorage.getItem(token) }// 自定义 headereditor.customConfig.uploadFileName image // 后端接受上传文件的参数名editor.customConfig.uploadImgMaxSize 2 * 1024 * 1024 // 将图片大小限制为 2Meditor.customConfig.uploadImgMaxLength 6 // 限制一次最多上传 3 张图片editor.customConfig.uploadImgTimeout 3 * 60 * 1000 // 设置超时时间// this.editor.customConfig.uploadParams {formFile:2};// 配置菜单editor.customConfig.menus [bold, // 粗体underline, // 下划线link, // 插入链接quote, // 引用emoticon, // 表情image, // 插入图片table, // 表格code, // 插入代码 ]editor.customConfig.uploadImgHooks {fail: (xhr, editor, result) {// 插入图片失败回调},success: (xhr, editor, result) {// 图片上传成功回调//// let imgUrl result.data;// insertImg(imgUrl)},timeout: (xhr, editor) {// 网络超时的回调},error: (xhr, editor) {console.log(editor)// 图片上传错误的回调},customInsert: (insertImg, result, editor) {// 图片上传成功,插入图片的回调console.log(result);// if(result.code 200){var url result.data;insertImg(url)//将内容插入到富文本中// console.log(insertImg(url)DFDF)// console.log(datadsfd)// }}};editor.customConfig.onchange (html) {this.info_ html // 绑定当前逐渐地值this.$emit(change, this.info_) // 将内容同步到父组件中console.log(this.info_ )};// 创建富文本编辑器editor.create()}}} /scriptstyle langcss.editor {width: 80%;margin-left: 4%;}.toolbar {border: 1px solid #ccc;}.w-e-menu{z-index:1 !important;}.text {width:100%;border: 1px solid #ccc;height: 300px;} /style editor.vue !--富文本编辑器--div stylemargin-top:2%;margin-left: 1%editor-bar v-modelzldata.info :isClearisClear/editor-bar/divjs: script import EditorBar from ./editorexport default {data: function () {return {isClear: false,zldata: {info:,},}},components: {EditorBar},}/script 调用   喜欢的给个赞吧 转载于:https://www.cnblogs.com/M-miao/p/9838702.html