我在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:
#标题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)
它不会使下划线或星号变成粗体或斜体文本,并且完全忽略换行符。

关于出什么问题有什么想法吗?我什至无法修改演示以使其正常工作。我一定缺少一些知识。

最佳答案

浏览器不显示 Markdown ,而是显示HTML。您必须添加一个步骤,使用https://github.com/chjj/marked将它们的markdown转换为HTML。

关于javascript - Codemirror中的实时预览忽略了格式设置,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/13297551/

10-11 08:29