我在一个项目上使用wmd markdown编辑器并有一个问题:
当我发布包含markdown文本区域的表单时,它(如预期的那样)将html发布到服务器.但是,说服务器端验证失败了,我需要发回用户来编辑他们的条目,无论如何只用markdown而不是html重新填充textarea?因为我已经设置了,服务器只能访问帖子数据(以html的形式),所以我似乎无法想到这样做的方法.有任何想法吗?优选地,基于非JavaScript的解决方案.
更新:我发现了一个名为markdownify的html to markdown转换器.我想这可能是向用户显示降价的最佳解决方案......欢迎任何更好的选择!
更新2:我在SO上发现了这篇文章,我猜有一个选项可以将数据作为markdown而不是html发送到服务器.简单地将数据存储为数据库中的降价是否有任何缺点?将它显示回用户(编辑器之外)怎么样?也许最好将两个版本(html和markdown)发布到服务器上......
解决:我可以简单地使用php markdown将markdown转换为html服务器端.
我非常喜欢Stack Overflow评论用户界面,我正在考虑在自己的网站上实现相同的功能.我查看了代码,看起来这里的主要工具是WMD,JQuery TextArea Resizer扮演了一个支持角色.
WMD在客户端将Markdown转换为HTML.这非常好,因为它有助于预览,但在将其发送到服务器时遇到了挑战.如果存在验证错误(例如,用户在评论表单的其他部分输入了无效的电子邮件地址,或者他没有输入他的名字),则服务器通过重新显示表单并返回错误消息来响应表格字段预先填充.只是现在评论文本是HTML,而不是Markdown,因为服务器甚至从未看过Markdown.但我希望它是Markdown,因为那是用户输入的内容.
这里有什么想法?
我考虑了各种想法:
理想情况下,除了HTML之外,还有一些方法可以获得文本的Markdown版本并将其提交给服务器,但我还不足以知道这是否真的存在.
任何建议赞赏.
要清楚,我指的是stackoverflow的分叉WMD的使用,而不是来自attacklab的原始版本.
我想使用分叉版本,但似乎脚本用来识别WMDify页面元素的div id是硬编码的wmd.js:66:
// A collection of the important regions on the page.
// Cached so we don't have to keep traversing the DOM.
wmd.PanelCollection = function(){
this.buttonBar = doc.getElementById("wmd-button-bar");
this.preview = doc.getElementById("wmd-preview");
this.output = doc.getElementById("wmd-output");
this.input = doc.getElementById("wmd-input");
};
Run Code Online (Sandbox Code Playgroud)
如果我只想使用不同的区域名称,我自己就可以了 - 但我想在一个页面上使用可变数量的WMD编辑器.我需要一种方法来告诉每个WMD实例它应该影响的页面区域,但是我没有看到任何"钩子".
看不见可能是我几乎完全缺乏js知识的产物.Right Thing To Do™是为了正确学习javascript,但我正处于一个截止日期的项目中.我真的很想使用这个版本的WMD,但是我需要一些关于如何修改WMD脚本的线索,或者只是一个如何以一种我可以指定使用哪个div id的方式调用它的例子.
线索赞赏!
这不是一个重复的问题,我知道如何创建一个丰富的编辑器,但我遇到了问题
我想创建一个像stackoverflow那样的富文本框.
我像SO一样导入wmd插件.
当我将主题保存到mysql时,它会保存处理过的文本,如下所示:
<p>你好世界</ p>
<pre> <code> class Text {} </ code> </ pre>
我认为这是正常的,因为html页面可以正确呈现这一点.
但是当我尝试编辑这个主题时,它会直接显示我的textarea中的代码:

我需要的是这(就像我第一次进入):

