1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/Moon-Online-Judge-mavonEditor

Клонировать/Скачать
README.md 17 КБ
Копировать Редактировать Web IDE Исходные данные Просмотреть построчно История
Отправлено 05.06.2025 08:16 c137752

mavonEditor

! npm

Основан на Vue markdown-редактор

[Английская документация](. /README-EN.md)

Демо на jsfiddle

Пример (изображения)

ПК

! [ПК](. /img/cn/cn-common.png) ! [ПК](. /img/cn/cn-image.gif)

[Просмотреть больше изображений нажмите здесь. . . ](. /doc/cn/images.md)

Установка mavon-editor (установка)

$ npm install mavon-editor --save

Использование (как импортировать)

index.js:

    // Глобальная регистрация
    // Импорт с ES6
    import Vue from 'vue'
    import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    // Использование
    Vue.use(mavonEditor)
    new Vue({
        'el': '#main',
        data() {
            return { value: '' }
        }
    })

index.html

<div id="main">
    <mavon-editor v-model="value"/>
</div>

[Больше способов импорта нажмите здесь. . . ](. /doc/cn/use.md) [Как получить и настроить объект markdown-it. . . ](. /doc/cn/markdown.md)

API документация

props

name (название) type (тип) default (по умолчанию) describe (описание)
value String начальное значение
language String zh-CN выбор языка, временно поддерживаются zh-CN: китайский, en: английский, fr: французский, pt-BR: португальский, ru: русский
fontSize String 15px размер шрифта в редакторе
scrollStyle Boolean true включение стиля прокрутки (временно поддерживается только в Chrome)
subfield Boolean true true: двойной столбец (редактирование и предварительный просмотр на одном экране), false: одинарный столбец (редактирование и предварительный просмотр на разных экранах)
defaultOpen String edit: по умолчанию отображается область редактирования, preview: по умолчанию отображается область предварительного просмотра, другие = edit
placeholder String Начните редактирование... текст по умолчанию при пустом поле ввода
editable Boolean true разрешение на редактирование
codeStyle String code-github стиль markdown: по умолчанию github, [доступные схемы цветов](. /src/lib/core/hljs/lang. hljs. css. js)
toolbarsFlag Boolean true отображение панели инструментов
navigation Boolean false отображение навигационного меню по умолчанию
ishljs Boolean true выделение синтаксиса кода
imageFilter function null функция фильтрации изображений, параметр - объект типа File, требуется вернуть Boolean, true означает, что файл является легальным, false означает, что файл является нелегальным
imageClick function null событие клика по изображению, по умолчанию - открытие в предварительном просмотре, может быть переопределено
toolbars Object Пример ниже панель инструментов
/*
   По умолчанию все кнопки панели инструментов открыты, передаются пользовательские объекты
   Например: {
```markdown
       bold: true, // Жирный шрифт
        italic: true, // Курсив
        header: true, // Заголовок
   }
   В этом случае, отображаются только три кнопки
*/
toolbars: {
     bold: true, // Жирный шрифт
     italic: true, // Курсив
     header: true, // Заголовок
     underline: true, // Подчеркивание
     strikethrough: true, // Зачеркивание
     mark: true, // Маркировка
     superscript: true, // Верхний индекс
     subscript: true, // Нижний индекс
     quote: true, // Цитата
     ol: true, // Нумерованный список
     ul: true, // Маркированный список
     link: true, // Ссылка
     imagelink: true, // Ссылка на изображение
     code: true, // Код
     table: true, // Таблица
     fullscreen: true, // Полноэкранный режим
     readmodel: true, // Читальный режим
     htmlcode: true, // Отображение исходного кода HTML
     help: true, // Помощь
     /* 1. 3. 5 */
     undo: true, // Отмена
     redo: true, // Повтор
     trash: true, // Удаление
     save: true, // Сохранение (вызывает событие save в events)
     /* 1. 4. 2 */
     navigation: true, // Навигационное меню
     /* 2. 1. 8 */
     alignleft: true, // Выравнивание по левому краю
     aligncenter: true, // Выравнивание по центру
     alignright: true, // Выравнивание по правому краю
     /* 2. 2. 1 */
     subfield: true, // Одинарный/двойной режим
     preview: true, // Предварительный просмотр
 }

