满足的国家

bra*_*rad 21 html javascript css wysiwyg contenteditable

满足的国家

由所见即所得的编辑制作的标记是残酷的.它充斥着样式属性,甚至通常都不是有效的HTML(缺少结束标记,重叠样式等).是否有针对所引入问题的既定解决方案contenteditable?如果没有,我该如何创建一个呢?

HTML无效

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

<ul><li>foo</li><li>bar</li></ul><div>baz
Run Code Online (Sandbox Code Playgroud)

div标签来自哪里?为什么不关闭?为什么不是一个段落 - 当然适当关闭?这可以预防吗?

非语义HTML

另一位编辑制作了如下:

<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>
Run Code Online (Sandbox Code Playgroud)

这是有效的标记,但它在语义上太可怕了!编辑器插入了文字项目符号,而不是样式化的无序列表.作为开发人员,我不知道如何处理标记contenteditable.造型方面,它完全没用.

换人

直到最近,我一直使用Markdown作为从用户生成语义正确的HTML的工具.但是,Markdown缺少我的用户要求的某些功能(非技术人员的易用性,图像定位等).在寻找一个可以产生有效语义标记的wysiwyg编辑器几周之后,我发现这contenteditable使得这一切变得不可能.有人在某个地方谈论这些问题的解决方案吗?我怎么能参与其中

[更新]澄清

我想我前面并不完全清楚.我不是在想办法解决contenteditable问题.我发现了很多这些,包括下面提到的大部分内容.我想要找到的是这些问题的根本原因.为什么contenteditable这么破?是由于技术问题还是遗留代码问题?此外,正在采取哪些措施来解决这个问题以及这项工作在哪里完成?

[更新] Google文档

上面第二个示例中的HTML来自Google文档编辑器.但是,正如AlfonsoML在下面指出的那样,Google Docs不会contenteditable在他们的编辑器中使用.他们的技术在这里解释.

Spl*_*iFF 11

我怀疑它处于这种状态,原因有几个:

1.)定义它的HTML5标准没有定义它应该输出的内容,而是让每个实现都自己决定.

2.)编辑不知道您是想要准确的表示还是语义表示.这些通常是权衡取舍.

3.)看起来Mozilla将其旧的Netscape Mail/Composer代码拖入其designMode实现,然后将其拖入contentEditable.它仍然使用10年前存在的相同的虚线轮廓和小红色手柄,我怀疑有大量遗留代码.

4.)看起来Internet Explorer几乎完全相同,IE从来没有做过任何正确的事情.它仍然以怪癖和"兼容"模式的形式拖延其遗产.

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

6.)很少有成功的在线文字处理器和更少的WYSIWYG或页面布局应用程序.创建精确编辑器的压力并不存在.更糟糕的是,微软仍然销售像Word和Expressions这样的离线软件,这些软件肯定会受到在线编辑器,特别是高质量免费软件的增长的影响.

7.)Microsoft拥有创建工具的遗产,这些工具可生成目前仍存在于Outlook 2010和Office套件中的无效且臃肿的HTML代码.

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

我不相信contentEditable会像切割自己的HTML或使用专用工具一样好.我只是专注于在结果上运行一些基本的cruft /修复工具(如HTMLTidy)并将其称为一天.