2015-02-05 1 views
5

내 현재 이미지 등록 정보 대화 상자에는 Image InfoLink 탭만 사용할 수 있습니다. 그 때문에이 대화 상자 변경하려면 : 나는 제거 할CKEditor에서 이미지 속성 대화 상자를 구성하려면 어떻게합니까?

  1. 을 너비, 높이,
  2. 내가 Link 탭을 제거 할 Image Info 화면에서 테두리, HSPACE, VSPACE, 정렬 및 미리보기 요소
  3. 나는 사용자가 로컬 컴퓨터에있는 이미지 파일을 선택할 수 있도록 Upload 탭을 사용하려면

나는 검색을 많이 해왔지만에서 위의 모든 작업을 수행하는 방법을 이해할 수 없다 . 제발 포인터주세요. CKEditor 4.4.6 표준을 사용하고 있습니다.

답변

5

좋아, 여기에 이미지 대화 처리하는 방법에 대한 코드입니다 : 포인트 3

CKEDITOR.on('dialogDefinition', function(ev) { 
    var editor = ev.editor; 
    var dialogName = ev.data.name; 
    var dialogDefinition = ev.data.definition; 

    if (dialogName == 'image') { 
     var infoTab = dialogDefinition.getContents('info'); 
     infoTab.remove('txtBorder'); //Remove Element Border From Tab Info 
     infoTab.remove('txtHSpace'); //Remove Element Horizontal Space From Tab Info 
     infoTab.remove('txtVSpace'); //Remove Element Vertical Space From Tab Info 
     infoTab.remove('txtWidth'); //Remove Element Width From Tab Info 
     infoTab.remove('txtHeight'); //Remove Element Height From Tab Info 

     //Remove tab Link 
     dialogDefinition.removeContents('Link'); 
    } 
}); 

은 이미지 브라우징 기능을 포함 ... 그리고하지 않는 기본 CKEditor이 의미가 업로드 찾아보기 버튼이 나타나지 않습니다 ...

여기에는 3 가지 옵션이 있으며,이 페이지에서 내 의견을 볼 수 있습니다 : link 어떻게 할 수 있습니까?

+0

ckeditor 4.x를 사용하고 있습니다. 위의 코드를 사용하여 링크 탭을 제거하려고했지만 작동하지 않습니다. 오류가 발생했습니다 : 잡히지 않은 TypeError : null의 속성 'remove'를 읽을 수 없습니다. – jhedm

2

다음 리소스가 도움이 될 수 있습니다

  • CKEditor 개발자 용 문서의 Dialog Windows HOWTO 섹션.
  • Using CKEditor Dialog API 샘플 (로컬 CKEditor 패키지에서도 사용 가능) - 소스 코드에서 변경 사항을 확인하십시오.
  • Developer Tools 모든 CKEditor 대화 상자 창 요소의 이름과 ID를 표시하는 플러그인입니다.
+0

나는 그 문서를 보았지만 여전히 혼란 스럽다. 사용자가 로컬 컴퓨터에서 이미지 파일을 선택하여 다른 곳에 호스팅 된 이미지 파일을 가리키는 URL이 아닌 텍스트 영역에 포함시킬 수있는 기능을 추가하고 싶습니다. 어떻게 할 수 있는지 제안 해 주시겠습니까? –

관련 문제