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

最新推荐文章于 2024-04-01 15:07:25 发布
原创 最新推荐文章于 2024-04-01 15:07:25 发布 · 1.5k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html5 #web

本文介绍如何使用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 904
我试图插入一个换行符,而不是当我在一个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 3373
我觉的不说那么多了，直接上代码吧，大家看了可以给提提建议，谢谢 我们的功能中有@功能，有本地上传，图片上传，笑脸图标功能，这次先说换行的 <div ref="cTextareaRef" id="chatroom_footer_text_textarea" @keyup.ctrl.enter="lineFeed($event)" placeholder=...
div contenteditable编辑器 设置键盘Ctrl+Enter换行，Enter发送
_江屿_
04-01 556
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 789
想要在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` 方法 一种...
contentEditable,window.getSelection详解---可编辑div，容器，设置/获取光标位置，光标处插入内容及光标的操作
codingWeb的博客
11-07 9321
这周碰到一个骚东西，contentEditable ，它是用来指定一个元素是否是可编辑的，这也是富文本编辑器实现的底层支持，网上关于这部分东西的资料比较少或者不全，所以我来整理下关于这个属性，和可编辑区域的一些操作吧，比如获取光标位置，设置光标，往可编辑区域光标处插入内容等等 HTML中的contentEditable的属性可以打开某些元素的可编辑状态．也许你没用过contentEditable属性．甚至从未听说过．contentEditable的作用相当神奇．可以让div或整个网页，以及span等等元素
若依自带的富文本回车没效果
01-25
在处理若依框架中的富文本编辑器时，如果发现按下回车键无响应，则可能是由于以下几个原因造成的： - 编辑器初始化配置不当，导致默认行为被覆盖或禁用。 - JavaScript事件监听冲突，其他脚本可能干扰了正常的按键...
js触发ctrl+enter键
11-10
js触发ctrl+enter键,js触发ctrl+enter键的代码
html，js div开启contenteditable=“true“属性可编辑时，按回车键会出现div，如何禁止生成
唐策的博客
08-30 1376
方案一：让改元素以下只显示文本就不会显示其他标签了 .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 4814
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 217
<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 1554
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 7551
$(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 5241
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属性中。 ``` <template> <div contenteditable @input="handleInput" v-model="content"></div> </template> <script> export default { data() { return { content: '' } }, methods: { handleInput(event) { this.content = event.target.innerHTML } } } </script> ``` 2. 监听keydown事件，判断按下的键是否为Enter和Ctrl，如果是，就在内容后面添加<br>元素，否则继续输入。 ``` <template> <div contenteditable @input="handleInput" @keydown="handleKeyDown" v-model="content"></div> </template> <script> export default { data() { return { content: '' } }, methods: { handleInput(event) { this.content = event.target.innerHTML }, handleKeyDown(event) { // 判断按下的键是否为Enter和Ctrl if (event.keyCode === 13 && event.ctrlKey) { event.preventDefault() this.content += '<br>' } } } } </script> ``` 这样就可以实现可输入div，Ctrl+Enter换行，Enter不换行的效果了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值