工作108:vue里面wangEdit编辑器使用

WangEdit使用

<template lang="html"><div class="editor"><!--定义的为表头的属性--><div ref="toolbar" class="toolbar"></div><!--定义的为表格的属性--><div ref="editor" class="text"></div></div>
</template>
<script>
/*引入王edit插件*/
import E from 'wangeditor'
import {getAction} from "@/api";
export default {name: 'EditorBar',data() {return {editor: null,info_: null,UploadVidio:'',}},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赋值了，子组件将会显示父组件赋给的值},created() {/*控制上传图片的逻辑*/getAction("/content/upload_url/"+1).then(res=>{this.UploadVidio=res.data}).then(res=>{this.seteditor()this.editor.txt.html(this.value)})},methods: {seteditor() {/*选中对应的元素*/this.editor = new E(this.$refs.toolbar, this.$refs.editor)/*设置存储照片的格式*/this.editor.config.uploadImgShowBase64 = false // base 64 存储图片this.editor.config.uploadImgServer =this.UploadVidio// 配置服务器端地址this.editor.config.uploadImgHeaders = { }// 自定义 headerthis.editor.config.uploadFileName = 'file' // 后端接受上传文件的参数名this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024 // 将图片大小限制为 2Mthis.editor.config.uploadImgMaxLength = 6 // 限制一次最多上传 3 张图片this.editor.config.uploadImgTimeout = 3 * 60 * 1000 // 设置超时时间// 配置菜单this.editor.config.menus = ['head', // 标题'bold', // 粗体'fontSize', // 字号'fontName', // 字体'italic', // 斜体'underline', // 下划线'strikeThrough', // 删除线'foreColor', // 文字颜色'backColor', // 背景颜色'link', // 插入链接'list', // 列表'justify', // 对齐方式'quote', // 引用'emoticon', // 表情'image', // 插入图片'table', // 表格'video', // 插入视频'code', // 插入代码'undo', // 撤销'redo', // 重复'fullscreen' // 全屏]this.editor.config.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 = this.UploadVidioinsertImg(url)// }}}this.editor.config.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>

工作108:vue里面wangEdit编辑器使用相关推荐

打造前端 Deepin Linux 工作环境——安装配置 atom 编辑器
打造前端 Deepin Linux 工作环境--安装配置 atom 编辑器好,我个人推荐大家使用 atom 编辑器,第一是免费,第二是好看,第三是好用. 安装 atom 编辑器我们输入 apt-c ...
Vue 富文本编辑器插件 vue-quill-editor 坑！
Vue3 + vue-quill-editor 安装步骤: vue3 安装vue-quill-editor npm install @vueup/vue-quill vue2 安装vue-quill- ...
Vue引入 mavon-editor 编辑器的详细步骤
Vue引入 mavon-editor 编辑器的详细步骤一.编辑器的引入如果你的项目之前没有安装过该编辑器,那就得先安装编辑器在自己的项目的根目录执行下列命令: npm install mavon ...
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-8.使用mavoneditor(vue的markdown编辑器)，并批量上传图片
技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-8.使用mavoneditor(vue的markdown编辑器),并批量上传图片技能学习:学习使用php(tp6框架) + ...
# Vue 中 JSON 编辑器使用
Vue 中 JSON 编辑器使用文章目录 Vue 中 JSON 编辑器使用背景描述 vue-json-edit 安装依赖测试页面效果图 bin-code-editor 安装依赖测试页面效果 ...
vue中使用图像编辑器tui-image-editor(一)
vue中使用图像编辑器tui-image-editor(一) 场景:需要对图片进行旋转.缩放.裁剪.涂鸦.标注.添加文本等. 效果-图1 1.基本介绍官网:https://ui.toast.com/ ...
vue中使用图像编辑器tui-image-editor(二)——应用示例
vue中使用图像编辑器tui-image-editor(二)--应用示例效果代码 mark.vue <template><div class="drawing-cont ...
工作90：富文本编辑器使用篇wangedit
WangEdit组件 <template lang="html"><div class="editor"><div ref=&qu ...
Vue中富文本编辑器的使用
基于 Vue 的富文本编辑器有很多,例如官方就收录推荐了一些: https://github.com/vuejs/awesome-vue#rich-text-editing . 这里我们以 eleme ...

工作108:vue里面wangEdit编辑器使用

工作108:vue里面wangEdit编辑器使用相关推荐

最新文章

热门文章