标签: wysiwyg

我想知道当您从网页或文档粘贴文本时,在线富文本编辑器如何维护格式.标准textarea框只接受文本,而这些WYSIWYG编辑器似乎使用DIV.它是如何工作的？

我正在开发一个需要WYSIWYG编辑器的项目,但我不需要偶尔集成一个,所以我不熟悉最新和最好的.我过去曾经使用过tinyMCE和nicEdit,因为它的开销很大,所以我不想在这个项目中使用tinyMCE.

我不需要它过于复杂,但我需要能够在每个实现的基础上更改可用按钮,并且与jQuery和AJAX的良好兼容性是一个巨大的优势.显然,良好的干净HTML支持是必要的.

你最近找到了哪些所见即所得的编辑？你会推荐什么？

PS我知道这有点像这个问题的副本,但这个问题已经有近一年的历史了,事情变化很快.

满足的国家

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

HTML无效

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

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

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>

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

换人

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

[更新]澄清

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

[更新] Google文档

上面第二个示例中的HTML来自Google文档编辑器.但是,正如 …

在源模式下查看时,如何在CKEditor中阻止任何自动格式化？

我喜欢直接编辑HTML源代码而不是使用WYSIWYG接口,但每当我编写新行或布局标签时我会如何缩进它们,当我切换到WYSIWYG模式然后再次返回源模式时,它都会被格式化.

我偶然发现了一张CKEditor开发票,保留了ProtectedSource元素的格式,这提到了一个曾经存在过一次的设置,这正是我所追求的.我只想知道在源模式下编辑时如何完全关闭所有自动格式化.

我提出了一个我认为万无一失的解决方案(虽然不是一个令人愉快的解决方案).

我了解了protectedSource设置,所以我想,也许我可以使用它并在我的所有HTML之前创建一个HTML注释标记,然后在它之后创建一个HTML注释标记然后推送一个正则表达式,将注释标记添加到protectedSource数组中,但即便如此(相信它或不)工作不起作用.

我已经在CKEditor之外的浏览器中直接尝试了我的表达并且它正在工作,但是CKEditor没有按预期保护代码(我怀疑这是一个涉及注释标记的错误,因为我可以让它与其他字符串一起使用).万一你想知道,这是我希望可以解决的问题,但不是:

config.protectedSource.push( /<!-- src -->[\s\S]*<!-- end src-->/gi );

而我计划做的事情(因为似乎缺少一种在源模式下禁用格式化的设置)是将我的所有HTML嵌套在注释标签中,如下所示:

<!-- src -->
<div>some code that shouldn't be messed with (but is)</div>
<!-- end src -->

我很想知道是否有人对这种情况有任何建议,或者知道我所描述的设置,或者即使有人可以告诉我为什么我无法protectedSource使用两个评论标签正常工作.

我真的认为它必须是一个bug,因为我可以让很多其他表达式工作正常,我甚至可以在单个注释标记区域内保护HTML,但我无法在两个不同的注释标记中获取HTML以保持不变.

有没有办法完全禁用Summernote中的图像上传,但保持图像网址输入？我发现最接近的是disableDragAndDrop: true选项,但这不会从图像弹出窗口中删除上传按钮

Optimizely&Visual网站优化工具是两个很酷的网站,允许用户执行简单的A/B测试.

他们做的最酷的事情之一是可视化DOM编辑.您可以直观地操作网页并离线保存更改.然后,在随机访问者页面视图中通过JS加载应用更改.

视觉编辑如何运作？

任何人都知道在Notepad ++中使用分屏视图的方法,我可以在一个窗格/选项卡中编辑我的HTML/CSS,并在另一个选项卡/窗格中的浏览器中看到它的外观.

理想情况下,这将是:

1. 在Notepad ++本身(使用如上所述的原生窗格/标签)
2. 用户可以配置他们想要查看预览的任何浏览器渲染引擎(Chrome,FF,IE等)

但是,我可以使用上述两种变体,例如使用外部窗口/浏览器简单地与RubyMine集成,或者,预览仅适用于有限的渲染引擎(仅限Chrome).

我发现Jekyll对于维护静态html网站和博客非常容易和有用,特别是与GitHub页面一起.想知道是否有任何静态站点生成器或CMS有助于维护Jekyll站点的实时预览,内联编辑,布局管理,文件管理等.

我正在寻找一种方法将stackedit的markdown编辑器集成到我自己的项目中,我找不到办法做到这一点.我查看了堆叠的github页面,我被卡住了.

我看到如何编辑已经预先创建的文档很好,但我想以类似的方式集成它,如何添加tinyMCE或任何其他编辑器.有可能这样做吗？

所以我的问题相对简单,我已经谷歌搜索到了解决方案,但我还没找到一个.

问题是,我为Drupal的WYSIWYG模块/框架开发了一个WYSIWYG插件(不确定这是否相关).插件的目的是允许在WYSIWYG内容中嵌入视频文件.我们的客户提供视频上传/编辑API,客户可以使用这些API在其页面上嵌入文件.

简单地说,我的插件打开一个弹出窗口,用户选择从客户站点的帐户中取出他们的一个视频,插件然后调用API并返回HTML和JavaScript以嵌入视频,这是然后插入所见即所得的内容.

这就像Firefox中的魅力一样,但是我在Chrome中遇到了一些问题.在来回调试之后,我注意到WYSIWYG编辑器中的嵌入式JavaScript被转义(IE,引号变成了"等").

Firefox不会发生这种情况,因此很可能Chrome正在引发它,甚至可能是Webkit？我已经检查了通过Ajax调用返回的HTML和JavaScript,它很好,当它被嵌入到WYSIWYG中时它会被转义.

我测试的WYSIWYG编辑器顺便说一下是TinyMCE.