轻量级在线文本编辑器 wangEditor的 一句话简单使用，文本编辑不用愁

最新推荐文章于 2024-06-26 17:14:46 发布
最新推荐文章于 2024-06-26 17:14:46 发布
阅读量903 收藏
点赞数
分类专栏： 网站开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42550800/article/details/86767499
版权

wangEditor是最近发现的一个轻量级文本编辑器如果无特殊需求可以做到一句话调用

使用效果

 代码如下：只需要引用一个js代码和初始化的js和一个div即可

<!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="https://unpkg.com/wangeditor@3.1.1/release/wangEditor.min.js"></script>
    <script type="text/javascript">
        var E = window.wangEditor
        var editor = new E('#editor')
        // 或者 var editor = new E( document.getElementById('editor') )
        editor.create()
    </script>
</body>
</html>

 

孙一笑
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Spring Boot 大型线上商城项目实战教程:富文本编辑器 wangEditor 介绍及整合详解
sybh的博客
11-09 477
在介绍富文本编辑器的之前，先思考一下如何实现HTML页面的数据获取。在form表单中通常会设置input标签或者textarea标签，对于一些简单的需求，比如如登录信息的获取，使用input标签即可，而文字多的内容使用textarea标签获取。但是，当碰到需要排版复杂的图文混合的内容或者更多内容录入的时候，这两个标签就无法满足需求了。某些产品经理可能会问开发人员：为什么用Word或者WPS能做的事情，在网站上就不能做呢？这时候开发人员往往无言以对。这本身就是产品和技术实现的区别。
如何在富文本编辑器中实现自定义一键排版功能
flyover2017的博客
06-29 2681
前言 今天写这篇文章主要是解决如何在vue中使用富文本编辑器进行新增一个自定义菜单，通过富文本上传的图片实现一键排版功能使图片默认样式居中定宽处理，文字首行缩进等功能，从源头上杜绝门户网站上显示用户编写、复制等文章图片排版错乱等问题； 1、新建独立文件wLayoutMenu.js 首先新建一个独立的文件wLayoutMenu.js，在文件内编写如下代码内容 /** * @module wLayoutMenu 一键排版的按钮 * @author cy * @d...
wangEditor编辑器
03-11
很好用的富文本编辑器wangEditor,设置内容、获取内容、上传图片、使用 AMD 加载、使用 textarea、onblur、onfocus、onchange、获取 JSON、配置表情、多语言、CSS-Reset
即学即用的富文本编辑器---wangEditor
tomtomgogo的博客
01-19 2490
在项目编写中，会遇到编写富文本编辑器。这里推荐一个比较容易上手且全面的富文本编辑器--wangEditor：里面拥有加粗、下划线、斜体、大小写、字体字号、排序、图片上传、表格等等文本编辑功能。
WANGEDITOR配置及功能实现详解
最新发布
alisky119的博客
06-26 902
网上的资料大部分内容都是重复的，本身也没有提供太好的方案，都是一些开源的方案，到不是说开源的方案不行，主要就是用起来各种问题，没人解决，也没有人提供技术支持，集成这块可能花的时间成本比较高。从word中复制内容，从word中复制图片和文字，然后粘贴到wangEditor编辑器中，粘贴后图片自动上传到服务器中，能够看到每一张图片的上传进度，已经上传的大小，剩余时间，上传速度。上传后返回文字和图片HTML，自动将文字和图片HTML添加到编辑器中，用户能够直接看到粘贴后的效果，保留文字样式，字体大小，字体颜色。
Vue中使用 WangEditor 编辑器的详细教程
qq_42704945的博客
08-08 7221
在富文本编辑器中，你可以通过自定义样式和配置来定制编辑器的外观和行为。以下是一个示例，展示了如何自定义编辑器的样式和配置：// 自定义编辑器的样式 editor . config . height = 400;// 配置编辑器的相关选项 editor . config . uploadImgServer = '/api/upload';// 初始化编辑器 editor . create();} , };
wangEditor（轻量级富文本编辑器）
Memory_wz0125的博客
10-09 427
官网：www.wangEditor.com 文档：www.kancloud.cn/wangfupeng/wangeditor3/332599 源码：github.com/wangfupeng1988/wangEditor 点击下载最新版的压缩包，解压之后引用文件（具体请看文档）。 菜单栏和编辑区域分离： <!DOCTYPE html> <html> <...
轻量级富文本编辑器wangEditor结合vue使用方法示例
12-29
使用npm下载： `npm install wangeditor` 2、 创建实例 （1）基本用法： <div id=editor class=editor></div> [removed] import E from 'wangeditor' export default { name: 'editor', mounted () { ...
sublime轻量级文本编辑器
04-17
sublime轻量级文本编辑器sublime轻量级文本编辑器sublime轻量级文本编辑器sublime轻量级文本编辑器sublime轻量级文本编辑器sublime轻量级文本编辑器sublime轻量级文本编辑器sublime轻量级文本编辑器sublime轻量级...
轻量级富文本编辑器，不需要上传图片，视频，直接插入
01-02
标题中的“轻量级富文本编辑器，不需要上传图片，视频，直接插入”指的是一个特别设计的文本编辑器工具，它具有轻巧高效的特点，并且在处理多媒体内容时，如图片和视频，用户无需经过传统的文件上传步骤。这种编辑器...
wangEditor-轻量级web富文本编辑器-兼容pc 移动等多平台
01-10
wangEditor是一款专为现代Web应用设计的轻量级富文本编辑器，它具有良好的跨平台兼容性，能够在PC、移动设备等多平台上流畅运行。该编辑器以其配置简便、使用简单的特性，受到了开发者们的广泛青睐。在本文中，我们...
wangEditorExt:wangEditorExt，为wangEditor增加全屏编辑，查看源码功能
03-23
wangEditorExt wangEditorExt，为wangEditor增加全屏编辑，查看源码功能 /** * wangEditor扩展,增加全屏 查看源码功能 * 传入均为 editor实例,非css选择器 * 依赖jquery 如果是layui之类的需要在layui.use方法中使用 * 全屏功能需要引入 wangEditor-fullscreen.css * @author mrzhou@miw.cn * @date 2018.8.30 am 10:00 * 2018.9.18 pm 16:00 增加同页多编辑器支持 * 使用方法: * E.fullscreen.init(editor); * E.viewSource.init(editor); */ 附上一个测试样例 <!DOCTYPE html> <html lang="zh-CN">
富文本编辑器的一键排版功能
weixin_34032779的博客
06-15 2355
在做CMS系统的时候，用户常常会从word粘贴一些东西到编辑器中，早起的富文本编辑器也都提供了去除word格式的功能（尽管有时候比较难用），甚至有时候用户要求打开一个本地的word文件的时候系统能够直接把word文件转换为网站上可以直接浏览的内容，他们不关心你中间用了什么技术，也有人专门对此做了一些前端控件的开发，然后按用户进行授权，似乎销售成绩还不错。网络上有很多自称为“一键排版”的小工具，只是...
重构wangEditor（web富文本编辑器），欢迎指正！
weixin_30566063的博客
12-22 246
提示：最新版wangEditor请参见：wangEditor.github.io或者https://github.com/wangfupeng1988/wangEditor 1. 前言 （下载源码、使用说明、demo，请参见：https://github.com/wangfupeng1988/wangEditor） 前段时间做过一个基于bootstrap的富文本编辑器...
wangeditor 富文本编辑器--只读
ziyun_zeng的博客
06-02 4190
wangeditor--设置只读
wangEditor怎么设置只读？
m0_54066656的博客
04-12 658
问了GPT没找到答案，去网上搜也没有找到方法，有人发是发了，但是完全没有说怎么做。不过，目前是有个问题的，那就是在加载的时候，你是可以点击的。这次是禁止输入，官方文档虽然发了，但是还是老问题。还是通过了CSS去解决问题，CSS永远滴神。还想着站在巨人的肩膀上的，没想到，巨人躺平了。无奈，只能自己根据人家的说辞去进行试验了。当然，加载完之后，就不能点击了。还是找个时间学习一下吧。
国内5个好用的在线文档编辑器推荐
2301_78368467的博客
04-17 1421
总的来说，HelpLook有强大的文档管理和搜索功能、注重用户体验；腾讯文档有实时协作与社交属性，丰富的编辑功能；金山文档：具备兼容性与稳定性，强大的文字处理和排版功能；石墨文档：响应很快的协作编辑，丰富的办公文档形式；飞书文档：强大的创作与协作工具，嵌入了多种网页功能。如果你还在为找不到好用的在线文档编辑器而烦恼，不妨试试这些工具吧！
wangeditor -- 富文本编辑工具
i_Satan的博客
04-05 2467
在线文档 https://www.wangeditor.com/doc/ 参考文章 感谢@Yan_an_n 这个作者 安装 npm install wangeditor 使用 注意:尽量将实例的创建和挂载放在 mounted 生命周期中; 该报错说明,实例需要挂载的dom元素还没有生成; //方式一: 使用id命名容器 <div id="editor"></div> //方式二:获取dom元素 <div ref="editor">&l
wangeditor一键排版功能
05-01
wangeditor是一款功能丰富的富文本编辑器，它的一键排版功能为用户提供了便利。在使用该功能时，用户可以快速地对文字进行格式化、对齐、缩进、行间距等常见的排版操作，而不需要费时费力地手动调整每个段落的格式。这个功能的操作简单，只需在编辑器的工具栏中点击相关按钮即可，非常适合不熟悉排版技巧的用户。 其中，一键排版功能最大的亮点是能够快速调整行距、段落间距和文字对齐方式。用户只需要选中需要修改的内容，然后点击一键排版的相关按钮，就可以快速地实现文字格式的调整，而无需逐一手动修改。 总的来说，wangeditor的一键排版功能为用户提供了非常方便的排版解决方案，尤其对于不熟悉排版技巧的用户来说，能够显著地提高写作效率和排版效果。因此，这个功能在编辑器的应用中得到了广泛的认可和使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值