我的textarea代码非常简单,如下所示:
<!-- text area start -->
<div id="wmd-button-bar"></div>
<textarea id="wmd-input" name="description" onblur="checkForm()">${topic?.description}</textarea>
<div id="wmd-preview"></div>
<!-- text area end -->
Run Code Online (Sandbox Code Playgroud)
有人可以帮忙吗?谢谢.
<div style="display:none;">
<div id="wmd-editor" class="wmd-panel">
<div id="wmd-button-bar"></div>
<textarea id="wmd-input"></textarea>
</div>
<div id="wmd-preview" class="wmd-panel"></div>
<div id="wmd-output" class="wmd-panel"></div>
</div>
Run Code Online (Sandbox Code Playgroud)
看,我正在关注derobins-wmd的wmd-test.html,除了把那些东西放在一个隐藏的div中.
uncaught exception: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMNSHTMLTextAreaElement.selectionStart]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://localhost/derobins-wmd-980f687/wmd.js :: anonymous :: line 490" data: no]
uncaught exception: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMNSHTMLTextAreaElement.selectionStart]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://localhost/derobins-wmd-980f687/wmd.js :: anonymous :: line 490" data: no]
Run Code Online (Sandbox Code Playgroud) 我正试图找到消毒WMD编辑器输入的方法.
具体来说,我试图使HTML标签仅在<code>WMD生成的标签中可用.那可能吗
我的问题是,以下代码呈现为HTML,可以抵御潜在的XSS攻击.
例如, <a onmouseover="alert(1)" href="#">read this!</a>
上述代码通常在预览模式下和保存到数据库时呈现.
我注意到Stack Overflow似乎没有这个问题.相同的代码只是呈现为文本.
我注意到Stack Overflow团队已经在http://refactormycode.com/codes/333-sanitize-html中共享了他们的代码.我是否真的必须使用C#来消毒WMD才能做到这一点?
有许多Stack Overflow问题(例如,白名单,阻止XSS在C#和WMD Markdown和服务器端使用WMD控制)关于如何对WMD编辑器生成的Markdown进行服务器端清理,以确保生成的HTML不包含恶意脚本,像这样:
<img onload="alert('haha');"
src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" />
Run Code Online (Sandbox Code Playgroud)
但我也找不到在客户端插上漏洞的好方法.当然,客户端验证不能替代服务器上的擦除验证,因为任何人都可以伪装成客户端并发布令人讨厌的Markdown.如果你在服务器上清理HTML,攻击者就无法保存坏的HTML,因此以后没有其他人能够看到它并且他们的cookie被盗或被坏脚本劫持的会话.因此,有一个有效的案例可能不值得在WMD预览窗格中强制执行无脚本规则.
但想象一下,攻击者找到了将恶意Markdown放到服务器上的方法(例如,来自其他站点的受感染的源,或者在修复XSS错误之前添加的内容).将markdown转换为HTML时应用的服务器端白名单通常可以防止向用户显示错误的Markdown.但是,如果攻击者可以让某人编辑该页面(例如,通过发布另一个条目,说恶意条目有一个断开的链接并要求某人修复它),那么编辑该页面的任何人都会被劫持.这无疑是一个极端的案例,但它仍然值得防范.
此外,允许客户端预览窗口允许不同于服务器允许的HTML,这可能是一个坏主意.
Stack Overflow团队通过更改WMD来堵塞这个漏洞.他们是如何做到的呢?
[注意:我已经想到了这一点,但它需要一些棘手的JavaScript调试,所以我在这里回答我自己的问题,以帮助其他人可能想要做同样的事情].
我能够从WMD编辑器中获取Markdown和HTML格式化文本.在我的要求中,我还需要从WMD编辑器中获取纯文本.我想用一个简单的例子来解释它.
在Stack Overflow中,我们将在WMD编辑器中键入描述时看到Markdown文本.在预览中,我们可以看到<b>格式化的文本.在问题页面中,如果没有此Markdown和格式化文本,我们可以在两行中看到问题描述.
我需要实现相同的功能.我需要做什么?
wmd ×10
javascript ×6
markdown ×2
wmd-editor ×2
comments ×1
editor ×1
frontend ×1
html ×1
php ×1
prettify ×1
richtextbox ×1
upload ×1
xss ×1