events События

name Метод params Параметры describe Описание
| save             | String: value, String: render | Возврат события сохранения (клавиша Ctrl + S) |
| fullScreen       | Boolean: status, String: value | Событие переключения на полный экран (boolean: статус открытия полноэкранного режима) |
| readModel        | Boolean: status, String: value | Событие переключения на режим погружения в чтение (boolean: статус открытия режима чтения) |
| htmlCode         | Boolean: status, String: value | Событие отображения исходного кода HTML (boolean: статус открытия исходного кода) |
| subfieldToggle   | Boolean: status, String: value | Событие переключения между одинарным и двойным полем редактирования (boolean: статус открытия двойного поля) |
| previewToggle    | Boolean: status, String: value | Событие переключения между режимом предварительного просмотра и редактированием (boolean: статус открытия режима предварительного просмотра) |
| helpToggle       | Boolean: status, String: value | Событие отображения справки (boolean: статус открытия справки) |
| navigationToggle | Boolean: status, String: value | Событие переключения между режимом навигации и отображением содержания (boolean: статус открытия режима навигации) |
| imgAdd           | String: filename, File: imgfile | Событие добавления изображения (filename: имя файла, записанное в md, File: объект типа File) |
| imgDel           | String: filename               | Событие удаления изображения (filename: имя файла, записанное в md) |#### Кодирование с подсветкой
> Если вам не требуется подсветка кода, вы должны установить `ishljs` в `false`
Включение подсветки кода props
```javascript
  // ishljs по умолчанию установлен в true
  <mavon-editor :ishljs = "true"></mavon-editor>

Для оптимизации размера плагина, начиная с v2.4.2 следующие файлы будут использоваться по умолчанию через cdnjs внешние ссылки:

  • highlight.js
  • github-markdown-css
  • katex (v2.4.7) Файлы с анализом языка и стилями подсветки кода highlight.js будут загружаться по мере необходимости при использовании. github-markdown-css и katex будут загружаться только при mounted Внимание: Доступные схемы цветов и поддерживаемые языки экспортируются из highlight.js/9.12.0

Если вы не используете CDN, загрузите локально по мере необходимости здесь. . .

Загрузка изображений

<template>
    <mavon-editor ref="md" @imgAdd="$imgAdd" @imgDel="$imgDel"></mavon-editor>
</template>
export default {
    methods: {
        // Привязка @imgAdd события
        $imgAdd(pos, $file) {
            // Первый шаг. Загрузить изображение на сервер.
            var formdata = new FormData();
            formdata.append('image', $file);
            axios({
                url: 'server url',
                method: 'post',
                data: formdata,
                headers: { 'Content-Type': 'multipart/form-data' },
            }).then((url) => {
                // Второй шаг. Заменить возвращенный url на место оригинального url! [. . . ](0) -> ! [. . . ](url)
                /**
                * $vm указывает на экземпляр mavonEditor, его можно получить двумя способами:
                */
        }
    }
}
``````markdown
### Импорт объекта
* Через импорт объекта: `import {mavonEditor} from . . . ` и т. д., `$vm` будет `mavonEditor`
* Через $refs: html объявление ref: `<mavon-editor ref=md></mavon-editor>`, `$vm` будет `this.$refs.md`
*/
$vm.$img2Url(pos, url);
})
}
}

[Подробности загрузки изображений нажмите здесь. . . ](. /doc/cn/upload-images. md)

Примечание

  • По умолчанию размеры стиля min-height: 300px, min-width: 300px, которые можно перезаписать
  • Основной z-index: 1500
  • Для демонстрации можно установить props: toolbarsFlag: false, subfield: false, defaultOpen: "preview"

Быстрые клавиши

Клавиша Код клавиши Функция
F8 119 Включить/выключить навигацию
F9 120 Переключение между просмотром и редактированием
F10 121 Включить/выключить полноэкранный режим
F11 122 Включить/выключить режим чтения
F12 123 Переключение между одинарным и двойным столбцом
TAB 9 Отступ
CTRL + S 17 + 83 Триггер сохранения
CTRL + D 17 + 68 Удаление выбранной строки
CTRL + Z 17 + 90 Отменить предыдущее действие
CTRL + Y 17 + 89 Повторить предыдущее действие
CTRL + SPACE 17 + 32 Очистить редактирование
CTRL + B 17 + 66 Жирный шрифт
CTRL + I 17 + 73 Курсив
CTRL + H 17 + 72 # Заголовок
CTRL + 1 17 + 49 # Заголовок
CTRL + 2 17 + 50 ## Заголовок
CTRL + 3 17 + 51 ### Заголовок
CTRL + 4 17 + 52 #### Заголовок
  | CTRL + 6       | 17 + 102 или 54 | ###### Заголовок |
  | CTRL + U    | 17 + 85 | ++Подчеркнутый текст++ |
  | CTRL + M    | 17 + 77 | ==Закомментированный текст== |
  | CTRL + Q    | 17 + 81 | > Цитата |
  | CTRL + O    | 17 + 79 | 1.   Нумерованный список |
  | CTRL + L    | 17 + 76 | [Ссылка]() || CTRL + ALT + S    | 17 + 18 + 83 | <sup>Верхний индекс</sup> |
  | CTRL + ALT + U    | 17 + 18 + 85 | - Несколько пунктов |
  | CTRL + ALT + C    | 17 + 18 + 67 | ``` Кодовый блок |
  | CTRL + ALT + L    | 17 + 18 + 76 | !  [Ссылка на изображение]() |
  | CTRL + ALT + T    | 17 + 18 + 84 | Таблица |
  | CTRL + SHIFT + S    | 17 + 16 + 83 | <sub>Нижний индекс</sub> |
  | CTRL + SHIFT + D    | 17 + 16 + 68 | ~~Зачеркнутый текст~~ |
  | CTRL + SHIFT + C    | 17 + 16 + 67 | По центру |
  | CTRL + SHIFT + L    | 17 + 16 + 76 | По левому краю |
  | CTRL + SHIFT + R    | 17 + 16 + 82 | По правому краю |
  | SHIFT + TAB    | 16 + 9 | Отменить отступ |

