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/create
this.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 = { }// 自定义 header
this.editor.customConfig.uploadFileName = 'file' // 后端接受上传文件的参数名
this.editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024 // 将图片大小限制为 2M
this.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.url
insertImg(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) },
}

关于在vue项目中使用wangEditor的更多相关文章

  1. vue 项目中实用的小技巧

    # 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...

  2. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

  3. 在vue项目中, mock数据

    1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件 2.在build目录下的 dev-server.js的文件作如下 ...

  4. 浅谈 Axios 在 Vue 项目中的使用

    介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http ...

  5. 去除vue项目中的#及其ie9兼容性

    一.如何去除vue项目中访问地址的# vue2中在路由配置中添加mode(vue-cli创建的项目在src/router/index.js) export default new Router({ m ...

  6. vue 项目中当访问路由不存在的时候默认访问404页面

    前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在 ...

  7. vue项目中遇到的那些事。

    前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...

  8. scss/less语法以及在vue项目中的使用(转载)

    1.scss与less都是css的预处理器,首先我们的明白为什么要用scss与less,因为css只是一种标记语言,其中并没有函数变量之类的,所以当写复杂的样式时必然存在局限性,不灵活,而scss与l ...

  9. Vue项目中GraphQL入门学习与应用

    1.GraphQL是什么,能干什么? 正如官网所说,GraphQL是一种用于API查询的语言.Facebook 的移动应用从 2012 年就开始使用 GraphQL.GraphQL 规范于 2015 ...

随机推荐

  1. Spring Boot 全局Exception处理

    一.代码如下 package com.zxguan; import org.springframework.web.bind.annotation.ControllerAdvice; import o ...

  2. 在ASP.NET Core中实现自动注入、批量注入

    我们在使用AddScoped.AddTransient.AddSingleton这类方法的时候很是麻烦.我们每增加一个接口以及其实现的时候,是不是需要在这里硬编码注册一行代码呢?项目小还好,但当我们的 ...

  3. .netcore项目中使用log4net

    log4net配置文件 引入log4net包,创建一个config目录,专门用来放配置文件,添加log4net.config文件. 编写配置文件. <?xml version="1.0 ...

  4. Android蓝牙遥控器APP关键代码 guihub项目

    package com.car.demo; import java.io.IOException; import java.io.OutputStream; import java.util.UUID ...

  5. POJ2503(Babelfish)--简单字典树

    思路:就是用一个字典树翻译单词的问题,我们用题目中给出的看不懂的那些单词建树,这样到每个单词的叶子结点中存放原来对应的单词就好. 这样查询到某个单词时输出叶子结点存的就行,查不到就"en&q ...

  6. js对象转数组

    1.Array.from() 方法,用于数组的浅拷贝.就是将一个类数组对象或者可遍历对象转换成一个真正的数组.eg: let obj = { 0: ‘nihao‘, 1: ‘haha‘, 2: ‘ga ...

  7. 第五章、drf-JWT认证

    目录 JWT认证 JWT认证方式与其他认证方式对比: 优点 格式 drf - jwt 插件 官网 安装 token的签发与校验初识: 签发token 校验token 自定义drf-jwt配置 sett ...

  8. 如何解决Win10不能新建项目的问题?

    在Win10系统中,我们有时候会遇到右键菜单中没有新建项的情况,这时我们就无法进行文件的新建,非常耽误我们使用电脑.下面雨后清风就来分享一下Win10系统右键菜单没有新建项的解决方法. Win10系统 ...

  9. Ubuntu系统---C++之Eclipse编译器 CDT插件安装

                                                                                         Ubuntu系统---Ecli ...

  10. 火狐新版移除developer Toolbar和无法关闭自动更新的解决

    随着火狐的不断更新已经更新到66版本了,近期注意到有个问题是火狐经常提示更新,更新了没多久,又时不时跳出更新的提示,不胜其烦. 在火狐的前期的版本中(大概4年之前吧)在Options菜单里是可以设置从 ...