wangEditor 轻量级 web 富文本编辑器

最新推荐文章于 2024-05-07 11:22:36 发布
最新推荐文章于 2024-05-07 11:22:36 发布
阅读量1.3k 收藏 7
点赞数 1
分类专栏： 前端 JS 文章标签： wangEditor web富文本编辑器 轻量级 
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_23375733/article/details/86593247
版权
前端 同时被 2 个专栏收录
27 篇文章 1 订阅
订阅专栏
JS
17 篇文章 0 订阅
订阅专栏

【介绍】

wangEditor 是基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费。

官网地址：http://www.wangeditor.com/

【下载】

【简单使用】

<!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="/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>

 【复杂使用】

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>wangEditor demo</title>
    <style>
    	/* 富文本编辑器高度 */
        .w-e-text-container {
            height: 40rem !important;
        }
    </style>
</head>
<body>
    <div id="editor">
        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
    </div>

    <!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
    <script type="text/javascript" src="./js/wangEditor.min.js"></script>
    <!-- 富文本 过滤word粘贴过来的字符串 -->
    <script type="text/javascript" src="./js/filterword.js"></script>

    <script type="text/javascript">
        var E = window.wangEditor;
        var editor = new E('#editor');
       
        // 自定义菜单配置
        editor.customConfig.menus = [
            'head',  // 标题
            'bold',  // 粗体
            'fontSize',  // 字号
            'fontName',  // 字体
            'italic',  // 斜体
            'underline',  // 下划线
            'strikeThrough',  // 删除线
            'foreColor',  // 文字颜色
            'backColor',  // 背景颜色
            'link',  // 插入链接
            'list',  // 列表
            'justify',  // 对齐方式
            'quote',  // 引用
            'emoticon',  // 表情
            'image',  // 插入图片
            'table',  // 表格
            'video',  // 插入视频
            'code',  // 插入代码
            'undo',  // 撤销
            'redo'  // 重复
        ];

        // 关闭粘贴样式的过滤
        editor.customConfig.pasteFilterStyle = true;

        // 忽略粘贴内容中的图片
        editor.customConfig.pasteIgnoreImg = false;

        // 自定义处理粘贴的文本内容
        editor.customConfig.pasteTextHandle = function (content) {
            //用来过滤word粘贴过来的字符串
            return returnHtml(content);
        }

        // 将图片大小限制为 3M
        editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;

        // 下面两个配置，使用其中一个即可显示“上传图片”的tab。但是两者不要同时使用！！！
        // editor.customConfig.uploadImgServer = '/upload';  // 上传图片到服务器
        editor.customConfig.uploadImgShowBase64 = true;      // 使用 base64 保存图片
        
        //上传图片的错误提示
        editor.customConfig.customAlert = function (info) {
            alert(info);
        }

        //自定义上传图片事件 
        editor.customConfig.customUploadImg = function (files, insert) {
            var name = files[0].name; //文件对象
            var suffix = name.substr(name.indexOf(".")); //文件后缀名
            
        }

        editor.create();
        
        //设置内容 创建编辑器之后，使用editor.txt.html(...)设置编辑器内容
        //editor.txt.html('<p>用 JS 设置的内容</p>');
        
        //追加内容
        //editor.txt.append('<p>追加的内容</p>');
        
        //清空内容
        //editor.txt.clear();
        
        //读取内容
        //editor.txt.html(); //读取 html
        //editor.txt.text()  //读取 text
        
    </script>
</body>
</html>

用来过滤word粘贴过来的字符串的js文件地址：https://github.com/hujinchen/filterword

更多编辑器的配置，小伙伴们可以去看官网哦~

