wangEditor的基本使用及踩坑记录

最新推荐文章于 2024-06-26 17:14:46 发布
最新推荐文章于 2024-06-26 17:14:46 发布
阅读量1.7w 收藏 18
点赞数 4
分类专栏： 前端学习笔记 文章标签： wangEditor富文本编辑器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Aimee_ice/article/details/88546620
版权

前言

最近写项目用到了富文本编辑器，在同事的建议下，采用了wangEditor3，在此记录下使用wangEditor3的基本步骤以及遇到的一些问题

 

基本使用

基本使用步骤原作者已讲的非常详细，如有需要，移步----->wangEditor3使用手册

下载

使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>wangEditor demo</title>
</head>
<body>
    <div id="editor">
        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
    </div>

    <!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
    <script type="text/javascript" src="/wangE
最低0.47元/天 解锁文章
Zoey Chou
关注
  • 4
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 21
    评论
专栏目录
wangEditor使用教程
qq_42264407的博客
11-10 3379
富文本编辑器超详细使用教程
vue中使用wangEditor富文本编辑器记录
ZYT1023的博客
11-18 528
一、wangEditor是什么？ 基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用 包括：【标题设置、字体加粗、斜体、下划线、删除、文字颜色、背景颜色、链接、列表（有序、无序）、表情、图片（网络图片、本地上传）、表格、视频、代码块、返回上一步、返回下一步（但其实ctrl+z快捷键也可以）】 二、使用步骤 1.加载依赖 npm install wangeditor 2.创建公共组件 在components中创建wangEnduit文件夹 3.编写...
WANGEDITOR配置及功能实现详解
最新发布
alisky119的博客
06-26 791
网上的资料大部分内容都是重复的，本身也没有提供太好的方案，都是一些开源的方案，到不是说开源的方案不行，主要就是用起来各种问题，没人解决，也没有人提供技术支持，集成这块可能花的时间成本比较高。从word中复制内容，从word中复制图片和文字，然后粘贴到wangEditor编辑器中，粘贴后图片自动上传到服务器中，能够看到每一张图片的上传进度，已经上传的大小，剩余时间，上传速度。上传后返回文字和图片HTML，自动将文字和图片HTML添加到编辑器中，用户能够直接看到粘贴后的效果，保留文字样式，字体大小，字体颜色。
wangeditor 使用踩坑
m0_47400036的博客
10-11 287
wangeditor 使用踩坑
wangEditor应用以及踩坑
weixin_43971105的博客
11-12 598
1.上传图片踩坑 2.中文输入法下，输入首字母自动删除踩坑
WangEditor富文本编辑器图片上传踩坑之路
zcczero的博客
04-03 1万+
最近由于业务需求，需要用到富文本编辑器，找寻了好久，起初想使用百度的ueditor，但在使用的过程中实在是遇到了太多的坑，于是另外锁定了一款富文本编辑器——wangEditor。这是一款轻量级的富文本编辑器，比起百度的ueditor，这款编辑器的界面更加简单，文档也很详细。对于需求不是很高的功能来说，这款编辑器实在是不二之选。 一、wangEditor的基本显示demo 这个部...
关于在vue项目中使用wangEditor
放眼长期，稳中求进；知行合一，日拱一卒
09-15 754
1，vue中安装wangEditor 使用的npm安装 npm install wangeditor --save 2，创建公用组件 在components中创建wangEnduit文件夹 组件内容为 <template lang="html"> <div class="editor"> <div ref="toolbar" class...
wangEditor4使用表单提交实例
03-31
wangEditor官方的文档发现做起来比较麻烦，虽然说很方便，但是对新手来说还是不太好集成的自己的系统中，下面整理了一个创建隐藏input作为表单提交的组件事件的方法。用起来就方便多了。 只需要在需要的位置放以下...
轻量级富文本编辑器wangEditor结合vue使用方法示例
10-17
在开发Web应用时，富文本编辑器是一种常见且重要...通过以上示例，开发者可以快速掌握在Vue项目中使用wangEditor的基本步骤。为了获得更丰富的功能和更个性化的配置，建议查阅wangEditor的官方文档以获取更多详细信息。
wangEditor V4
01-11
7. **兼容性**：wangEditor V4通常对现代浏览器有良好的支持，但可能在某些旧版本或非主流浏览器中存在兼容问题，因此在实际使用时需要考虑这些因素。 8. **错误处理**：在使用过程中，应关注可能出现的JavaScript...
wangEditor
01-08
在使用wangEditor时，开发者需要了解以下几个关键点： 1. **安装与引入**：可以通过npm或CDN方式引入编辑器，然后在HTML中创建一个元素作为编辑区域，并调用初始化方法启动编辑器。 2. **配置项**：可以设置各种...
wangeditor富文本编辑器的一些坑
helixsky的博客
04-04 1万+
看到CSDN都在用wangeditor而且用起来的确简单，可是图片上传还是一直搞不定。 1.返回格式问题 官方要求返回json格式，先定义字典赋值，然后采用json.dumps(result,ensure_ascii=False)进行后端返回： { "errno": 0, "data": [ "图片1地址", "图片2地址", ...
vue中使用wangEditor富文本编辑器（踩坑）
热门推荐
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
07-31 2万+
wangEditor—— 轻量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器。 vue富文本 编辑器 总结
vue2.0中引入wangEditor2 步骤与坑
weixin_33670786的博客
11-07 2409
安装：官方给出了如下安装方式点击 https://github.com/wangfupeng1988/wangEditor/releases 下载最新版 使用git下载： git clone https://github.com/wangfupeng1988/wangEditor.git 使用npm安装: npm install wangeditor （...
vue中使用富文本编辑器wangEditor及踩坑
hjhfreshman的博客
09-09 4146
因为上传图片的问题使用过了各种富文本，最后发现还是这个比较好用。分享记录一下。 安装 npm install wangeditor --save 新建一个wangeditor.vue（组件），代码内容如下 <template lang="html"> <div class="editor"> <div ref="toolbar" class="toolb...
wangEditor富文本编辑器踩坑：解决IE浏览器按Tab键无法缩进，谷歌可以
weixin_39897287的博客
09-14 1081
问题：IE浏览器按Tab键无法缩进，谷歌可以 解决思路：先监听键盘事件判断按下Tab键时，再向光标的当前位置插入两个空格键（注意：IE缩进：‘/t’不起作用，一定要：’&nbsp‘;） 首先wangeditor组件文档标注了在光标位置插入内容：editor.cmd.do('insertHTML,''<p>想要插入的内容</p>) wangeditor文档地址： https://www.wangeditor.com/doc/pages/08-%E5%B8%B8%E7%94%
wangEditor使用踩坑记录
qq_38886284的博客
11-14 1931
wangEditor是一款轻量级富文本编辑器，虽然功能非常强大，但是在使用中还是踩了不少坑，下面具体说说我在项目使用中遇到的坑，此次我在移动端使用wangEditor。
使用wangeditor遇到的坑，插入视频只显示音频
weixin_52509007的博客
03-10 1225
今天在用wangeditor的时候插入视频之后只显示音频。 然后看了标签页确实是video标签。 这个视频是我用QQ自带的录屏录的， 最后查阅资料发现video标签 支持的编码方式是h264 视频格式 首先 video 标签只支持MPEG4，Ogg，WebM 三种视频格式，浏览器支持情况如下： 但是，video标签对这三种视频格式是有具体要求的 Ogg = 带有 Theora视频编码+ Vorbis 音频编码 MPEG4 = 带有 H.264 视频编码 + AAC音...
wangeditor5二次封装及使用
05-23
WangEditor是一款基于javascript和jQuery开发的富文本编辑器，它支持常见的文本编辑操作、图片上传和格式化等功能。如果您想对WangEditor进行二次封装和使用，可以按照以下步骤进行： 1. 下载WangEditor 您可以从官网上下载WangEditor的源码文件，也可以使用npm进行安装。 2. 引入WangEditor 将WangEditor的JS和CSS文件引入到您的HTML文件中： ```html <link rel="stylesheet" type="text/css" href="path/to/wangEditor.css"> <script type="text/javascript" src="path/to/jquery.js"></script> <script type="text/javascript" src="path/to/wangEditor.js"></script> ``` 3. 创建编辑器实例 在HTML文件中创建一个div元素，作为编辑器的容器，然后通过JavaScript代码创建编辑器实例： ```html <div id="editor"></div> <script type="text/javascript"> var editor = new wangEditor('editor'); editor.create(); </script> ``` 4. 配置编辑器 您可以通过传递配置对象来配置编辑器，例如： ```html <div id="editor"></div> <script type="text/javascript"> var editor = new wangEditor('editor'); // 配置编辑器 editor.config.uploadImgUrl = '/upload'; editor.config.uploadImgFileName = 'image'; editor.config.menus = [ 'bold', 'italic', 'underline', 'strikeThrough', 'eraser', 'foreColor', 'backColor', 'justifyLeft', 'justifyCenter', 'justifyRight', 'table', 'code', 'undo', 'redo' ]; editor.create(); </script> ``` 5. 使用编辑器 编辑器创建完成后，您可以使用它提供的方法来操作文本内容，例如： ```javascript // 获取编辑器内容 var content = editor.$txt.html(); // 设置编辑器内容 editor.$txt.html('<p>这是新的内容</p>'); ``` 以上就是二次封装和使用WangEditor的基本步骤，您可以根据自己的需要进行配置和扩展。
评论 21
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值