Ошибка «Текст не определен» при использовании Markdown? - PullRequest
Новая
       12

Ошибка «Текст не определен» при использовании Markdown?

2 голосов
/ 31 марта 2012

Я загрузил уценку из http://code.google.com/p/wmd/ (ну, на самом деле, я клонировал репозиторий hg), чтобы иметь подсветку на стороне клиента для статического текста, т.е. мне не нужен редактор.

Однако я попытался создать экземпляр конвертера, по сути, как в демоверсии : 

  <script type="text/javascript">
  (function () {
    var conv = Markdown.getSanitizingConverter();
    var ed = new Markdown.Editor(conv);
    ed.run();
  })();
  </script>

Однако, если я запускаю это, консоль ошибок JS сообщает мне: 

Error: text is undefined
Source File: http://bitmask.de/markdown_test/Markdown.Converter.js
Line: 149

Который я проследил до вызова ed.run().

Я поместил всю минимальную демонстрацию на http://bitmask.de/markdown_test/js.html

Я не изменял js-файлы или что-то еще (в основном потому, что у меня очень и очень ограниченные знания js), просто сделал то, что делает демо. Что здесь не так?

Ответы [ 2 ]

2 голосов
/ 31 марта 2012

Вы не можете использовать элемент <div> для ввода, это должно быть что-то редактируемое (например, <textarea> или <input type="text">): 

<div class="wmd-panel">
  <div id="wmd-button-bar"></div>
  <textarea id="wmd-input" class="wmd-input">`hello` *cruel* world</textarea>
</div>

Также будьте осторожны с пробелами в HTMLисточник.Ваш второй пример имеет строку, начинающуюся с более чем четырех пробелов, что означает «код» в Markdown: 

  <!-- this will be formated as <pre> element -->
  <textarea class="wmd-input" id="wmd-input">
  `hello` *cruel* world
  </textarea>
0 голосов
/ 31 марта 2012

Скорее всего, чтобы это работало, вам нужно назначить класс wmd-panel css для HTML-элемента, на который вы хотите, чтобы разметка WMD действовала.

Демонстрация Google Code выглядит следующим образом:

HTML: 

<html>

    <head>
        <title>PageDown Demo Page</title>

        <link rel="stylesheet" type="text/css" href="demo.css" />

        <script type="text/javascript" src="../../Markdown.Converter.js"></script>
        <script type="text/javascript" src="../../Markdown.Sanitizer.js"></script>
        <script type="text/javascript" src="../../Markdown.Editor.js"></script>
    </head>

    <body>
        <div class="wmd-panel">
            <div id="wmd-button-bar"></div>
            <textarea class="wmd-input" id="wmd-input"> This is the *first* editor.
------------------------------

Just plain **Markdown**, except that the input is sanitized:

<marquee>I'm the ghost from the past!</marquee> </textarea>
        </div>
        <div id="wmd-preview" class="wmd-panel wmd-preview"></div>

        <br /> <br />

        <div class="wmd-panel">
            <div id="wmd-button-bar-second"></div>
            <textarea class="wmd-input" id="wmd-input-second"> This is the *second* editor.
------------------------------

It has a plugin hook registered that surrounds all words starting with the letter A with asterisks before doing the Markdown conversion. Another one gives bare links a nicer link text. User input isn't sanitized here:

<marquee>I'm the ghost from the past!</marquee>

http://google.com

http://stackoverflow.com

It also includes a help button. </textarea>
        </div>
        <div id="wmd-preview-second" class="wmd-panel wmd-preview"></div>

Javascript: 

<script type="text/javascript">
    (function () {
        var converter1 = Markdown.getSanitizingConverter();
        var editor1 = new Markdown.Editor(converter1);
        editor1.run();

        var converter2 = new Markdown.Converter();

        converter2.hooks.chain("preConversion", function (text) {
            return text.replace(/\b(a\w*)/gi, "*$1*");
        });

        converter2.hooks.chain("plainLinkText", function (url) {
            return "This is a link to " + url.replace(/^https?:\/\//, "");
        });

        var help = function () { alert("Do you need help?"); }

        var editor2 = new Markdown.Editor(converter2, "-second", { handler: help });

        editor2.run();
    })();

</script>

Обратите внимание на использование class="wmd-panel" для обозначения тех областей, на которые должна действовать Уценка ОМУ?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...