Введение

Я искал много редакторов Markdown и обнаружил, что они слишком громоздкие. Добавление функций не очень удобно (в основном потому, что я не понимаю такой сложный код), и я не нашёл ни одного, который поддерживал бы вставку и перетаскивание изображений. Поэтому я решил создать свой собственный. Код на JavaScript достаточно прост, и его могут понять даже начинающие разработчики.

Текущие функции

• Вставка и загрузка изображений с буфера обмена (поддерживает удаленную загрузку, например, через Qiniu).
• Перетаскивание файлов для загрузки.
• Подсветка синтаксиса.

Демонстрационный адрес

• Страница редактирования: https://dot2-com.gitee.io/dot2editor/

• Предварительный просмотр страницы: https://dot2-com.gitee.io/dot2editor/view.html

Адрес проекта

https://gitee.com/dot2-com/Dot2Editor

Документация по использованию

Alt+1~6 соответствуют заголовкам h1~h6.

Alt+B делает выделенный текст жирным.

Alt+I вставляет изображение (I означает тег img).

Alt+A вставляет ссылку (A означает тег a).

Alt+H вставляет горизонтальную линию (H означает тег hr).

Alt+L вставляет линию (L означает тег Line, отличие от hr заключается в том, что текст над линией становится h2).

Alt+T вставляет таблицу (T означает Table).

Разработчик

Внимание: необходимо получить доступ к index.html в веб-среде.

Создание редактора

<div style="width:100%; height:100%;" id="editor">
    <textarea name="content" cols="30" rows="10"></textarea>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="./dot2.editor.js"></script>
<script>
	var editor = new Dot2Editor("#editor", {
		upload: {
			//Адрес загрузки
			url: "./upload.php",

			//Пользовательское имя файла, отправленное на сервер
			name: "image",

			//Пользовательский ключ-значение json или функция, которая возвращает такой json, отправляется вместе с данными формы
            //kvs: {
            //  k1: "v1",
            //  k2: "v2"
            //}
		}
	});

</script>

• Необходимо включить jQuery перед включением fanyi8editor.js.
• textarea не является обязательным, если вам нужно использовать обычную отправку формы, вы можете добавить textarea, содержимое markdown будет автоматически обновлено в textarea. Начальное значение textarea также будет автоматически установлено в редакторе.

Публичные функции редактора

getMarkdown()

Получает содержимое markdown из редактора.

setMarkdown(markdownContent)

Устанавливает содержимое в редактор.

getHtml()

Получает HTML-код после анализа редактора.

Обработка отображения markdown в html

Пожалуйста, обратитесь к исходному коду view.html.

Автор: Лю Жунфэй QQ: 173126019