关于在vue项目中使用wangEditor
1,vue中安装wangEditor
使用的npm安装 npm install wangeditor --save
2,创建公用组件
在components中创建wangEnduit文件夹
组件内容为
<template lang="html"><div class="editor"><div ref="toolbar" class="toolbar"></div><div ref="editor" class="text"></div></div> </template><script>import E from 'wangeditor'export default {name: 'editoritem',data() {return {// uploadPath, editor: null,info_: null}},model: {prop: 'value',event: 'change'},props: {value: {type: String,default: ''},isClear: {type: Boolean,default: false}},watch: {isClear(val) {// 触发清除文本域内容if (val) {this.editor.txt.clear()this.info_ = null}},value: function(value) {if (value !== this.editor.txt.html()) {this.editor.txt.html(this.value)}}//value为编辑框输入的内容,这里我监听了一下值,当父组件调用得时候,如果给value赋值了,子组件将会显示父组件赋给的值 },mounted() {this.seteditor()this.editor.txt.html(this.value)},methods: {seteditor() {// http://192.168.2.125:8080/admin/storage/createthis.editor = new E(this.$refs.toolbar, this.$refs.editor)this.editor.customConfig.uploadImgShowBase64 = false // base 64 存储图片this.editor.customConfig.uploadImgServer = 'http://otp.cdinfotech.top/file/upload_images'// 配置服务器端地址this.editor.customConfig.uploadImgHeaders = { }// 自定义 headerthis.editor.customConfig.uploadFileName = 'file' // 后端接受上传文件的参数名this.editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024 // 将图片大小限制为 2Mthis.editor.customConfig.uploadImgMaxLength = 6 // 限制一次最多上传 3 张图片this.editor.customConfig.uploadImgTimeout = 3 * 60 * 1000 // 设置超时时间// 配置菜单this.editor.customConfig.menus = ['head', // 标题'bold', // 粗体'fontSize', // 字号'fontName', // 字体'italic', // 斜体'underline', // 下划线'strikeThrough', // 删除线'foreColor', // 文字颜色'backColor', // 背景颜色'link', // 插入链接'list', // 列表'justify', // 对齐方式'quote', // 引用'emoticon', // 表情'image', // 插入图片'table', // 表格'video', // 插入视频'code', // 插入代码'undo', // 撤销'redo', // 重复'fullscreen' // 全屏 ]this.editor.customConfig.uploadImgHooks = {fail: (xhr, editor, result) => {// 插入图片失败回调 },success: (xhr, editor, result) => {// 图片上传成功回调 },timeout: (xhr, editor) => {// 网络超时的回调 },error: (xhr, editor) => {// 图片上传错误的回调 },customInsert: (insertImg, result, editor) => {// 图片上传成功,插入图片的回调//result为上传图片成功的时候返回的数据,这里我打印了一下发现后台返回的是data:[{url:"路径的形式"},...]// console.log(result.data[0].url)//insertImg()为插入图片的函数//循环插入图片// for (let i = 0; i < 1; i++) {// console.log(result) let url = "http://otp.cdinfotech.top"+result.urlinsertImg(url)// } }}this.editor.customConfig.onchange = (html) => {this.info_ = html // 绑定当前逐渐地值this.$emit('change', this.info_) // 将内容同步到父组件中 }// 创建富文本编辑器this.editor.create()}}} </script><style lang="css">.editor {width: 100%;margin: 0 auto;position: relative;z-index: 0;}.toolbar {border: 1px solid #ccc;}.text {border: 1px solid #ccc;min-height: 500px;} </style>
3 在父组件中调用
<template> <div> <editor-bar v-model="detail" :isClear="isClear" @change="change"></editor-bar> </div> </template>import EditorBar from './editoritem' components: { EditorBar }, data() {return {isClear: false,detail:""}}, methods: {change(val) {console.log(val)},}
转载于:https://www.cnblogs.com/huge1122/p/11346115.html
关于在vue项目中使用wangEditor相关推荐
- Vue项目中使用wangEditor富文本输入框(推荐)
vue中安装wangEditor cnpm install wangeditor 创建公用组件:在src/vue/components文件夹中创建wangEditor.vue <template ...
- vue 项目中使用wangEditor上传图片视频到oos
废话: 最近在做商城后台管理的项目, 商品详情需要使用富文本编辑器, 需要上传图片和上传视频的功能. 关于富文本: 富文本选择: wangEditor , froalaEditor 我个人是喜欢fro ...
- vue管理后台项目中使用wangEditor富文本编辑器
背景 公司需要做一个后台文章管理的模块,通过富文本编辑器编辑文章,在前端显示.调研了很久,决定使用wangEditor -- 轻量级 web 富文本编辑器,配置方便,使用简单.一些编辑器的说明. 开始 ...
- canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法 项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
- 如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
- 实战:vue项目中导入swiper插件
版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4. 常用的版本是swiper3和swiper4,我选择的是swiper3. 安装 安装swiper3的最新版本3.4.2: ...
- vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
- VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题
VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题 参考文章: (1)VUE项目中使用this.$forceUpdate();解决 ...
- 在vue项目中:统一封装 Axios 接口与异常处理
在vue项目中:统一封装 Axios 接口与异常处理 参考文章: (1)在vue项目中:统一封装 Axios 接口与异常处理 (2)https://www.cnblogs.com/itgezhu/p/ ...
最新文章
- SQuirreL SQL Client 使用记录
- BZOJ 2139 road(构造,最小生成树)【BZOJ 修复工程】
- 分布式锁--Redis小试牛刀
- Hadoop入门(十五)Mapreduce的数据排序程序
- OpenStack精华问答 | OpenStack和CloudStack对比
- Windows7系统下编译安装X264
- easy connect无法连接到服务端_故障分析 | 一次因为超过最大连接数的登陆限制
- html5 成语连连看,全国通用五年级下册语文讲义-阅读与作文:学写读后感(含答案)[参考].pdf...
- httd及其ab测试工具
- c#怎样将object转换过程int型
- SATA 模式相关概念
- 通过 Amazon EFS 对 NFS 文件系统权限进行细粒度控制
- 定向光流直方图是什么_OpenCV计算机视觉编程攻略(第3版)
- 计算机配置ppt制作,做ppt.ps要用什么样的配置的手提电脑做
- 软件架构师:走钢索的人
- 贝叶斯分类、极大似然估计和最大后验概率估计的一些概念
- 如何高效编写Go单元测试(一)
- Android开发者网站博客导航
- CSK会议通话降噪解决方案,以A.I.横扫噪音
- 微信小程序MQTT模拟器 阿里云物联网平台测试