js Range对象 contenteditable ctrl+enter(回车) 换行 富文本编辑器

最新推荐文章于 2025-08-19 20:33:21 发布
最新推荐文章于 2025-08-19 20:33:21 发布
阅读量1.5k 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： html5 web 文章标签： html5 web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_37613019/article/details/88814446
本文介绍如何使用JavaScript处理contenteditable元素，实现Ctrl+Enter换行功能，主要涉及DOM Range对象和事件监听。示例代码提供了一个简单的富文本编辑器，在Chrome浏览器中能完美运行。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

特别说明：这里没有做兼容，比较完美运行的是chrome浏览器

参考文章：

文档：

http://www.w3school.com.cn/xmldom/dom_range.asp

https://developer.mozilla.org/en-US/docs/Web/API/Range/setStart

博文：

https://blog.youkuaiyun.com/mafan121/article/details/79280529

https://www.jianshu.com/p/ad2f818cc3b0

这几篇文章对我帮助很大，十分感谢！

========================================================================

直接拷贝，查看最终效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*以下是必须存在的CSS*/        
            #test {
                overflow-y: auto;
                position: relative;
            }
            
            #test>p {
                height: 16px;
                margin: 0 !important;
  

最低0.47元/天 解锁文章

200万优质内容无限畅学
js添加html换行符,javascript – 在contenteditable div中的输入键上插入换行符
weixin_39752352的博客
06-09 906
我试图插入一个换行符,而不是当我在一个contenteditable div中输入时浏览器想要插入的内容.我当前的代码看起来像这样：if (e.which === 13) {e.stopPropagation();e.preventDefault();var selection = window.getSelection(),range = selection.getRangeAt(0),newl...
【WangEditor】使用富文本编辑器 WangEditor 实现用户自定义图片大小（改js源码）
热门推荐
寒泉
05-03 8万+
效果图 1、WangEditor本身提供的 “编辑图片” 功能，调整图片大小选项只能为30%，50%，100%。 2、修改 wangEditor.js 源码后，用户可以输入自定义大小。例如，50%效果如下： 再例如，20%效果如下： 修改方式 在 wangEditor.js 中进行修改，整体修改内容如下图： 主要分为两个部分的修改：输入框、事件方法。 1、增加输入框： 大约在源码的268...
js实现 ctrl + enter 换行，让可以编辑的div实现换行功能，并获取输入的光标
guoguo_love521的博客
12-27 3374
我觉的不说那么多了，直接上代码吧，大家看了可以给提提建议，谢谢 我们的功能中有@功能，有本地上传，图片上传，笑脸图标功能，这次先说换行的 <div ref="cTextareaRef" id="chatroom_footer_text_textarea" @keyup.ctrl.enter="lineFeed($event)" placeholder=...
div contenteditable编辑器 设置键盘Ctrl+Enter换行，Enter发送
_江屿_
04-01 558
div contenteditable编辑器 设置键盘Ctrl+Enter换行，Enter发送
区域可编辑contenteditable的问题总结
weixin_30823833的博客
06-09 292
一、如何在可编辑区域div的光标处通过点击事件来添加文本内容 下面的例子是可编辑div的区域添加文本内容和判断光标位置的方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> &lt...
electron实现编辑区域 ctrl+enter键换行
Alive_tree的博客
09-22 790
想要在enter 发送内容的情况下，客户按ctrl+enter实现换行 <div class="edit-panel" contenteditable="true" @keyup.ctrl.enter="lineFeed" ref="editor" ></div> 对应的lineFeed()函数 lineFeed(){ if(this.sendHotKey === "En
div,contenteditable编辑器之ctrl+enter换行，enter发送
weixin_30814319的博客
02-16 617
<!doctype html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta charset="utf-8"> <title>contenteditable,Ct...
富文本内容换行
05-07
### 富文本编辑器中的换行实现方法 在富文本编辑器中，换行是一个常见的需求。通常可以通过监听键盘事件并捕获特定按键组合来触发换行操作。以下是几种常见的方式： #### 使用 `document.execCommand` 方法 一种...
#基于原生JS的交互式代码高亮编辑器实现教程
最新发布
qq_42386733的博客
08-19 791
本文介绍了一个轻量级交互式代码高亮编辑器的实现方案。该编辑器采用原生JavaScript开发，支持语法高亮、行号显示、主题切换等核心功能，适合嵌入博客、文档等场景使用。 项目技术栈包括HTML5/CSS3/JavaScript，使用Prism.js实现语法高亮，prettier提供代码格式化功能。编辑器界面分三个区域：顶部工具栏（语言选择/主题切换）、中间编辑区（行号+代码）、底部状态栏（语言/字符数）。 核心功能实现包括：通过contenteditable属性创建可编辑区域，Flex布局实现行号与代码同步
contentEditable,window.getSelection详解---可编辑div，容器，设置/获取光标位置，光标处插入内容及光标的操作
codingWeb的博客
11-07 9328
这周碰到一个骚东西，contentEditable ，它是用来指定一个元素是否是可编辑的，这也是富文本编辑器实现的底层支持，网上关于这部分东西的资料比较少或者不全，所以我来整理下关于这个属性，和可编辑区域的一些操作吧，比如获取光标位置，设置光标，往可编辑区域光标处插入内容等等 HTML中的contentEditable的属性可以打开某些元素的可编辑状态．也许你没用过contentEditable属性．甚至从未听说过．contentEditable的作用相当神奇．可以让div或整个网页，以及span等等元素
js触发ctrl+enter键
11-10
js触发ctrl+enter键,js触发ctrl+enter键的代码
html，js div开启contenteditable=“true“属性可编辑时，按回车键会出现div，如何禁止生成
唐策的博客
08-30 1378
方案一：让改元素以下只显示文本就不会显示其他标签了 .read-write-plaintext-only { //纯文本 -webkit-user-modify: read-write-plaintext-only; } 方案二：通过jquery的事件，手动生成标签 $('#chat_editor[contenteditable]').keydown(function(e) { if (e.keyCode === 13) { document.execCommand('in
js css 文字换行显示
yht2015的博客
07-24 4815
js css 文字换行显示 在开发过程中会碰到表单输入框中含有换行 空格字符的数据保存后，在前端也能展示效果。实现方式有几种： 问题： 1、直接用表单输入框展示文字 2、用css方式 .text{ border: 1px solid #e1e1e1; padding: 5px; white-space: pre-wrap; word-break: break-all; } 效果： 3、用js // html <div id="text"></div> // java
输入框回车生成标签并可以删除biu~~biu~~
山塘小鱼儿的博客
03-08 842
参考地址： 直接上代码： <!DOCTYPE html> <html lang="zh-CN"> <head> <title>biu~~biu~~</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width"
Javascript用回车实现换行功能
weixin_34355559的博客
03-28 220
<html><head><title>UntitledDocument</title><metahttp-equiv="Content-Type"content="text/html;charset=big5"></head><body><formname="form1"method="post...
js正则匹配替换，一对闭合html标签
xiaoxiazi_32的博客
07-24 1557
let str = `<div> <h1>正则测试</h1> <p class=""> <style>.icon{width:100%;}</style> 测试正则匹配替换 </p> <br/> <p class=""> <style>.icon{width:100%;}</style> 测试正则匹配替换 </p> </d.
js按ctrl+enter换行，让可编辑的div换行，并获取输入焦点光标
u011511086的专栏
11-17 7552
$(document).keydown(function (e) { var e = e || window.event, ec = e.keyCode || e.which; if (!e.ctrlKey && 13 == ec) { //console.log('发送'); sendMsgTal(); return false;
html，js div开启contenteditable属性可编辑时，按回车键会出现div，如何禁止生成
PrimaryColor
03-12 5246
div开启contenteditable属性时，当前div变成了一个可编辑的状态，按下回车键会生成一个div，如何禁止生成： 方案一：让改元素以下只显示文本就不会显示其他标签了 .read-write-plaintext-only { //纯文本 -webkit-user-modify: read-write-plaintext-only; } 方案二：通过jquery的事件，手动生成标签 $('#chat_editor[contenteditable]').keydown(functi
vue可输入div contenteditable,ctrl+enter换行,enter不换行
03-29
可以通过监听input事件和keydown事件来实现。 1. 监听input事件，将输入的内容同步到data中的content属性中。 ``` <div contenteditable @input...这样就可以实现可输入div，Ctrl+Enter换行，Enter不换行的效果了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值