요약:
최근에 내 블로그를 작성하고 있습니다. 이 기간 동안 블로그를 쓸 시간이 없을 수도 있지만, 좋은 것이 있다면 여전히 모든 사람과 공유해야합니다. 블로그 웹 사이트에는 기사를 편집하기위한 편집자가 있어야하므로 온라인으로 정보를 확인했습니다. 대부분의 편집자의 배경은 Java, PHP, ASP 등을 기반으로하며 Node.js를 기반으로하는 사람은 거의 없습니다. 원래 Markdown을 사용하여 기사를 작성하고 싶었지만 스타일은 조정하기 쉽지 않았으므로 마침내 Baidu의 ueditor를 선택했으며 공식 웹 사이트에는 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>
<cript>
var ue = ue.getEditor ( 'editor');
</스크립트>
백엔드 수정 :
다운로드 된 하나는 PHP를 기반으로하며 이제 우리는 그것을 기준으로 node.js로 변경합니다. 먼저 불필요한 PHP 파일을 삭제 한 다음 새 폴더 nodejs를 작성하고 새 파일 config.json을 작성하면 내용은 다음과 같습니다.
코드 사본은 다음과 같습니다.
/* 프론트 엔드 커뮤니케이션 관련 구성의 경우 주석은 멀티 라인 방법 만 허용합니다*/
{{
/* 이미지 구성 항목 업로드*/
"imageActionName": "uploadImage", /* 업로드 이미지의 동작 이름* /
"ImageFieldName": "upfile", /* 제출 된 이미지 양식 이름* /
"imageMaxsize": 2048000, / * 업로드 크기 제한, 단위 B * /
"ImageAllowFiles": [ ".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 이미지 형식 업로드* /
"imageCompressenable": true, / * 이미지를 압축할지 여부, 기본값은 true * /
"ImageCompressborder": 1600, /* 이미지 압축의 최대 가장자리 한계* /
"ImageInsertalign": "none", /* 삽입 된 이미지 플로트 메소드* /
"imageUrlPrefix": "", /* 이미지 액세스 경로 접두사* /
"ImagePathFormat": "/ueditor/php/upload/image/{yyyy} {mm} {dd}/{time} {rand : 6}",/* 저장 경로를 업로드 할 수 있습니다. 저장 경로 및 파일 이름 형식을 사용자 정의 할 수 있습니다.*/
/* {filename}은 원본 파일 이름으로 대체됩니다. 이 구성에서 중국어 가블드 코드의 문제에주의를 기울여야합니다*/
/* {rand : 6}은 임의의 숫자로 대체되며 다음 숫자는 임의 번호*/의 비트 수입니다.
/* {time}은 timestamp*/로 대체됩니다.
/* {yyyy}는 4 자리로 대체됩니다*/
/* {yy}는 올해의 두 자리로 대체됩니다*/
/* {mm}은 2 개월로 교체됩니다*/
/* {dd}는 두 날짜로 대체됩니다*/
/* {hh}는 2 시간으로 교체됩니다*/
/* {ii}는 두 자리로 대체됩니다*/
/* {ss}는 초의 두 자리로 대체됩니다*/
/ * 불법 문자/ : *? "<> | */
/ * 자세한 내용은 온라인 문서를 참조하십시오.
/* 낙서 사진 업로드 구성 항목*/
"ScrawlActionName": "UploadScrawl", /* 업로드 낙서* /
"ScrawlfieldName": "upfile", /* 제출 된 이미지 양식 이름* /
"scrawlpathformat": "/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": "", /* 이미지 액세스 경로 접두사* /
"snapscreeninsertalign": "none", /* 삽입 된 그림 float* /
/* 크롤링 원격 이미지 구성*/
"포수 도메인": [ "127.0.0.1", "localhost", "img.baidu.com"],
"CatcherActionName": "Catchimage", /* 원격 이미지의 동작 이름이 실행됩니다* /
"CatcherfieldName": "소스", /* 제출 된 이미지 목록 양식 이름* /
"CatcherPathFormat": "/ueditor/php/upload/im
"CatcherUrlPrefix": "", /* 이미지 액세스 경로 접두사* /
"CatcherMaxSize": 2048000, / * 업로드 크기 제한, 단위 B * /
"CatcherallowFiles": [ ".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 크롤링 이미지 형식 디스플레이* /
/* 비디오 구성*/
"VideoActionName": "uploadvideo", /* 업로드 된 비디오의 동작 이름* /
"videofieldName": "upfile", /* 제출 된 비디오 양식 이름* /
"videopathformat": "/ueditor/php/upload/video/{yyyy} {mm} {dd}/{time} {rand : 6}",/* 저장 경로를 업로드 할 수 있습니다.
"videourlprefix": "", /* 비디오 액세스 경로 접두사* /
"VideomaxSize": 102400000, / * 업로드 크기 제한, 단위 B, 기본 100MB * /
"videoallowfiles": [
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".Ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], /* 비디오 형식 디스플레이 업로드* /
/* 파일 구성*/
"fileactionName": "uploadfile", /* 컨트롤러, 업로드 된 비디오의 동작 이름* /
"FilefieldName": "Upfile", /* 제출 된 파일 양식 이름* /
"FilePathFormat": "/ueditor/php/upload/file/{yyyy} {mm} {dd}/{time} {rand : 6}",/* 저장 경로를 업로드 할 수 있습니다.
"FileUrlPrefix": "", /* 파일 액세스 경로 접두사* /
"FileMaxSize": 51200000, / * 업로드 크기 제한, 단위 B, 기본 50MB * /
"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".
], /* 파일 형식 디스플레이 업로드* /
/* 지정된 디렉토리에 사진을 나열하십시오*/
"imageManagerActionName": "listImage", /* 이미지 관리의 동작 이름* /
"ImageManagerListPath": "/ueditor/php/upload/image/",/* 이미지를 나열하도록 디렉토리를 지정하십시오*/
"ImageManagerListsize": 20, /* 매번 나열된 파일 수* /
"imageManagerUrlPrefix": "", /* 이미지 액세스 경로 접두사* /
"imageManagerInsertalign": "none", /* 삽입 된 이미지 부동 소수 방법* /
"imageManagerallowFiles": [ ".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 나열된 파일 유형* /
/* 지정된 디렉토리에 파일 목록*/
"FileManagerActionName": "ListFile", /* 실행 파일 관리의 작업 이름* /
"filemanagerListPath": "/ueditor/php/upload/file/",/** 나열 될 파일을 지정*/
"FilEmanagerUrlPrefix": "", /* 파일 액세스 경로 접두사* /
"filemanagerListsize": 20, /* 매번 나열된 파일 수* /
"filemanagerallowfiles": [
".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 = 요구 ( 'body-parser');
app.use (bodyparser.urlencoded ({
확장 : 사실
});
app.use (bodyparser.json ());
app.use ( "/ueditor/ueditor", ueditor (path.join (__ dirname, 'public'), function (req, res, next) {
// ueditor 클라이언트는 업로드 이미지 요청을 시작합니다
if (req.query.action === 'uploadImage') {
var foo = req.euditor;
var imgname = req.euditor.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를보고 모방 할 수 있습니다.
위는 Nodejs 프로젝트에서 Baidu UE 편집기를 통합하는 전체 내용입니다. 나는 모두가 그것을 좋아하기를 바랍니다.