краткое содержание:
Недавно я строю свой собственный блог. Возможно, у меня не будет времени написать блог в течение этого периода, но мне все равно придется поделиться им со всеми, если у меня есть хорошие вещи. Веб -сайты в блогах должны иметь редактор для редактирования статей, поэтому я проверил некоторую информацию в Интернете. Один из редакторов основан на Java, PHP, ASP и т. Д., И немногие основаны на Node.js. Первоначально я хотел использовать Marckdown для написания статей, но стиль был нелегко настроить, поэтому я наконец выбрал Ueditor Baidu, и на его официальном веб -сайте нет кода, основанного на node.js. Но, к счастью, я нашел подобный на GitHub, поэтому я поделюсь им с вами. Если вы планируете использовать Node.js для разработки своего собственного блога, вы можете обратиться к нему.
Скачать цитату:
Во -первых, я загрузил код на официальном сайте Ueditor. Я скачал версию разработки 1.4.3PHP UTF-8 версии. После декомпрессии поместите файл в публичный каталог. Здесь я переименую его в Ueditor. Затем добавьте эти три строки в голову страницы, которая вам нужна
Кода -копия выглядит следующим образом:
<script type = "text/javascript" charset = "utf-8" src = "/ueditor/ueditor.config.js"> </script>
<script type = "text/javascript" charset = "utf-8" src = "/ueditor/ueditor.all.min.js"> </script>
<script type = "text/javascript" charset = "utf-8" src = "/ueditor/lang/zh-cn/zh-cn.js"> </script>
Затем вызовите следующий код, где это необходимо
Кода -копия выглядит следующим образом:
<script id = "editor" type = "text/plain"> </script>
<Скрипт>
var ue = ue.geteditor ('редактор');
</script>
Бэкэнд модификация:
Скачаемый основан на PHP, и теперь мы изменим его на Node.js на основе. Сначала удалите ненужный файл PHP, затем создайте новую папку Nodejs и создайте новый файл config.json в этом каталоге, содержимое следующее:
Кода -копия выглядит следующим образом:
/* Для конфигураций, связанных с передней частью связи, комментарии разрешают только многострочные методы*/
{
/* Загрузить элемент конфигурации изображения*/
"ImageActionName": "uploadImage", /* Имя действия изображения загрузки* /
"ImageFieldName": "upFile", /* Отправлено имя формы изображения* /
"ImageMaxSize": 2048000, / * Предел размера загрузки, блок B * /
«Omeallowfiles»: [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* Загрузите формат изображения, чтобы отобразить* / /
"ImageCompresseable": true, / * Сжатие изображений, по умолчанию это правда * /
«ImageCompressborder»: 1600, /* Максимальный крайний предел для сжатия изображения* /
"ImageInsertAlign": "none", /* вставлено метод плавания изображения* /
"ImageUrlPrefix": "", /* ПРЕДВИЖИЕ ПРЕДУПРЕЖДЕНИЯ ДОСТАВКА* /
"ImagePathformat": "/ueditor/php/upload/image/{yyyy} {mm} {dd}/{time} {rand: 6}",/* загрузить путь сохранения, вы можете настроить путь сохранения и формат имени файла*//
/* {filename} будет заменен исходным именем файла. Вы должны обратить внимание на проблему искаженного кода китайского языка в этой конфигурации*/
/* {rand: 6} будет заменен на случайное число, а следующее число - это количество бит случайного числа*/
/* {Time} будет заменен на временной метки*/
/* {yyyy} будет заменен на четырехзначный год*/
/* {yy} будет заменен на две цифры года*/
/* {mm} будет заменен на два месяца*/
/* {dd} будет заменен на две даты*/
/* {hh} будет заменен на два часа*/
/* {ii} будет заменен на две цифры*/
/* {ss} будет заменен на две цифры секунд*/
/ * Нелегальные символы/: *? "<> | */
/ * Пожалуйста, обратитесь к онлайн-документу для получения подробной информации: fex.baidu.com/ueditor/#use-format_upload_filename *//
/* Граффити
"ScrawlActionName": "uploadScrawl", /* Имя действия загрузки граффити* /
"ScrawlfieldName": "upFile", /* Отправлено имя формы изображения* /
"ScrawPathformat": "/ueditor/php/upload/image/{yyyy} {mm} {dd}/{time} {rand: 6}",/* загрузить путь сохранения, вы можете настроить путь сохранения и формат имени файла*//
"ScrawlMaxSize": 2048000, / * Предел размера загрузки, блок B * /
"scrawlurlprefix": "", /* Префикс пути доступа к изображению* /
"ScrawlInsertAlign": "нет",
/* Загрузите инструмент экрана*//
"SnapscreenactionName": "uploadImage", /* Имя действия экрана загрузки* / /
"SnapsCreenPathformat": "/ueditor/php/upload/image/{yyyy} {mm} {dd}/{time} {rand: 6}",/* загрузить путь сохранения, вы можете настроить путь сохранения и формат имени файла*/
"Snapscreenurlprefix": "", /* Prefix доступа к изображению* / /
"Snapscreeninsertalign": "нет", /* вставленное изображение float* /
/* Clawl удаленная конфигурация изображения*/
«Catcherlocaldomain»: ["127.0.0.1", "Localhost", "img.baidu.com"],
«CatcherActionName»: «CatchImage», /* Имя действия удаленного изображения выполняется* /
«CatcherfieldName»: «Источник», /* Отправлено имя списка изображений.
"CatcherPathformat": "/ueditor/php/upload/image/{yyyy} {mm} {dd}/{time} {rand: 6}",/* загрузить путь сохранения, вы можете настроить путь сохранения и формат имени файла*//
"Catcherurlprefix": "", /* Префикс пути доступа к изображению* /
«CatcherMaxSize»: 2048000, / * Предел размера загрузки, блок B * /
"CatcherAllowfiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* Покат изображения Crawl.
/* Загрузить видео конфигурацию*/
"VideoActionName": "uploadVideo", /* Имя действия загруженного видео* /
"VideoFieldName": "upFile", /* Представлено имя видео формы* /
"VideoPathformat": "/ueditor/php/upload/video/{yyyy} {mm} {dd}/{time} {rand: 6}",/* загрузить путь сохранения, вы можете настроить путь сохранения и формат имени файла*//
"Videourlprefix": "", /* Префикс пути доступа к видео* /
"VideomaxSize": 102400000, / * Предел размера загрузки, блок B, по умолчанию 100 МБ * /
"VideoAllowfiles": [
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], /* Загрузить видео формат* / / /
/* Загрузить конфигурацию файла*/
"FileActionName": "uploadfile", Controller, имя действия загруженного видео* /
"FileFieldName": "upFile", /* Отправлено имя формы файла* /
"filePathformat": "/ueditor/php/upload/file/{yyyy} {mm} {dd}/{time} {rand: 6}",/* загрузить путь сохранения, вы можете настроить путь сохранения и формат имени файла*//
"FileUrlprefix": "", /* Префикс доступа к файлу* / /
«FileMaxSize»: 51200000, / * Предел размера загрузки, блок B, по умолчанию 50 МБ * /
"FilealLowfiles": [
".png", ".jpg", ".jpeg", ".gif", ".bmp",
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"
".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
], /* Upload file format Display* /
/* Перечислите изображения в указанном каталоге*/
"ImageManagerActionName": "ListImage", /* Имя действия управления изображениями* /
"ImageManagerListPath": "/ueditor/php/upload/image/",/* Укажите каталог, чтобы перечислить изображение*/
"ImageManagerListsize": 20, /* Количество файлов, перечисленных каждый раз* /
"ImageManagerUrlprefix": "", /* Префикс пути доступа к изображению* /
"ImageManagerInsertAlign": "нет", /* вставленное изображение плавающее метод* /
"ImageManagerAllayFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* Перечисленные типы файлов* /
/* Списки файлов в указанном каталоге*/
"FileManagerActionName": "ListFile", /* Имя действия управления файлами выполнения* /
"FileManagerListPath": "/ueditor/php/upload/file/",/* Укажите каталог, в котором файл должен быть указан*/
"FileManagerUrlPrefix": "", /* Префикс пути доступа к файлу* /
"FileManagerListSize": 20, /* Количество файлов, перечисленных каждый раз* /
"FileManagerAllayFiles": [
".png", ".jpg", ".jpeg", ".gif", ".bmp",
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"
".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
] /* Перечисленные типы файлов* /
}
Затем найдите файл ueditor.config.js, найдите строку ниже, а затем измените кавычки на свой собственный фоновый путь.
ServerUrl: url + "php/controller.php"
например:
ServerUrl: URL + "Ueditor"
Нам нужно установить следующие пакеты
Кода -копия выглядит следующим образом:
"Зависимости": {
"Body-Parser": "~ 1.0.0",
"Express": "~ 4.2.0",
"Ueditor": "^1.0.0"
}
Фоновый код:
Кода -копия выглядит следующим образом:
var Express = require ('express'); var path = require ('path');
var app = express ();
var ueditor = require ("ueditor");
var bodyparser = require ('body-parser');
app.use (bodyparser.urlencoded ({
Расширен: правда
}));
app.use (bodyparser.json ());
app.use ("/ueditor/ueditor", ueditor (path.join (__ dirname, 'public'), function (req, res, next) {
// ueditor Client инициирует запрос на загрузку изображения
if (req.query.action === 'uploadimage') {
var foo = req.ueditor;
var imgname = req.ueditor.filename;
var img_url = '/images/ueditor/';
// Вам просто нужно ввести адрес, который вы хотите сохранить. Оставьте операцию сохранения в Ueditor
res.ue_up (img_url);
}
// Клиент инициирует запрос списка изображений
else if (req.query.action === 'listimage') {
var dir_url = '/images/ueditor/';
// клиент перечисляет все изображения в каталоге DIR_URL
res.ue_list (dir_url);
}
// клиент инициирует другие запросы
еще {
res.setheader ('content-type', 'application/json');
res.redirect ('/ueditor/nodejs/config.json');
}
}));
Примечание: вышеуказанное обрабатывает загрузку изображений. Для загрузки видео вы можете просмотреть официальный API веб -сайта и подражать им.
Выше приведено все содержание интеграции редактора Baidu UE в проект Nodejs. Я надеюсь, что всем понравится.