node.js는 Baidu UE editor_node.js를 통합합니다.

요약:
나는 최근에 나만의 블로그를 만들고 있는데 한동안 블로그에 쓸 시간이 없을 수도 있지만, 그래도 좋은 것들을 모두와 공유해야 합니다. 블로그 웹사이트에는 기사를 편집하기 위한 편집자가 있어야 하기 때문에 온라인에서 몇 가지 정보를 확인했습니다. 대부분의 편집자의 배경은 java, php, asp 등을 기반으로 하며 node.js를 기반으로 하는 경우는 거의 없습니다. 원래는 마크다운을 사용해 기사를 작성하고 싶었지만 스타일을 조정하기 어려워 결국 Baidu의 ueditor를 선택했습니다. 공식 홈페이지에는 node.js 기반의 코드가 없습니다. 그런데 운 좋게도 github에서 비슷한 것을 발견해서 공유하겠습니다. node.js를 사용하여 자신의 블로그를 개발할 계획이라면 참고하시면 됩니다.

참고자료 다운로드:

먼저 ueditor 공식 웹사이트에 가서 코드를 다운로드합니다. 개발 버전인 1.4.3php utf-8 버전을 압축을 푼 후 여기에서 파일 이름을 ueditor로 변경했습니다. 그런 다음 필요한 페이지 헤더에

세 줄을 추가하세요.

코드 복사 코드는 다음과 같습니다.

그런 다음 필요한 경우 다음 코드를 호출하세요

코드 복사 코드는 다음과 같습니다.

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}은 타임스탬프로 대체됩니다 */
/* {yyyy}는 4자리 연도로 대체됩니다 */
/* {yy}는 두 자리 연도로 대체됩니다 */
> >      되었습니다            되었습니다. /* {dd}는 두 자리 날짜로 대체됩니다 */
/* {hh}는 2시간으로 대체됩니다 */
/* {ii}는 두 자리 분으로 대체됩니다 */
/* {ss}는 두 자리 초로 대체됩니다 */
/* 잘못된 문자: * ? " < > | */
/* 자세한 내용은 온라인 설명서를 참조하세요: fex.baidu.com/ueditor/#use-format_upload_filename */
/* Tuya 이미지 업로드 구성 항목 */
"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", /* 삽입된 그림 플로팅 메서드 */
/* 원격 이미지 구성 캡처 */
"catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],
"catcherActionName": "catchimage", /* 원격 이미지를 캡처하는 데 사용되는 작업 이름 */
"catcherFieldName": "source", /* 제출된 이미지 목록 양식 이름 */
"catcherPathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 저장 경로 업로드, 저장 경로 및 파일 이름 형식을 사용자 정의할 수 있습니다. * /
"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 = 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 클라이언트가 이미지 업로드 요청을 시작합니다
If (req.query.action === '이미지 업로드') {
      var foo = req.ueditor;
      var imgname = req.ueditor.filename;
      var img_url = '/images/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 편집기를 통합하는 모든 내용입니다.