Если вы используете модульный скрипт-загрузчик:
<link rel="stylesheet" href="editormd/css/editormd.preview.css" />
<div id="test-markdown-view">
<!-- Серверная генерация текста Markdown -->
<textarea style="display:none;">### Hello world!</textarea>
</div>
<script src="jquery.min.js"></script>
<script src="editormd/editormd.js"></script>
<script src="editormd/lib/marked.min.js"></script>
<script src="editormd/lib/prettify.min.js"></script>
<script type="text/javascript">
$(function() {
var testView = editormd.markdownToHTML("test-markdown-view", {
// markdown : "[TOC]\n### Hello world!\n## Heading 2", // Также можно динамически задавать текст Markdown
// htmlDecode : true, // Включить / отключить кодирование HTML-тегов.
// htmlDecode : "style,script,iframe", // Примечание: если включено, следует фильтровать некоторые опасные HTML-теги для безопасности веб-сайта.
});
});
</script>
Смотрите полный пример: http://editor.md.ipandao.com/examples/html-preview-markdown-to-html.html.
К сожалению, Editor.md не поддерживает преобразование HTML в Markdown. Возможно, в будущем эта функция появится.
https://pandao.github.io/editor.md/examples/index.html.
Опции и значения по умолчанию Editor.md:
{
mode : "gfm", // gfm или markdown
name : "", // Имя элемента формы для публикации
value : "", // значение для CodeMirror, если режим не gfm/markdown
theme : "", // Самостоятельные темы Editor.md, до версии v1.5.0 это тема CodeMirror, по умолчанию пустая
editorTheme : "default", // Область редактора, это тема CodeMirror в версии v1.5.0
previewTheme : "", // Тема области предварительного просмотра, по умолчанию пуста
markdown : "", // Исходный код Markdown
appendMarkdown : "", // если в init значение textarea не пусто, добавить Markdown к textarea
width : "100%",
height : "100%",
path : "./lib/", // Каталог файлов зависимых модулей
pluginPath : "", // Если этот параметр пуст, по умолчанию используется settings.path + "../plugins/"
delay : 300, // Задержка парсинга Markdown в html, Uint : ms
autoLoadModules : true, // Автоматическая загрузка файлов зависимых модулей
watch : true,
placeholder : "Enjoy Markdown! coding now...",
gotoLine : true, // Включить / выключить переход на строку
codeFold : false,
autoHeight : false,
autoFocus : true, // Включить / выключить автофокус левой области ввода редактора
autoCloseTags : true,
searchReplace : true, // Включить / выключить (CodeMirror) функцию поиска и замены
syncScrolling : true, // опции: true | false | "single", по умолчанию true
readOnly : false, // Включить / выключить режим только для чтения
tabSize : 4,
indentUnit : 4,
lineNumbers : true, // Отображение номеров строк редактора
lineWrapping : true,
autoCloseBrackets : true,
showTrailingSpace : true,
matchBrackets : true,
indentWithTabs : true,
styleSelectedText : true,
matchWordHighlight : true, // опции: true, false, "onselected"
styleActiveLine : true, // Выделение текущей строки
dialogLockScreen : {
"dialogShowMask": true,
"dialogDraggable": true,
"dialogMaskBgColor": "#fff",
"dialogMaskOpacity": 0.1,
"fontSize": "13px",
"saveHTMLToTextarea": false, // Если включить, редактор создаст тег <textarea name="{editor-id}-html-code"> для сохранения HTML-кода для отправки на серверную часть формы.
"disabledKeyMaps": [],
"onload": function() {},
"onresize": function() {},
"onchange": function() {},
"onwatch": null,
"onunwatch": null,
"onpreviewing": function() {},
"onpreviewed": function() {},
"onfullscreen": function() {},
"onfullscreenExit": function() {},
"onscroll": function() {},
"onpreviewscroll": function() {},
"imageUpload": false, // Включить/отключить загрузку
"imageFormats": ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
"imageUploadURL": "", // URL загрузки
"crossDomainUpload": false, // Включить/отключить кросс-доменную загрузку
"uploadCallbackURL": "", // Кросс-доменный URL обратного вызова загрузки
"toc": true, // Содержание
"tocm": false, // Использование [TOCM], автоматическое создание выпадающего меню TOC
"tocTitle": "", // Для кнопки выпадающего меню ToC
"tocDropdown": false, // Включение/отключение выпадающего меню содержания
"tocContainer": "", // Пользовательский селектор контейнера содержания
"tocStartLevel": 1, // Начиная с H1 для создания TOC
"htmlDecode": false, // Открыть идентификацию HTML-тегов
"pageBreak": true, // Включить анализ разрыва страницы [========]
"atLink": true, // для @link
"emailLink": true, // для автоматической ссылки на адрес электронной почты
"taskList": false, // Включить списки задач в стиле Github Markdown
"emoji": false, // :emoji: , Поддержка эмодзи Github, эмодзи Twitter (Twemoji);
// Поддержка значка эмодзи fontAwesome: :fa-xxx: > Используя веб-шрифты значков fontAwesome;
// Поддержка логотипа редактора.md: :editormd-logo: :editormd-logo-1x: > 1~8x;
"tex": false, // TeX(LaTeX), на основе KaTeX
"flowChart": false, // flowChart.js поддерживает только IE9+
"sequenceDiagram": false, // sequenceDiagram.js поддерживает только IE9+
"previewCodeHighlight": true, // Включить / отключить подсветку кода в области предварительного просмотра редактора
"toolbar": true, // показать или скрыть панель инструментов
"toolbarAutoFixed": true, // при прокрутке окна автоматически фиксируется положение
"toolbarIcons": "full", // Режим значков панели инструментов, опции: full, simple, mini, См. свойство editormd.toolbarModes.
"toolbarTitles": {},
"toolbarHandlers": {
ucwords: function() {
return editormd.toolbarHandlers.ucwords;
},
lowercase: function() {
return editormd.toolbarHandlers.lowercase;
}
},
"toolbarCustomIcons": { // используя html-тег создать значок панели инструментов, неиспользуемый по умолчанию тег <a>.
lowercase: "<a href=\"javascript:;\" title=\"Lowercase\" unselectable=\"on\"><i class=\"fa\" name=\"lowercase\" style=\"font-size:24px;margin-top: -10px;\">a</i></a>",
"ucwords": "<a href=\"javascript:;\" title=\"ucwords\" unselectable=\"on\"><i class=\"fa\" name=\"ucwords\" style=\"font-size:20px;margin-top: -3px;\">Aa</i></a>"
},
"toolbarIconTexts": {},
lang: { // Языковые данные, вы можете настроить свой язык.
name: "zh-cn",
description: "开源在线Markdown编辑器<br/>Open source online Markdown editor.",
tocTitle: "目录",
toolbar: {
//...
},
button: {
//...
}
} ```
#### Зависимости
- CodeMirror
- marked
- jQuery
- FontAwesome
- github-markdown.css
- KaTeX
- prettify.js
- Rephael.js
- flowchart.js
- sequence-diagram.js
- Prefixes.scss
#### Изменения
[Журналы изменений](https://github.com/pandao/editor.md/blob/master/CHANGE.md)
#### Лицензия
Лицензия MIT.
Авторские права (c) 2015–2019 Pandao
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )