Javascript 文本编辑器基本功能

发布于 2025-01-04 12:57:59 字数 417 浏览 2 评论 0原文

我正在尝试用 Javascript 编写自己的 WYSWG 文本编辑器,但我正在努力解决一个似乎相当基本的问题。

给定内容可编辑区域内的文本选择,例如管道“|”之间的文本这里:

|我想要的一些文本编辑或| select

我可以弄清楚我需要在这里做什么来基本上移动结束范围标签,以便我的选择包含在斜体范围中。但是,我需要考虑很多其他情况,例如如果我想删除跨度,在已经包含打开或关闭跨度的区域周围添加另一个跨度,考虑打开/关闭我周围的其他标签类型选择等。

是否有某个库可以为我提供此选择/替换逻辑?还是我要求太多了?使用网络上已有的众多编辑器之一会更好吗?

我真的不想使用最后一个选项,因为我发现的大多数选项看起来都非常重,因为我真的只想要一些自定义编辑功能。

I'm attempting to write my own WYSWG text editor in Javascript, but I'm struggling with what seems to be a rather basic problem.

Given a selection of text inside a contentEditable area such as what is between the pipes '|' here:

<span class="italic">Some text that |I would want</span> to edit or| select

I can figure out what I need to do here to essentially move the closing span tag so that my selection is included in the italic span. However, there are a plethora of other cases that I need to account for such as if I want to remove the span, add another span around an area that already contains an opening or closing span, account for opening/closing other tag types around my selection, etc.

Is there some library that exists anywhere that provides this selection/replace logic for me? Or am I asking too much? Would I be better off using one of the many editors already available on the web?

I would really like to not have to use the last option since most of the ones I've found seem extremely heavy weight since I really only want a few custom editing functions.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

浮云落日 2025-01-11 12:57:59

查看 Rangy 及其模块
http://code.google.com/p/rangy/
http://code.google.com/p/rangy/#Modules

ContentEditable 是一个令人讨厌的野兽,在浏览器之间有许多怪癖。 Rangy 试图解决这个问题,但合作起来仍然很困难。我的项目有很多自定义规则,因此我们必须使用像 Rangy 这样的较低级别的库。与 jQuery 结合起来,它的功能非常强大。

Check out Rangy and its modules
http://code.google.com/p/rangy/
http://code.google.com/p/rangy/#Modules

ContentEditable is a nasty beast with many quirks between browsers. Rangy tries to solve that but it's still difficult to work with. My project has a lot of custom rules so we had to use a lower level library like Rangy. Combined with jQuery it is very powerful.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文