涛々
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
wangEditor开发经历（踏坑之旅）
durex_er的博客
12-06 575
官网： wangEditor - 轻量级 web 富文本编辑器 先说下背景吧，领导安排做个富文本编辑器。在编辑好文章直接保存html用小程序展现出来。看了下设计图感觉挺简单的，脑子一热打算全部手写。结果写了没两行代码就写不下去了。然后领导发了个网址让参考着做：图文排版 H5 - 秀米XIUMI，大家可以看下 然后后从网上筛选能用的编辑器 最开始用的Quill，花了几天的时间配置加研究结果发现插入代码有巨坑。插入的是带样式，带边框的那种，插入进去后无法删除 大概的效果图是这样的。浪费了大约一周的时间吧.
wangeditor5在vue3中的全使用过程（图片上传、附件上传、工具栏配置、编辑器配置）
我要记录学习博客
09-18 1万+
官方文档地址：https://clinfc.github.io/wangeditor5-for-vue3/guide/说明为说明要编写这编博客文章？官方文档的使用手册对于新手来说比较的难看懂，写的也不够详细，源码的封装比较深。写博客的目的是为了详细讲解一个适合项目使用的wangeditor的基本全过程，适合直接复制使用和修改（原官方文档使用原生js编写）
vue中使用wangEditor富文本编辑器（踩坑）
热门推荐
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
07-31 2万+
wangEditor—— 轻量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器。 vue富文本 编辑器 总结
wangEditor 富文本详解
最新发布
weixin_64684095的博客
05-07 1588
可自定义编辑器、工具栏的尺寸、边框、z-index 等样式。<template>-- 边框 -->-- 工具栏 -->-- 编译器 --></div></style>如果想要“全屏”功能，则要求工具栏、编辑器 DOM 节点必须是同一层级，同时父级盒子设置 z-index: 999。<template>-- 工具栏 -->-- 编译器 --><Editor /></div></style>如果服务端的返回体，不满足所需格式，可以使用自定义插入。// res 即服务端的返回结果。
wangeditor封装使用
weixin_42878641的博客
12-14 2736
wangeditor定制化需求的封装使用
wangEditor 5 开源 Web 富文本编辑器
qq_31594665的博客
11-02 69
开源 Web 富文本编辑器，开箱即用，配置简单。
wangEditor的使用与下载
weixin_44037153的博客
01-08 2047
wangEditor富文本的下载以及配置信息：点击下载 wangEditor的使用方法 1.新建页面，引入 wangEditor.min.css wangEditor.min.js 以及 wangEditorConfig.js 2.在页面body标签输入代码 <div class="layui-input-block"> <div id="editor" name="editor"></div> </div> 3.查看 wangEdit
wangEditor-轻量级web富文本编辑器-兼容pc 移动等多平台
01-10
**wangEditor：轻量级Web富文本编辑器详解** wangEditor是一款专为现代Web应用设计的轻量级富文本编辑器，它具有良好的跨平台兼容性，能够在PC、移动设备等多平台上流畅运行。该编辑器以其配置简便、使用简单的特性...
wangEditor:wangEditor —— 轻量级web富文本框
05-11
轻量级 web 富文本编辑器，配置方便，使用简单! · · · · 项目介绍 wangEditor 是一款使用 Typescript 开发的 Web 富文本编辑器， 轻量、简洁、易用、开源免费。 兼容常见的 PC 浏览器：...
Web富文本编辑器：wangEditor
09-06
总结，wangEditor作为一款轻量级的Web富文本编辑器，其简洁的设计和强大的功能使其在Web开发领域占有一席之地。无论你是新手还是经验丰富的开发者，它都能成为你构建富文本输入功能的得力助手。通过深入理解和实践，...
wangEditor：wangEditor-轻量级web富文本框
02-06
轻量级web富文本编辑器，配置方便，使用简单。 官网 文档 当前是v4版本。想继续使用v3版本看。 浏览器兼容性 兼容常见的PC浏览器：Chrome，Firefox，Safar，Edge，QQ浏览器，IE11。 不支持移动端。 基本使用 NPM ...
wang-editor-v4:laravel-admin 插件 wangEditorV4版本富文本编辑器
08-05
laravel-admin 插件 wangEditor V4 版本富文本编辑器 首先声明，此插件是参照 进行修改而来 其次，在原有基础上做了些改进，同一页面支持多个富文本编辑器，且可单独配置改富文本编辑器的配置项。 laravel-admin 插件的富文本编辑器插件本人相中了 wangEditor ，但是相关的插件好像许久都没人维护了，奈何就自己动手吧，根据 wangEditor 的插件的源码与 laravel-admin 中扩展开发的文档，完成了此V4版本的 wangEditor 富文本编辑器插件。 V4版本与V3相比，还是好用很多了。 使用方法，此插件仅使用与 laravel-admin 1.* 版本 1.安装扩展 composer require jonexyz/wang-editor-v4 2.发布静态资源包 php artisan vendor:publish --tag=jo
轻量级富文本编辑器wangEditor结合vue使用方法示例
10-17
总的来说，wangEditor是一个轻量级且易于集成的富文本编辑器，与Vue.js结合使用可以方便地在Web应用中实现文本编辑功能，同时支持自定义配置和图片上传。通过以上示例，开发者可以快速掌握在Vue项目中使用wangEditor...
WangEditor5-将内容转为Word并下载
Ajie的博客
09-01 1167
WangEditor5内容转word并下载 样式会有偏差，需要慢慢调整。
【wangEditor 5】在线解析本地word，将内容展现在wangEditor中
cxk_ctrl的博客
08-25 4097
wangEdit 5在线解析word并将内容展现在富文本编辑器内
vue进阶——整合富文本编辑器wangEditor
秋书一叶的博客
06-03 1万+
wangEditor是一款基于JavaScript的富文本编辑器插件，用于在网页中实现所见即所得的编辑功能。它提供了丰富的编辑功能，包括文字样式设置、插入图片、插入表格、代码高亮等。wangEditor易于集成和使用，支持自定义配置和扩展。
免费JS富文本编辑器 总有一款会适合你
极客小俊
11-19 2万+
什么是富文本编辑器? 概述: javascript Text Editor ​ 我们平常在页面上写文章 或者 后台发布文章内容、或内容描述等、一直都是用的是富文本编辑器,包括很多论坛发帖的文字窗口也是典型的富文本编辑器, 它跟office中的word界面非常类似! 富文本编辑器的使用是与word非常类似的,所见即所得的排版方式,操作也与word类似，点击鼠标使用相应功能就行,对用户而言使用上相对比较简单，也比较容易进入状态! 如图 总的来说富文本编辑器就是一种基于JS并且可内嵌于web浏览器中所见即
Vue: wangEditor 编辑器使用示例
彭世瑜的博客
02-23 3413
文档 https://doc.wangeditor.com/ 组件封装 组件目录 . ├── Editor.vue ├── index.scss # 自定义样式文件 └── upload-image.js # 自定义图片上传 主文件 Editor.vue <template> <div ref="editor"></div> </template> <script> import E from 'wangeditor'; im
在 wangEditor 研发团队我都干了些什么 ？？？
qq_39235055的博客
01-22 781
???? "努力做一个积极向上乐观开朗的人" ????wangEditor官网首页 2020已过-2021已来，是时候回顾下这一年的成长，看看自己又成长了多少。再立一下 2021 年的 flag，然后2022年回头再回顾一下2021，哈哈哈。 一晃眼功夫2021了~~ 估计还好多小伙伴也和我一样，仿佛昨天还在老家过年，转眼又过一年了，又到了一年一度交成绩单的时候了（流下了菜鸡的眼泪~~）。 不过回顾这一年的工作，自己的确也收获了许多，我在思想上、学习上、工作上都取得了很大的进步，成长了不少，但
wangEditor富文本编辑器
07-30
wangEditor是一款基于JavaScript和CSS开发的Web富文本编辑器，它具有轻量级、简洁、易用的特点。相比于普通的文本编辑器，富文本编辑器可以输入超越文本的数据内容，包括上传图片、输入表情、字体大小字号调整、颜色设置、对齐方式等功能操作。[1] 在使用wangEditor富文本编辑器时，首先需要在代码中引入相关的文件。可以在editor.vue文件中添加以下代码： ```html <template> <div> <div ref="editor" style="text-align:left"></div> </div> </template> <script> import E from 'wangeditor' export default { name: 'MyEditor', data() { return { editorContent: '', editor: null } }, props: { value: { type: String, required: true } }, model: { prop: 'value' }, methods: { getContent: function () { alert(this.editorContent) }, _initEditor(that) { var editor = new E(this.$refs.editor) editor.config.zIndex = 100 editor.create() that.editor = editor } }, mounted() { this._initEditor(this) setTimeout(() => { this.editor.txt.html(this.value) }, 1000) } } </script> <style scoped> </style> ``` 然后，可以在需要使用富文本编辑器的地方注册组件，并创建编辑器。可以使用以下代码： ```html <!-- 首先给出一个div，并设id属性 --> <div id="div1"></div> <script type="text/javascript"> var E = window.wangEditor var editor = new E('#div1') // 创建编辑器 editor.create() </script> ``` 以上是使用wangEditor富文本编辑器的基本介绍和使用方法。[1][2][3]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值