wangeditor 富文本编辑框的问题

最新推荐文章于 2024-08-07 15:32:26 发布

思绪万千133

最新推荐文章于 2024-08-07 15:32:26 发布

阅读量1.1k

点赞数

文章标签：组件

本文链接：https://blog.csdn.net/u013611033/article/details/103424167

版权

wangeditor 富文本3.0的ios兼容问题

wangeditor使用 contenteditable="true",div模拟input框输入内容，这个属性存在兼容性问题，需再设置-webkit-user-select:text;

3.0不支持换行

菜单满溢后换行

.w-e-toolbar{flex-wrap: wrap;}

样式修改需要在App.vue内修改

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

思绪万千133

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

使用wangEditor遇到的浏览器不兼容问题

smart_dream

05-17

316

输入中文，打印不出来值，且输入的中文进行回车键或空格键后，内容会被清空。输入数字和英文没问题，可以正常打印出来值。在2345浏览器中访问官网demo。复制粘贴的文字也可以正常打印出来。

wangEditor 富文本编辑器的使用

q1ngqingsky的博客

11-17

983

前因：因公司动态新闻模块需要，不浪费开发人力、时间等成本，决定选择一款富文本编辑器，由运营人员来编辑文本实现新闻的发布后果：最终选择了wangEditor wangEditor 是一款基于javascript和css开发的 Web富文本编辑器，轻量、简洁、易用、开源免费。兼容常见的 PC 浏览器：Chrome，Firefox，Safar，Edge，QQ 浏览器，IE11。不支持移动端更多内容可查阅手册： Introduction · wangEditor 用户文档https:/

参与评论您还未登录，请先登录后发表或查看评论

wangEditor-轻量级web富文本编辑器-兼容pc 移动等多平台

01-10

量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器。

wangEditor2版本兼容IE8浏览器

03-29

包含wangEditor2源代码，及代码说明，适用谷歌，火狐，ie8等浏览器

WangEditor自定义新元素，并解决自定义元素中换行无法消除样式的问题

weixin_45012973的博客

08-07

1260

基于WangEditor提供的API自定义新元素，并编写插件解决一些问题

wangEditor2兼容IE8初始化以及获取内容等方法

qq_38759137的博客

07-23

2007

wangEditor2的默认样式 1.下载并将wangEditor2整个文件夹放在项目中,并在目标文件处先引用IE8支持的jquery1.x版本，再引用wangEditor.min.js 2.使用div容器 <div id="editor" style="height: 300px;"></div> 3.将wangEditor2加载到div中 var ...

wangEditor富文本编辑框的基本使用

ersorn

06-18

2301

1、禁用编辑和启动编辑功能 editor.$textElem.attr('contenteditable', false); //禁用 editor.$textElem.attr('contenteditable', true); //启用 2、清空富文本框 editor.txt.clear(); 3、获取内容 editor.txt.html() 4、设置内容 ed...

HTML前端wangEditor富文本编辑器demo（jQuery）

02-14

wangEditor就是这样一个强大的富文本编辑器，它专为JavaScript和jQuery设计，同时也能很好地融入Vue等现代前端框架。本示例是一个基于jQuery的wangEditor应用，具有丰富的功能，包括图片可拖拽调整大小，以及方便地...

wangeditor-antd:基于ant-design风格重构的wangeditor富文本编辑器

05-01

基于ant-design风格重构的wangeditor富文本编辑器,主要趋于样式重构，javascript部分未修改。更新日志计划跟新适配Vue3 风格统一为 ant-design-vue 2.0风格修改部分说明重构图标重构下拉样式重构input输入框 ...

【JavaScript源代码】Vue中使用wangeditor富文本编辑的问题.docx

12-30

在 Vue 中集成富文本编辑器，如 wangeditor，可以帮助用户在应用程序中创建和编辑复杂格式的文本内容。wangeditor 是一个基于 JavaScript 和 CSS 的轻量级、简洁且易用的富文本编辑器，它开源且免费，适用于各种 Web...

WangEditor富文本编辑器图片拖放

落下香樟树

10-22

2801

富文本编辑器（图片可以100%宽屏）业务需求：根据业务要求，需要能够上传图片，且上传的图片能在移动端中占满屏幕宽度，故需要能等比缩放上传的图片，还需要能拖拽、缩放、改变图片大小。尝试多个第三方富文本编辑器，很难找到一个完美符合自己要求的编辑器。经过多次尝试，最终选择了wangEditor富文本编辑器。最初使用的是vue2Editor富文本编辑器，vue2Editor本身是不支持图片拖拽的，但是提供了可配置图片拖拽的方法，需要借助Quill.js来实现图片拖拽。虽然满足了业务需求，但是在移动端展示的效果

ckeditor纯数字和纯字母不能换行问题

02-24

ckeditor纯数字和纯字母不能换行问题

wangEditor修改默认图标和自定义菜单（React）

