HTML + JS реализация редактора уценки

Официальный сайт markdown’s editor.md плагин: https://panda.github.io/edit…

Первый: Скачать editor.md

1: скачать непосредственно на официальном сайте

Адрес загрузки GitHub: https://github.com/panda/edi…

2: Загрузка с помощью NPM

npm install editor.md

Структура загруженного файла выглядит следующим образом: 2. Простое использование editor.md

1: помещение:

Представляем CSS

Представляем JS

2: HTML + JS для достижения эффекта уценки

В соответствии с приведенным выше кодом может быть реализован редактор уценки. Но приведенный выше код не имеет функции локальной загрузки изображений. Если вам нужна функция локальной загрузки изображений, код JS изменяется следующим образом:

$(function() {
    var editor = editormd("test-editor", {
        Width: "100%", // width, not filled in as 100%
        Height: "500px", // height, not 100%
        Theme: "dark", // theme, not filled in as default theme
        Path: "editor MD / lib /", // lib directory address of the editor.md plug-in
        Savehtmltotextarea: true, // save HTML to textarea
        Toolbarautofixed: true, // enable and disable automatic positioning of toolbars
        Imageupload: true, // run local upload
        Imageformats: ["JPG", "JPEG", "GIF", "PNG", "BMP", "webp"], // file formats allowed to upload
        Imageuploadurl: '/ index. PHP? R = markdown / upload' // the path of the uploaded background server
    });
});

Простая реализация бэкэнд-загрузки выглядит следующим образом (здесь я использую плагин intervention/image фреймворка Yii).

Yii::$app->response->format = Response::FORMAT_JSON;
$upload = \ interaction \ image \ imagemanagerstatic:: make ($_files ['editormd-image-file '] ['tmp_name']) - > Save ('upload / upload. JPG '); // file is the name of the uploaded form
if ($upload) {
    return [
        'success' => 1,
        'message' = > upload succeeded ',
        'url' => 'upload/upload.jpg'
    ];
} else {
    return [
        'success' => 0,
        'message' = > upload failed ',
    ];
}

В соответствии с приведенным выше кодом вы можете загружать локальные изображения в редакторе markdown.