PHP에서 Baidu UE(ueditor 1.4.3)를 통합하는 방법

PHP에서 Baidu UE(ueditor 1.4.3)를 통합하는 방법

최근 많은 블로거들이 Baidu UE(ueditor 1.4.3) 통합 방법을 문의해 왔는데, 도저히 답변을 드릴 수가 없어서, Baidu UE1 최신 버전 통합 아이디어에 대해 글을 쓰겠습니다. 이 글에서는 4.3을 사용합니다.

다운로드 및 설치

1. 먼저 공식 웹사이트에 가서 최신 버전의 UE1.4.3을 다운로드하세요.

UE 공식 다운로드 주소: http://ueditor.baidu.com/website/download.html#ueditor

여기서 다운로드한 것은 1.4.3PHP 버전입니다. 사용하고 있는 버전을 다운로드하면 됩니다.

프로젝트에 파일 압축을 푼다

2. 프론트엔드 HTML 페이지에 UE에 필요한 JS 파일을 소개한 후 getEditor를 사용하여 인스턴스화합니다.

<span><</span><span>body</span><span>></span> <span><!--</span><span> 加载编辑器的容器 </span><span>--></span> <span><</span><span>script </span><span>id</span><span>="container"</span><span> name</span><span>="content"</span><span> type</span><span>="text/plain"</span><span>></span><span> 这里写你的初始化内容 </span><span></</span><span>script</span><span>></span> <span><!--</span><span> 配置文件 </span><span>--></span> <span><</span><span>script </span><span>type</span><span>="text/javascript"</span><span> src</span><span>="ueditor.config.js"</span><span>></</span><span>script</span><span>></span> <span><!--</span><span> 编辑器源码文件 </span><span>--></span> <span><</span><span>script </span><span>type</span><span>="text/javascript"</span><span> src</span><span>="ueditor.all.js"</span><span>></</span><span>script</span><span>></span> <span><!--</span><span> 实例化编辑器 </span><span>--></span> <span><</span><span>script </span><span>type</span><span>="text/javascript"</span><span>></span> <span>var</span><span> ue </span><span>=</span><span> UE.getEditor(</span><span>'</span><span>container</span><span>'</span><span>); </span><span></</span><span>script</span><span>></span> <span></</span><span>body</span><span>></span>

​

페이지를 탐색하면 Ueditor가 표시됩니다. 말은 참 간단하지 않나요?

Ueditor 구성

UEditor의 구성 항목은 프런트엔드 구성 항목과 백엔드 구성 항목이라는 두 가지 범주로 나뉩니다.

프런트엔드 및 프런트엔드 구성은 백엔드에 작성됩니다(구성의 PHP 버전은 php/config.json에 있음). 편집기가 인스턴스화되면 백엔드 구성 정보가 비동기적으로 읽혀집니다. 프런트엔드 구성에 덮어쓰여집니다.

백엔드에서 얻은 구성 항목 > 수신 구성 항목 인스턴스화 > ueditor.config.js 파일의 구성 항목

프런트엔드 구성 항목: 정적 구성과 동적 구성이라는 두 가지 구성 방법을 공식적으로 제공합니다.

정적 구성: 즉, ueditor 디렉터리에 ueditor.config.js를 구성합니다. 특정 구성 항목은 http://fex-team.github.io/ueditor/#start-config를 참조하세요.

동적 구성: 즉, UE를 인스턴스화할 때 구성 매개변수가 동적으로 전달됩니다.

<span>var</span> ue = UE.getEditor('container'<span>, { </span><span>//</span><span>这里写你的自定义配置项</span> <span> toolbars: [
        [</span>'fullscreen', 'source', 'undo', 'redo', 'bold'<span>]
    ],
    autoHeightEnabled: </span><span>true</span><span>,
    autoFloatEnabled: </span><span>true</span><span> });</span>

​

백엔드 구성 항목:

먼저 UE의 요청에 대해 이야기해 보겠습니다. UE의 모든 작업은 다음 작업을 위해 get 메서드를 통해 작업 변수의 값을 전달하도록 serverUrl에 요청하는 것입니다. 구성 가져오기, 사진 업로드, 사진 가져오기 및 기타 작업을 수행합니다.

UE는 기본적으로 디렉터리의 ueditor.config.js에서 serverUrl 매개 변수를 읽은 다음 get 메서드를 통해 action=config를 전달하여 백엔드 구성 항목을 얻습니다. 기본 요청은 구성 항목을 얻기 위한 serverUrl?action=config입니다. serverUrl은 프런트 엔드 페이지에서 동적으로 구성하거나 ueditor.config.js에서 정적으로 구성할 수 있습니다.

웹사이트 아래의 ueditor/php/controller.php?action=config 경로가 백엔드 구성 콘텐츠를 json 형식으로 반환하는지 테스트할 수 있습니다(다른 형식도 사용 가능합니다. 자세한 내용은 공식 문서를 참조하세요). . 이 요청이 잘못되어 400, 500 등의 오류가 발생하면 에디터 업로드 관련 기능이 제대로 작동하지 않게 됩니다.

<span>{ </span>"imageUrl": "http://localhost/ueditor/php/controller.php?action=uploadimage"<span>, </span>"imagePath": "/ueditor/php/"<span>, </span>"imageFieldName": "upfile"<span>, </span>"imageMaxSize": 2048<span>, </span>"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"<span>] </span>"其他配置项...": "其他配置值..."<span> }</span>

​

통합

앞서 언급했듯이 UE의 모든 작업은 다음 작업을 위해 get 메소드를 통해 action 변수의 값을 serverUrl에 전달하도록 요청하는 것입니다. 구성 가져오기, 사진 업로드, 사진 가져오기 및 기타 작업 . PHP 통합을 위해 이것을 얻었습니다. 아니면 다른 언어는 매우 간단합니다. 특정 코드는 공식 데모를 참조하세요.

​

위 내용은 Baidu UE의 내용을 포함하여 PHP에서 Baidu UE(ueditor 1.4.3)를 통합하는 방법을 소개한 내용입니다. PHP 튜토리얼에 관심이 있는 친구들에게 도움이 되길 바랍니다.