Ueditor를 사용하여 이미지를 업로드한 후 스타일 클래스 이름을 사용자 정의하는 방법 소개
- 高洛峰원래의
- 2017-03-15 11:39:021686검색
Ueditor는 Baidu의 서식 있는 텍스트 플러그인입니다. 사용자가 프런트엔드 언어를 알고 있으면 적용성이 매우 좋습니다. 특히 현재 모바일 수직 및 수평 상황에서 더욱 그렇습니다. 그러나 사용자가 프로그래밍을 이해하지 못하는 경우가 많아 프런트엔드 언어를 사용하도록 하는 것은 불가능합니다. 이를 위해서는 개발 중에 전체 스타일을 정의해야 합니다.
일반적인 상황에서는 업로드하는 이미지의 너비와 높이가 고정되어 있으므로 모바일 기기에 적합하도록 너비를 100%로 정의해야 합니다. 또는 수업을 추가하면 맞춤 설정할 수 있습니다. 이것이 우리의 생각입니다.
다음은 수정된 코드입니다:
UE.plugin.register('simpleupload ', 함수(){
...
function initUploadBtn(){
...
domUtils.on(btnIf rame, 'load', function(){
...
domUtils.on(input, 'change', function(){
.. .
me.execCommand('inserthtml', 'class" id="' + loadingId + '" src="' + me. options.themePath + me.options.theme +'/images/spacer.gif" title="' + (me.getLang('simpleupload.loading') || '') + '" > ;' );//여기서 사용자 정의 스타일을 추가할 수 있다고 인터넷에 나와 있습니다. ueditor.all.js: #24461 Line
me.execCommand('inserthtml', '
함수 콜백(){
...
domUtils.set Style(loader, 'width', '100%');// 컨트롤 스타일 스타일 설정#24527
...
domUtils .addClass(loader, '커스텀 스타일 클래스 이름');//구현 가능한 내장 메소드입니다 #24534
...
}
...
})
...
})
...
}
...
})
스타일 설정 시 usditor.config.js도 수정해야 합니다
(function(){
...
window.UEDITOR_CONFIG = {
...
// xss 필터 화이트리스트 목록 소스: http://www.php.cn/
,whit목록: {
...
img: ['src ', 'alt', 'title', 'width', 'height', 'id', '_src', 'loadingclass', 'class', 'data-latex', 'style'],//필터 허용 목록 스타일 추가#403
...
}
...
}
...
})
위 내용은 Ueditor를 사용하여 이미지를 업로드한 후 스타일 클래스 이름을 사용자 정의하는 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!