## Зависимости
- [markdown-it](https://github.com/markdown-it/markdown-it)
- [auto-textarea](https://github.com/hinesboy/auto-textarea)

## Расширенные возможности Markdown
- [emoji](https://github.com/markdown-it/markdown-it-emoji)
- [subscript](https://github.com/markdown-it/markdown-it-sub)
- [superscript](https://github.com/markdown-it/markdown-it-sup)
- [container](https://github.com/markdown-it/markdown-it-container)
- [определенный список](https://github.com/markdown-it/markdown-it-deflist)
- [сокращение](https://github.com/markdown-it/markdown-it-abbr)
- [примечание внизу страницы](https://github.com/markdown-it/markdown-it-footnote)
- [вставка](https://github.com/CHENXCHEN/markdown-it-ins)
- [выделение](https://github.com/markdown-it/markdown-it-mark)
- [список задач](https://github.com/revin/markdown-it-task-lists)
- [выделение кода](https://github.com/isagalaev/highlight.js)
- [katex](https://github.com/Khan/KaTeX)
- [предварительный просмотр изображений](https://github.com/CHENXCHEN/markdown-it-images-preview)
- [toc](https://github.com/tylerlong/markdown-it-toc)
- можно добавить [получить объект markdown-it](./doc/cn/markdown)md) [другие расширения](https://www.npmjs.com/search?q=keywords:markdown-it-plugin)
   ## Обновления
   - [журнал обновлений](. /LOG.md)
   ## Сотрудники
   - [CHENXCHEN](https://github.com/CHENXCHEN)
   ## Лицензия
   mavonEditor является открытым исходным кодом и распространяется под лицензией MIT.
   Copyright (c) 2017 hinesboy

Опубликовать ( 0 )

Вы можете оставить комментарий после Вход в систему

1
https://api.gitlife.ru/oschina-mirror/Moon-Online-Judge-mavonEditor.git
git@api.gitlife.ru:oschina-mirror/Moon-Online-Judge-mavonEditor.git
oschina-mirror
Moon-Online-Judge-mavonEditor
Moon-Online-Judge-mavonEditor
master