网站文字和代码编辑解决方案

Question

我花了几天时间尝试在我的网站中加入不同的编辑器。似乎没有人能胜任这项工作。我已经深入研究了他们的代码，而且有些事情无效。

这是我的要求：

• 基本格式，如大小，粗体，斜体，删除线，下标和上标
• 通过ajax上传图片，调整图片大小和定位
• 链接处理
• 代码标记或样式div，右上角有一个下拉列表，用于选择语法突出显示。在离开代码标签/样式div时，文本通过ajax更新以包含行号。
• 粘贴但编码用户代码

我尝试的编辑的主要问题是：

回车符/换行符不会将光标移出当前元素，如果有，则会重新创建当前元素或在其自身内重新创建当前元素。

他们使用了许多不必要的代码，例如多个嵌套的div。哎呀看看你得到的一些来源<div><div><div><div><div><div>Hello World</div></div></div></div></div></div>

它们不适合我需要的怪癖。

这是我的想法的图像，它只是一个敲门声：

所以我的想法是使用内容Editable div和regex来跟踪代码标签并实现我自己的功能。但是我需要在所有浏览器中获得内容div的选择开始和长度。我怎么能这样做？

同时替换内容div中的文本。

任何建议，想法或帮助都会非常感谢你。

Answer 1

实际上很容易。您只需要一个名为<div/>的{​​{1}} contenteditable。从那时起，您可能遇到的唯一浏览器问题是可靠地将HTML插入到该div中。但我之前看到它运作良好，所以它不应该是一个真正的问题。

既然你提到了怪癖模式，我担心没有黑色黑客是不可能的，但是，有一个简单的解决方法：将你的编辑器（div）放在一个单独的页面中并将其嵌入到iframe中。

关于图像上传部分，您的服务器需要处理它。从编辑的角度来看，它只是一个<img/>标签。