让WYSIWYG正确显示Bootstrap主题的内容 - 在设计视图中

时间:2016-01-06 01:26:20

标签: html css wysiwyg

我尝试过Dreamweaver和Expression web 4.

当我在WYSIWYG中打开类似(http://getbootstrap.com/examples/dashboard/)的Bootstrap框架主题时 - 连接了所有正确的CSS和JavaScript文件 - 它不会像浏览器中的HTML呈现时那样显示。 / p>

相反 - 在设计视图中使用WYSIWYG - HTML和Div等等都是混乱的,并且相互排列。

当您在浏览器中查看此相同内容时 - 它是有序且适当的位置。

这使得编辑布局变得非常痛苦。

如何让WYSIWYG在编辑器设计视图中显示Bootstrap主题的内容,就像在浏览器中一样?

1 个答案:

答案 0 :(得分:2)

  

如何让WYSIWYG显示Bootstrap主题的内容   编辑器设计视图,与浏览器中的相同?

有了CSS的存在,没有合理的方式以所见即所得的方式编辑内容。

CSS:通过给定的HTML和一组CSS规则产生渲染结果(直接任务)。

WYSIWYG:拥有此渲染结果会产生HTML结构和一组CSS规则(相反的任务)。

直接任务(HTML - > CSS - >渲染)具有完美的数学/形式感。同时,相反的任务(WYSIWYG - > HTML)没有确定性的解决方案 - 在CSS存在的情况下,可以通过多种方式实现相同的渲染结果和CSS规则 - 转换未定。

可用于HTML WYSIWYG编辑的最后一个HTML规范是3.2(没有CSS,AFAIR的那个)。

您无法创建允许您以纯粹所见即所得的方式编辑现代网站内容(如stackoverflow.com)的编辑器。

您可以在某种程度上编辑文本内容区域(使用特殊的降价近似值),但不能编辑整个站点。

所以忘了它,然后用纯文本编辑器编辑你的东西。

话虽如此,我承认WYSIWYG编辑是可行的,但只有当你使用专门为WYSIWYG设计的特殊DOM时。以Microsoft Word为例。但是当你试图从中获取HTML / CSS内容时,你会遇到问题。不是因为Word开发人员很懒,而是因为其内部的“平面文本”DOM。