我正在尝试使用 wmd 编辑器而不是 ajax。 这里有bugged code
wdm代码基于github上的openlibrary fork
不用ajax也能很好地工作。
但是当我尝试通过 ajax 形式显示编辑器时,它无法加载。
非ajax版本生成此html:
<div id="wmd-container">
<div id="wmd-button-bar"></div>
<div id="wmd-button-bar-0" class="wmd-button-bar"><ul class="wmd-button-row"><li style="background-position: 0px 0px;" title="Strong <strong> Ctrl+B" class="wmd-button wmd-bold-button"></li><li style="background-position: -20px 0px;" title="Emphasis <em> Ctrl+I" class="wmd-button wmd-italic-button"></li><li class="wmd-spacer"></li><li style="background-position: -40px 0px;" title="Hyperlink <a> Ctrl+L" class="wmd-button wmd-link-button"></li><li style="background-position: -60px 0px;" title="Blockquote <blockquote> Ctrl+Q" class="wmd-button wmd-quote-button"></li><li style="background-position: -80px 0px;" title="Code Sample <pre><code> Ctrl+K" class="wmd-button wmd-code-button"></li><li style="background-position: -100px 0px;" title="Image <img> Ctrl+G" class="wmd-button wmd-image-button"></li><li class="wmd-spacer"></li><li style="background-position: -120px 0px;" title="Numbered List <ol> Ctrl+O" class="wmd-button wmd-olist-button"></li><li style="background-position: -140px 0px;" title="Bulleted List <ul> Ctrl+U" class="wmd-button wmd-ulist-button"></li><li style="background-position: -160px 0px;" title="Heading <h1>/<h2> Ctrl+H" class="wmd-button wmd-heading-button"></li><li style="background-position: -180px 0px;" title="Horizontal Rule <hr> Ctrl+R" class="wmd-button wmd-hr-button"></li><li class="wmd-spacer"></li><li style="background-position: -200px -20px;" title="Undo - Ctrl+Z" class="wmd-button wmd-undo-button"></li><li style="background-position: -220px -20px;" title="Redo - Ctrl+Shift+Z" class="wmd-button wmd-redo-button"></li><li style="background-position: -240px 0px;" class="wmd-button wmd-help-button"><a title="WMD website" target="_blank" href="http://wmd-editor.com/"></a></li></ul></div><div id="wmd-button-bar-2" class="wmd-button-bar"></div><div id="wmd-button-bar-4" class="wmd-button-bar"></div><textarea id="wmd-input" class="resizable" name="post-text" cols="92" rows="15" tabindex="101"></textarea><div id="wmd-preview-4" class="wmd-preview"></div><div id="wmd-preview-2" class="wmd-preview"></div><div id="wmd-preview-0" class="wmd-preview"></div>
</div>
使用ajax形式:
<div id="wmd-container">
<div id="wmd-button-bar"></div>
<div id="wmd-button-bar-1" class="wmd-button-bar"></div><div id="wmd-button-bar-3" class="wmd-button-bar"></div><textarea id="wmd-input" class="resizable" name="post-text" cols="92" rows="15" tabindex="101"></textarea><div id="wmd-preview-3" class="wmd-preview"></div><div id="wmd-preview-1" class="wmd-preview"></div>
</div>
有什么帮助吗?
最佳答案
我正在使用可用于多个文本区域的版本。该控件通过调用以下命令启动:
setup_wmd({
"input": "user_about",
"button_bar": "user_about-button-bar",
"preview": "user_about-preview"
});
使用“load”上的事件监听器加载编辑器的问题 ID,因此仅在页面完全加载时才加载。当 ajax 表单加载时,该事件不会触发,因为页面已经加载。'
解决方案
在 util.startEditor 方法中替换行:
util.addEvent(top, "load", loadListener);
像这样:
if (ajaxForm) {
loadListener(); //this loads the editor immediately
} else {
util.addEvent(top, "load", loadListener);
}
您可以在更改部分的顶部添加此行
var ajaxForm = wmd_options.ajaxForm || false
因此您可以调用此方法立即加载编辑器:
setup_wmd({
"input": "user_about",
"button_bar": "user_about-button-bar",
"preview": "user_about-preview",
"ajaxForm": true
});
因此您现在可以在 ajax 请求加载后调用此方法来加载编辑器。
关于jquery - 基于 ajax 表单的 wmd 编辑器(jquery 版本),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1928578/