代码之家 › 专栏 › 技术社区 › brad

内容状态

contenteditable wysiwyg css html javascript

brad · 技术社区 · 14 年前

内容状态

所见即所得编辑器生成的标记非常糟糕。它充斥着样式属性,甚至常常不是有效的HTML(缺少结束标记、样式重叠等)。是否有任何既定的解决方案来解决 contenteditable ? 如果没有,我该怎么做呢?

无效的HTML

例如,在一个流行的富文本编辑器中输入一个无序列表,后跟一行文本之后,我将看到以下HTML:

<ul><li>foo</li><li>bar</li></ul><div>baz

孩子们去哪儿了 div

另一位编辑发表了以下文章:

<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 0pt 36pt; text-indent:-18pt"><span style="color:#000000; font-family:Arial; font-size:11pt; font-style:normal; font-weight:normal; text-decoration:none">â</span><span style="font:7.0pt &#39;Times New Roman&#39;">     </span><span style="color:#000000; font-family:Arial; font-size:11pt; font-style:normal; font-weight:normal; text-decoration:none">Lorem</span></p><p style="font-size:11pt; line-height:115%; margin:0pt 0pt 0pt 36pt; text-indent:-18pt"><span style="color:#000000; font-family:Arial; font-size:11pt; font-style:normal; font-weight:normal; text-decoration:none">â</span><span style="font:7.0pt &#39;Times New Roman&#39;">     </span><span style="color:#000000; font-family:Arial; font-size:11pt; font-style:normal; font-weight:normal; text-decoration:none">ipsum</span></p>

这是有效的标记,但它的语义可怕!编辑器插入了 字面意义的 项目符号字符。作为一名开发人员,我不知道如何处理标记 内容可编辑 已经产生了。就造型而言,它是完全无用的。

替换

这就不可能了。有人在谈论解决这些问题的方法吗?我怎么能参与进来。

我想我还没完全弄清楚。我不是在想办法四处走走 内容可编辑 的问题。我发现了很多,包括下面提到的大多数。我想找出这些问题的根本原因。为什么是 内容可编辑 这么坏?是因为技术问题还是遗留代码问题?此外,正在做什么来修复它,这项工作在哪里进行?

上面第二个例子中的HTML来自googledocs编辑器。然而,作为 AlfonsoML 下面指出,googledocs不使用 内容可编辑 在他们的编辑里。他们的技术被解释 here

6 回复 | 直到 4 年前

Dave Jarvis James Eichele 11 年前

我怀疑这是因为几个具体的原因:

1.)定义它的HTML5标准没有定义它应该输出什么,让每个实现自行决定。

4.)看起来IE浏览器也做得差不多,IE一开始什么都没做对。它仍然以怪癖和“兼容性”模式的形式延续着它的传统。

5.)它实际上只在CMS系统和论坛/评论框中使用,通常这些系统的实现都有相当繁重的包装。我在其他地方没有看到太多的用法,尤其是“裸骨”用法。

6.)成功的在线文字处理器很少,所见即所得(WYSIWYG)或页面布局应用程序更少。创造准确编辑的压力根本不存在。更糟糕的是,微软销售的Word和Expressions等离线软件肯定会受到在线编辑增长的影响,尤其是高质量的免费编辑。

8.)有时,相同的选择和编辑命令可能适用于占用同一空间的多个可能对象,而编辑器无法真正知道您要更改哪个对象。另外,编辑命令可能会导致元素以未定义或意外的方式拆分(同样,它不知道您更喜欢哪个)。

Karel Petranek 14 年前

这是一个每个人都以不同方式解决的难题。

*就让它过去吧(最糟糕的一个)

*使用像XStandard这样的插件

Community basarat 7 年前

对于支持 contenteditable ,可以很容易地找到解决方案;使用例如。 jQuery to save the data ,并且要将新元素附加到可编辑的内容(显然是用按钮),只需很少的努力就可以得到一个简单的所见即所得编辑器。

一个可能更难解决的问题是确保这些新元素的放置是正确的。然而,这 has been solved for Webkit ,我相信在其他浏览器中也可以这样做。

内容可编辑 将很容易部署和轻量级,做它肯定是值得开发的东西,IMHO。

编辑: 解决方案。我不知道为什么;就我所知 内容可编辑 生成有效的标记,如果您完全控制(仅允许用户通过您的UI插入元素和更改其属性),那么它也将是语义的。AFAIK没有当前所见即所得编辑器使用 ,但我可能错了。

AlfonsoML 14 年前

Community basarat 7 年前

我以前也回答过类似的问题 Content Editable Text Editors

是的,我知道这个问题已经2年了,但它仍然是最新的。

eightyfive 10 年前

Medium.js !!

Medium.js将HTML代码保存在 contenteditable 语义,简单, 而且干净。Medium.js还支持占位符、自动HR(或BR, 或P)创建、事件、热键、简单;复合元素注射,还有更多!