Baidu ueditor에 사진 업로드 후 스타일을 설정하는 방법

UEditor는 Baidu 웹 프런트엔드 R&D 부서에서 개발한 WYSIWYG 서식 있는 텍스트 웹 편집기입니다. 가볍고 사용자 정의가 가능하며 사용자 경험에 중점을 두고 있으며 MIT 라이선스를 기반으로 하는 오픈 소스이며 널리 사용되는 코드를 포함하여 무료로 사용하고 수정할 수 있습니다. 서식 있는 텍스트 편집기, 특수 기능, 원본 및 여러 가지 새로운 편집 작업 모드.

UEditor가 이미지 업로드 후 콘텐츠 표시 중에 이미지 스타일을 어떻게 수정하는지 살펴보겠습니다. 하지만 이모티콘도 img 태그이므로 전역 수정이 문제가 됩니다.

따라서 플러그인 코드 수정만 시작할 수 있습니다.

먼저 이미지가 업로드된 서버 세그먼트 파일을 찾으세요. 다음은 주로 PHP에 대한 설명입니다.

php 디렉토리에서 Uploader.class.php의 337번째 줄을 찾으세요.

public function getFileInfo()
   {
       return array(
           "state" => $this->stateInfo,
           "url" => $this->fullName,
           "title" => $this->fileName,
           "original" => $this->oriName,
           "type" => $this->fileType,
	   "class"=> "aaa"
           "size" => $this->fileSize，

       );
   }

이런 방식으로 반환된 json에는 클래스 속성 값이 하나 더 있습니다.

​

하나는 js를 수정하는 것입니다.

ueditor.all.js에서 다음 코드 24461을 찾으세요.

JS 수정

function callback(){
try{
var link, json, loader,
body = (iframe.contentDocument || iframe.contentWindow.document).body,
result = body.innerText || body.textContent || '';
json = (new Function("return " + result))();
link = me.options.imageUrlPrefix + json.url;
if(json.state == 'SUCCESS' && json.url) {
loader = me.document.getElementById(loadingId);
loader.setAttribute('src', link);
loader.setAttribute('_src', link);
loader.setAttribute('class', json.class || ''); //添加行代码
loader.setAttribute('title', json.title || '');
loader.setAttribute('alt', json.original || '');
loader.removeAttribute('id');
domUtils.removeClasses(loader, 'loadingclass');
} else {
showErrorLoader && showErrorLoader(json.state);
}
}catch(er){
showErrorLoader && showErrorLoader(me.getLang('simpleupload.loadError'));
}
form.reset();
domUtils.un(iframe, 'load', callback);
}

​

이런 식으로 사진을 업로드하면 업로드된 사진에 추가 스타일이 있음을 확인할 수 있습니다.

위 내용은 바이두 유에디터의 내용을 포함하여 바이두 유에디터에 이미지를 업로드한 후 스타일을 설정하는 방법을 소개하고 있으니 PHP 튜토리얼에 관심이 있는 친구들에게 도움이 되었으면 좋겠습니다.