Bil*_*ill 2 javascript markdown live-preview codemirror
我遇到了Codemirror的问题,其中实时预览模式不适用于Markdown.我基本上只是试图达到与SO相同的效果.实际预览适用于HTML但不适用于Markdown.我跟随了几个演示并尝试了一些没有运气的东西,我在这里作为最后的手段.这是相关代码:
在我的文档的头部我正在加载:
<script src="editor/lib/codemirror.js"></script>
<link rel="stylesheet" href="editor/lib/codemirror.css">
<script src="editor/lib/util/overlay.js"></script>
<script src="editor/mode/markdown/markdown.js"></script>
注意:我在名为的文件夹中有Codemirror文件editor.这是我所做的正常设置的唯一真正偏差.
然后在<body>我的文档中,我有一个<form带有2个元素的>:
<textarea id="content" name="content"></textarea>
和
<iframe id="preview"></iframe>
然后在我的页面底部我运行以下JavaScript(顺便说一下我也在使用jQuery 1.8.2):
// Initialize the editor when document finishes loading
jQuery(document).ready(function() {
var delay;
var editor = CodeMirror.fromTextArea(document.getElementById("content"), {
lineNumbers: false,
mode: 'markdown',
matchBrackets: false,
theme: "ambiance",
onChange: function() {
clearTimeout(delay);
delay = setTimeout(updatePreview, 300);
}
});
// Initialize the live-preview mode
function updatePreview() {
var previewFrame = document.getElementById('preview');
var preview = previewFrame.contentDocument || previewFrame.contentWindow.document;
preview.open();
preview.write(editor.getValue());
preview.close();
}
setTimeout(updatePreview, 300);
});
我无法弄清楚我做错了什么.我尝试加载叠加模式和XML无济于事.我在这里发现了2个帖子,但它们并不完全相关,代码对我不起作用.实时预览显示和更新,但问题是我只得到一个没有格式的文本字符串.
因此,例如,以下Markdown:#Heading 1
A paragraph with __bold__ *text*.
And [a link](http://example.com)
将在实时预览iframe中输出这个,就像我在这里输入一样:
# Heading 1 A paragraph with __bold__ *text*.And [a link](http://example.com)
它不会使下划线或星号变为粗体或斜体文本,并完全忽略换行符.
关于出了什么问题的任何想法？我甚至无法修改演示以使其工作.我一定是缺少一些知识.