qq_33297737的博客

10-27

4756

wangeditor自定义菜单图标，上传图片

【我的产品观】开发wangEditor一年总结

weixin_34403693的博客

11-03

195

1. 引言　　标题说是一周年，其实是不是正好是一周年，我也忘记了，光从github的提交记录看也不准确。印象中觉得，如果要论想法，到现在一年多了，如果要论实际写代码，可能差不多正好一年。　　从8月底在济南离职来到北京，一直熟悉新的工作环境和工作节奏，好久没有更新博客了。今天来总结一下这一年的wangEditor的成长过程，以及我自己在这一年的时间，对于技术、产品等各方面的思考。　　感觉...

WangEditor作为公共组件及遇见问题

qwerdfbs的博客

11-17

367

WangEditor作为公共组件及遇见问题

wangEdtior粘贴内容有换行时报错解决

qq_41541368的博客

01-29

1283

粘贴内容有换行时浏览器会报错，Cannot read property ‘nodeName’ of undefined 去官网说明文档寻找解决办法时，发现靠谱点的只有粘贴过滤相关api，但是试了一边都不太行，最后只能选择使用自定义处理粘贴的文本内容。这是官方文档的自定义处理 const E = window.wangEditor const editor = new E('#div1') // 配置粘贴文本的内容处理 editor.config.pasteTextHandle = function

contentEditable属性为true的前端编辑器

notbaldness的博客

03-05

1885

前端常用的输入文本内容便是input与textarea，但是有一些他们有一些局限性，比如input只能输入一行，textarea虽然可以通过设置rows属性来动态调整高度，但是他们都不能存在多种格式的内容，更不能有标签一样样式了。浏览器对于一些dom元素有一个属性contenteditable可以快速将该元素变成可编辑的输入框。

Vue3+wangEditor富文本组件报错无效节点

weixin_64863035的博客

04-05

645

所以建议大家如果代码绝对没问题的情况下，碰到这个问题，可以卸载重装这个版本（全文其他都是废话）

wangEditor富文本编辑器（第一章：基础使用）

DW14687的博客

02-16

2094

表单系列——富文本 提示：后台系统中经常会遇见富文本，其中包括图片的上传，添加样式、链接等。本文使用wangEditor实现富文本功能文章目录表单系列——富文本前言一、如何使用？二、使用步骤1.安装wangEditor2.读入数据总结前言一、如何使用？第一次接触富文本，那么什么是富文本呢？ 富文本是一种类似DOC格式（Word文档）的文件，有很好的兼容性，使用Windows“附件”中的“写字板”就能打开并进行编辑。直观点，就是下图这样可以自己调节格式的就是富文本。本文使用wangEd

flask实现wangeditor富文本编辑前后端

最新发布

10-08

Flask是一个轻量级的Python Web应用框架，而WangEditor是一款基于百度富文本编辑器的前端组件。要在Flask项目中集成WangEditor，你可以按照以下步骤操作： 1. **安装依赖**: - 首先需要在你的项目中安装`Flask`和`flask-wtf`库（用于处理表单），可以使用`pip`命令： ``` pip install Flask Flask-WTF ``` 2. **配置HTML模板**: - 在Flask视图对应的HTML模板文件（通常是`templates`目录下的HTML）中引入WangEditor的CSS和JS资源。例如，在`base.html`里添加头部链接和脚本引用： ```html <link rel="stylesheet" href="{{ url_for('static', filename='wangeditor/wangEditor.min.css') }}"> <script src="{{ url_for('static', filename='wangeditor/wangEditor.min.js') }}"></script> ``` 3. **初始化WangEditor**: - 使用JavaScript在页面上创建编辑器实例。通常会在需要富文本编辑的地方插入一个`<textarea>`标签，并通过AJAX请求从后端获取初始内容： ```html <div id="editor">  <textarea id="content" style="display:none;"></textarea> </div> <script> var editor = UE.getEditor('editor', { initialContent: // 后端返回的富文本数据 }); </script> ``` 4. **Flask视图函数**: - 创建一个路由接收并处理编辑器的数据。这可能包括接受POST请求，处理用户输入，保存到数据库，然后返回更新后的HTML内容供前端渲染： ```python from flask import render_template, request, jsonify @app.route('/api/edit', methods=['GET', 'POST']) def editor_view(): if request.method == 'POST': content = request.form.get('content') # 处理内容后存入数据库 updated_content = process_content(content) return jsonify(updated_content=updated_content) else: # 如果是GET请求，返回初始编辑器内容 content = get_initial_content_from_database() return render_template('your_template.html', content=content) ``` 5. **数据交互**: - 利用Ajax异步请求与上述视图进行通信。当用户编辑完内容点击提交时，前端发送POST请求更新内容。 6. **安全性注意事项**: - 对于敏感数据，记得进行安全过滤和防止XSS攻击。