当前位置: 首页 > news >正文

关于在vue2.0中使用wangeditor富文本的一些问题

1.先下载相关依赖

npm install wangeditor

2. 引入相关包

import E from "wangeditor";

3.注册相关内容

 name: "picLibraryDetail",

 4.相关代码如下:

import E from "wangeditor";
export default {name: "picLibraryDetail",data() {return {};}
}

5.在mounted中实例化

 mounted() {this.id = this.$route.query.id;console.log(this.id);if (this.id != undefined) {this.select();}//富文本let that = this;this.editor = new E(".picLibraryEditor");this.editor.config.placeholder = "输入富文本";this.editor.config.menus = ["undo","redo","head","bold","underline","image","justify","backColor","code","foreColor","fontSize","indent","italic","justify","lineHeight","list","quote",];this.editor.config.customUploadImg = function (files, insert) {// files 是 input 中选中的文件列表// let that = this;// insert 是获取图片 url 后,插入到编辑器的方法console.log(files);files.forEach((item) => {let fd = new FormData();fd.append("file", item);that.$Dhttp({// 以下是上传图片的接口,视情况而更改就可以啦url: "https://xxx-xxx-xxx/material/upload/image",method: "post",data: fd,}).then((res) => {console.log(res.data.url);var json = res.data.url; //取出上传成功后的urlinsert(json);});});};this.editor.create();},

6.在<template>中使用富文本

 <div class="picLibraryEditor" ref="editor" />

7.一些遇到的问题

1.注意class名和实例化时候Dom的名称是否相同。
2.如果报错Dom非法或无法找到,请检查外层父组件是否使用了v-if?  可用v-show替换。
3.this.editor.txt.html()   //获取富文本的输入内容
4.this.editor.txt.html()   //写入富文本的方法  可用于接口数据渲染页面
5.菜鸟上路,一起加油!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.exyb.cn/news/show-35397.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

C++ ---仅仅翻转字符

仅仅翻转字符 题目描述&#xff1a; 给定一个字符串 S&#xff0c;返回 “反转后的” 字符串&#xff0c;其中不是字母的字符都保留在原地&#xff0c;而所有字母的位置发生反转。 题目来源&#xff1a;力扣 class Solution { public:bool IsLetter(char ch){if((ch >a&a…...

mybatis-generator自定义TypeHandler进行加密解密

背景&#xff1a;公司需要将部分验证码进行加密入库&#xff0c;查询的时候解密。 初始时&#xff1a;在每次的逻辑代码中&#xff0c;涉及到该字段的新增&#xff0c;修改&#xff0c;都需要对指定字段进行加密。查询的时候对字段进行解密(缺点&#xff1a;可维护性太差) 改…...

线性封闭区域2D刀路讲解

在学习UG教程的过程中往往要学习UG编程&#xff0c;想尽快速成&#xff0c;可以按照下面UG编程学习步骤&#xff1a; 步骤1、装上编程软件-UG&#xff0c;我们尽量装NX10.0版本&#xff0c;因为它是一个很稳定的一个版本&#xff0c; 步骤2、装上UG的最佳伙伴-优品外挂&#…...

慢慢学习,然后惊呆所有人(八,异常)

目录 ​ 什么是异常&#xff1f; 错误和异常的区别 异常的处理 try语法块&#xff1a; 抓捕异常&#xff1a; 多行异常的处理&#xff1a; 查看出现的异常情况 ​ 自定义异常和抛出异常 Java中异常继承关系 异常抛出&#xff1a; 自定义异常&#xff1a; finall…...

并查集(Union Find)

算法背景 Union Find算法&#xff0c;中文并查集。主要用来解决图论中的连通判断问题&#xff0c;简单抽象问题为&#xff1a; 平面上有n个点给定他们之间两两连接关系 要求输入任意两个点&#xff0c;判断他们是否能够有一条路径联通 算法步骤 一旦有连接&#xff0c;就把…...

TCP/IP网络协议以及Android网络优化方案

引用文章地址&#xff1a;TCP/IP网络协议 文章目录TCP/IPTCP/IP 模型TCP 和 UDPTCP怎么保证传输过程的可靠性&#xff1f;TCP 为什么要三次握手/四次挥手网页请求一个 URL 的流程DNS 工作原理HTTPS 加密原理移动端如何优化一个网络请求呢&#xff1f;DNS 优化CacheControlQ&…...

单季度开出162家新店,被疫情拖累的名创优品继续破局?

名创优品还没有完全脱离疫情的困扰。 北京时间8月19日美股盘前&#xff0c;名创优品发布了截至2021年6月30日的2021财年第四季度财报和全年财报&#xff0c;第四季度全球店铺数量虽然继续逆势增长&#xff0c;但具体的财务指标走向各异&#xff0c;与疫情前的水平差距不一。 …...

webSocket服务端与客户端消息通讯

一、WebSocket是HTML5出的东西&#xff08;协议&#xff09;&#xff0c;也就是说HTTP协议没有变化&#xff0c;或者说没关系&#xff0c;但HTTP是不支持持久连接的&#xff08;长连接&#xff0c;循环连接的不算&#xff09; 首先HTTP有1.1和1.0之说&#xff0c;也就是所谓的k…...

JavaScript 字面值对象的一些基本方法

展开运算符的使用 //构造字面量对象时使用展开语法 let person {name:tom,age:18} let person2 {...person} //展开运算符展开对象属性时&#xff0c;只能在对象中进行展开 //console.log(...person); //报错&#xff0c;展开运算符不能直接展开对象 console.log(我是perso…...

Vue 虚拟列表,纵享丝滑

转载文章&#xff1a;https://juejin.cn/post/6937939870018961439...

文华财经指标软件指标博易大师软件指标公式

CDJZ:ABS(MA(C,N3)-MA(C,120))/MA(C,120) < 0.5; 阶段卖出: 3.2,COLORLICYAN; 清仓卖出: 3.5,COLOR0088FF,DOTLINE; STICKLINE(动力线 > REF(动力线,1) ,动力线 ,REF(动力线,1),3 ,1),COLORRED; STICKLINE(动力线 <REF(动力线,1) ,动力线 ,REF(动力线,1),3 ,1),CO…...

元力参堂:《披荆斩棘的哥哥》一经上线,能否带动芒果TV会员数增长

随着芒果TV《披荆斩棘的哥哥》大热&#xff0c;播放量就占据了综艺热度榜榜首。芒果超媒发布了2021年半年报&#xff0c;公司2021年1-6月实现营业收入78.53亿元&#xff0c;同比增长36.02%。从财报来看&#xff0c;芒果超媒营收的增长&#xff0c;主要还是来源于其主要业务芒果…...

关于环境变量定义prompt实现$替换成用户+当前路径提示

set prompt "// ${HOST}:$cwd % " alias cd cd \!* ;set prompt "// ${HOST}:$cwd % "...

redis数据结构

redis的使用 http://c.biancheng.net/view/4506.html 以下内容均来自该网站 http://c.biancheng.net/view/4540.html 1 字符串数据结构 上面是Redis字符串数据结构 哈希数据结构 一个key对应着一个hash结构&#xff0c;这个hash结构里面也是有很多键值对&#xff0c;key-va…...

导图解书-羁绊(06)《考试脑科学》

想要考试考出好成绩&#xff0c;一系列好的学习方法不可或缺。想要研究高效率的学习方法&#xff0c;首要之事是理解人脑规则。然后根据这些规则就去制定学习方法&#xff0c;尤其要注意 不要违背人脑规则&#xff0c;或者说去灵活运用人脑规则。而本书就是那个“人脑规则”。 …...

简单的出入库管理软件一体化管理

关于库房管理软件&#xff0c;很多人都会问到这样的问题&#xff1a;有免费仓库出入库管理软件推荐吗&#xff1f;有没有简单上手&#xff0c;不收费的管理软件&#xff1f;找一款只需要看到库存的软件&#xff1f;等等&#xff0c;其实现在市面上很多出入库管理软件&#xff0…...

【Servlet】servlet中文显示问题

通过servlet类的doGet、doPost、service方法的HttpServletRequest request获取的参数中&#xff0c;如果有中文会出现乱码问题。 同样&#xff0c;通过HttpServletResponse response返回浏览器的html字符串中&#xff0c;也会出现中文乱码问题。 public class LoginServlet ex…...

spring-boot-starter-redis和spring-boot-starter-data-redis的依赖的区别

spring-boot-starter-redis 1.4.1.RELEASE版本 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-redis</artifactId><version>1.4.1.RELEASE</version></dependency> 具体引入的依…...

mysql基础-常用sql语句

常用sql语句整理 在mysql中&#xff0c;常用sql语句为&#xff1a; 修改密码&#xff1a; alter user rootlocalhost identified with mysql_native_password BY 新密码; alter user rootlocalhost identified with mysql_native_password BY 123456;DDL&#xff08;Data Def…...

2021年婴儿监护器行业最新趋势报告——附下载链接

来源 | 凯度&天猫 婴儿监护器在全球范围快速增长&#xff0c;目前北美市场仍占主导地位。但是中国婴儿监护器市场占有率增长迅速&#xff0c;预计到2021年&#xff0c;婴儿监护器市场全球市场中&#xff0c;中国份额将达9.09%。天猫上&#xff0c;婴儿监护器销售增长尤为迅…...

关于新手指导IntroJS,vue项目(vue3)和react项目(ant-design)的引用

安装插件 npm i introJs 一、vue3项目中引用intro作新手引导 src/utils/util.js文件 import introJs from intro.js/*** name: 新手指导* param {String} pathname 当前页面的path* param {Array} stepsArr 步骤内容&#xff08;包括element、intro&#xff09;* return {*}…...

nuxt中使用svg 开发svg组件

为什么要使用SVG 虽然我们在日常开发的时候&#xff0c;在使用iview 或者element ui等组件时&#xff0c;通常会包含一些常用icon&#xff1b;但是在面对一些特定的需求时&#xff0c;或者自己想high一下&#xff0c;这些通用的icon并不能很好的满足我们。这个时候我们可能会拿…...

A - Til the Cows Come Home POJ - 2387

A - Til the Cows Come Home POJ - 2387 最短路 #include<iostream> #include<cstdio> #include<cstring> #include<algorithm> #include<queue> using namespace std; const int maxn 2010; typedef pair<int, int> PII; // first 存距离…...

C#不同状态的按钮 消失or显示

效果展示&#xff1a; 点击前 点击后 //而且 ”备注“ 变成可编辑状态 点击确定后 编辑成功 并变为初始 只有一个的” 编辑 “按钮 并在listView更改成功 列表样式 解决方案&#xff1a; 首先创建三个Button 都放在一个位置上 当然需要有一个按钮重合在编辑上面&#xff08;为…...

vue--CompositionAPI 中如何使用 VueX

a.同步方法改变数据&#xff1a; Home.vue <template><div class"home"><img alt"Vue logo" src"../assets/logo.png"><h1>{{name}}</h1></div> </template><script> import {toRefs} from v…...

5. 断路器hystrix dashboard turbine

hystrix使用 feign中使用 hystrix feign:hystrix:enabled: true #必须配置Component public class EurekaClientHystrix implements EurekaClientFeign{}使用feign配置了&#xff0c;这些&#xff0c;即可进行回退 Feign 的起步依赖中已经包含Hystrix依赖&#xff0c;所以只…...

springBoot 一键启动多个服务

我们启动springboot服务时经常一个一个去启动,这样操作显然是非常麻烦的,那么怎样让他一键启动多个服务呢? 第一步:打开设置 第二步:选择Compound 第三步:选择你要启动的服务 第四步:点击就可以一键启动了...

JavaScript 字面值对象的一些基本方法

展开运算符的使用 //构造字面量对象时使用展开语法 let person {name:tom,age:18} let person2 {...person} //展开运算符展开对象属性时&#xff0c;只能在对象中进行展开 //console.log(...person); //报错&#xff0c;展开运算符不能直接展开对象 console.log(我是perso…...

深入理解cloud 题外话1:httpPool连接池工具类配置,logback.xml,feign日志配置

httpPool Configuration public class HttpPool {Beanpublic HttpClient httpClient(){System.out.println("init feign httpclient configuration " );// 生成默认请求配置RequestConfig.Builder requestConfigBuilder RequestConfig.custom();// 超时时间request…...

Eclipse打开源码失败

解决&#xff1a;找不到源码&#xff0c;需要链接源码附件。...

Java代码PDF转高清图片

package com.ecovacs.test;import java.awt.image.BufferedImage; import java.awt.image.RenderedImage; import java.io.File; import java.io.IOException; import javax.imageio.ImageIO;import org.icepdf.core.exceptions.PDFException; import org.icepdf.core.excepti...

pdf转图片可调整大小分辨率

pdf转图片可调整大小分辨率 一、使用pdfbox 1、maven导包 <dependency><groupId>org.apache.pdfbox</groupId><artifactId>pdfbox-app</artifactId><version>2.0.2</version></dependency>2、代码实现 mport org.apache.pdf…...

java-php-net-python-文献资料管理系统计算机毕业设计程序

java-php-net-python-文献资料管理系统计算机毕业设计程序 java-php-net-python-文献资料管理系统计算机毕业设计程序本源码技术栈&#xff1a; 项目架构&#xff1a;B/S架构 开发语言&#xff1a;Java语言 开发软件&#xff1a;idea eclipse 前端技术&#xff1a;Layui、H…...

pdf转图片,pdf转高清图片方法

有个同事在工作中遇到了这样的情况&#xff0c;她在浏览一份PDF文件的时候发现里面有部分内容正是自己现在所需要的&#xff0c;但是其他内容对她来说却无关紧要&#xff0c;只想取其中对她有用的那部分&#xff0c;那应该怎么操作呢&#xff1f;小编知道有两种方法可以帮她只取…...

java pdf转图片 变大_Java pdf转高清图片

package com.hyb.kai.web.controller;import java.awt.image.BufferedImage;import java.awt.image.RenderedImage;import java.io.File;import java.io.IOException;import javax.imageio.ImageIO;import org.icepdf.core.pobjects.Document;import org.icepdf.core.util.Gra...

pdf怎么转图片,可得到高清图

pdf怎么转图片&#xff1f;对于每个打工人说&#xff0c;几乎离不开pdf文件&#xff0c;pdf作为电脑上兼容性最强的文件格式&#xff0c;深受大家的喜欢&#xff0c;所以我们每天都会使用到它&#xff0c;不管是自己编写的文件还是别人发给你的文件&#xff0c;很多都是pdf格式…...

[日常] 面试知识点总结(持续更新)

数据结构和算法:物理结构和逻辑结构1.逻辑结构(集合结构,线性结构,树形结构,图形结构)2.物理结构一般是讲内存,顺序存储结构,链式存储结构浅谈算法中,高斯算法从1加到100,循环的话是100次,高斯的方法只需要一次1.推导大O阶:O(1) O(n) O(n^2) O(logn)1.常数1取代时间所有加法常数…...

iPhone5和iOS6上HTML5开发的新增功能

开发移动应用到底是选择Native、Web应用或者混合应用&#xff1f;答案是不同的移动应用需要不同的技术&#xff0c;选择合适的就行。其实大多数移动应用&#xff0c;不管是企业移动应用还是互联网移动应用&#xff0c;90%都可以使用基于HTML5的Web技术就足够。在Android 4.0和i…...

【Python基础】科学计算库Scipy简易入门

0.导语Scipy是一个用于数学、科学、工程领域的常用软件包&#xff0c;可以处理插值、积分、优化、图像处理、常微分方程数值解的求解、信号处理等问题。它用于有效计算Numpy矩阵&#xff0c;使Numpy和Scipy协同工作&#xff0c;高效解决问题。Scipy是由针对特定任务的子模块组成…...

【Python入门】Python之OS模块39个常用函数详解

os&#xff0c;语义操作系统&#xff0c;所以该模块就是操作系统相关的功能了&#xff0c;用于处理文件和目录这些我们日常手动需要做的操作&#xff0c;比如新建文件夹、获取文件列表、删除某个文件、获取文件大小、重命名文件、获取文件修改时间等&#xff0c;该模块就包含了…...

广州python培训排名机构

近日&#xff0c;工业和信息化部教育与考试中心颁发了2021年第二批《大数据分析师》职业能力等级证书。 根据大数据产业发展的新技术、新规范、新要求&#xff0c;参考国内外先进标准进行开发和授课&#xff0c;工业和信息化部教育与考试中心对考核通过的学员授予相应等级的《职…...

十四、使用 Vue Router 开发单页应用(1)

本章概要 感受前端路由 HTML 使用路由模块开发使用路由 传统的 Web 应用程序不同页面间的跳转都是向服务器发起请求&#xff0c;服务器处理请求后向浏览器推送页面。 在单页应用程序中&#xff0c;不同视图&#xff08;组件的模板&#xff09;的内容都是在同一个页面中渲染&…...

广州python培训比较好的机构

软件开发这样的高薪职业是大家所向往的&#xff0c;有不少想学习软件开发的朋友都会选择参加专业的培训&#xff0c;但是面临众多的培训机构&#xff0c;大家也很发愁&#xff0c;不知道怎么选择好&#xff0c;毕竟市面上的培训机构太多&#xff0c;有个别的机构还是比较坑的。…...

教育部正式批准筹备设立香港科技大学(广州)

教育部批准设立香港科技大学&#xff08;广州&#xff09;。9月26日上午&#xff0c;广州南沙粤港澳全面合作示范区重点项目建设动员会举行&#xff0c;香港科技大学&#xff08;广州&#xff09;和广州南沙科学城核心区——中科院明珠科学园两个项目正式动工。教育部有关负责人…...

js通过URL下载文件

通过URL下载文件分为两种&#xff1a; 1.doc&#xff0c;docx文件 2.非doc、docx文件 第一种&#xff1a;doc、docx文件下载的函数 /*** url 下载文件路径* fileName 自定义文件名称* target 文件在何处被下载*/export function downloadByLink({url, fileName, target}: a…...

使用Maven下载jar包源码和doc文档

Maven命令行位置 两个命令 ① 下载pom.xml文件中依赖的jar包源码 mvn dependency:sources② 下载pom.xml文件中jar包文档 mvn dependency:resolve -Dclassifierjavadoc...

C语言笔记-18-Linux基础-进程

C语言笔记-18-Linux基础-进程 文章目录C语言笔记-18-Linux基础-进程前言一、进程概括二、进程指令三、进程函数fork 新建子进程return/exit 关闭子进程atexit 遗言函数四、wait 进程资源回收waitwaitpid五、exec家族函数 进程映像的更新六、Linux ELF 可执行文件readelf 查看el…...

html 转doc文档

html转doc的场景可能比较少见&#xff0c;但近期就遇到了一个&#xff0c;例如一份合同&#xff0c;需要后台不定期修改编辑&#xff0c;保存后&#xff0c;前端可直接下载doc。如果一份内容需要编辑&#xff0c;我能想到的就只有利用在线编辑器直接编辑html内容了&#xff0c;…...

java实现导出doc文档

之前只接触过导出excel&#xff0c;当然项目中总会有一些特殊要求&#xff0c;比如这次甲方爸爸要求导出word文档&#xff0c;代码来了。 项目使用的是pom进行管理的&#xff0c;dependency包括下面几个 <!-- doc --><dependency><groupId>com.lowagie<…...

os安装镜像下载路径(阿里云)

os安装镜像下载路径&#xff08;阿里云&#xff09; https://mirrors.aliyun.com/centos/7.6.1810/isos/x86_64/...