0

我花了几天时间尝试在我的网站中加入不同的编辑器。似乎没有人能胜任这项工作。我已经深入研究了他们的代码,但一件事或另一件事不起作用。

这是我的要求:

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

我尝试过的编辑器的主要问题是:

回车/换行不会将光标移出当前元素,如果这样做,它们会重新创建当前元素或在其自身内重新创建当前元素。

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

他们不会在我需要他们的怪癖中工作。

这是我的想法的图像,它只是一个敲门声:

在此处输入图像描述

所以我的想法是使用内容可编辑的 div 和正则表达式来跟踪代码标签并实现我自己的功能。但我需要在所有浏览器公司的怪癖中获取内容 div 的选择开始和长度。我怎样才能做到这一点?

还替换内容 div 中的文本。

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

4

1 回答 1

1

其实很容易。你只需要一个<div/>名为contenteditable. 从那时起,您可能遇到的唯一浏览器问题就是将 HTML 可靠地插入到该 div 中。但我之前已经看到它运行良好,所以它不应该是一个真正的问题。

既然您提到了怪癖模式,恐怕没有色调黑客是不可能的,但是,有一个简单的解决方法:将您的编辑器(div)放在一个单独的页面中并将其嵌入到 iframe 中。

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

于 2012-06-16T21:50:40.663 回答