ckeditor 사용자 정의 플러그 인 사용 방법 상세 설명

ckeditor 는 기능 이 매우 강 한 부 텍스트 편집 도구 로 우리 에 게 절대 다수의 기능 을 제공 하여 우리 의 일상적인 개발 에 사용 되 는 것 을 만족 시 켰 으 나 특수 한 상황 으로 인해 ckeditor 의 플러그 인 을 수정 해 야 할 수도 있 습 니 다.ckeditor 는 플러그 인 을 확장 하 는 데 편리 한 인 터 페 이 스 를 제공 합 니 다.
프로젝트 의 필요 로 인해 ckeditor 의 업로드 기능 을 다시 써 야 합 니 다.다음은 사용자 정의 이미지 업로드 기능 의 일부 코드 입 니 다.
1.ckeditor/plugins/디 렉 터 리 에 새 editor upload 디 렉 터 리 를 만 들 고 사용자 정의 플러그 인 을 저장 합 니 다.이 디 렉 터 리 에 새 디 렉 터 리 images 를 저장 하고 images 디 렉 터 리 에 플러그 인 이미지 image.png 를 넣 습 니 다.

2.editor upload 디 렉 터 리 에 plugin.js 를 새로 만 듭 니 다.

(function () {
  var a = {
      exec: function (editor) {
        //  jsp         ，
        var url = '../view/fileupload/upload.jsp';
        openDialog({  //openDialog       
          title: '    ',
          url: url,
          height: 600,
          width: 900,
          callback:function(){

          }
        });

      }
    },
    b = 'editorupload';


  CKEDITOR.plugins.add('editorupload', {
    init: function (editor) {
      editor.addCommand(b, a);
      editor.ui.addButton('editorupload', {
        label: '    ', //              
        icon: 'plugins/editorupload/images/image.png',  //        
        command: b
      });
    }
  });
})();

위 코드 에 upload.jsp 페이지 를 새로 만들어 그림 을 업로드 하고 openDialog 를 사용 하여 새 창 을 팝 업 합 니 다.팝 업 상자 의 높이 와 폭 을 설정 합 니 다.
CKEDITOR.plugins.add 는 사용자 정의 editor upload 를 ckeditor 에 추가 합 니 다.
다음은 부분 upload.jsp 페이지 코드 입 니 다.

<div id="mainContent">
  </div>
  <div class=" box">
    <table class=" m-table">
      <colgroup>
        <col width="20%"/>
        <col width="80%"/>
      </colgroup>
      <tr>
        <td style="vertical-align:top;"><label class="module-name">    </label></td>
        <td>
          <ul>
            <li>1、《PC      》   666×250      ；《APP      》   422×262      ；</li>
            <li>3、           ；</li>
          </ul>
        </td>
      </tr>
    </table>
  </div>

  <div id="Pictures" class="detailWraper nopadding" style="display: none;height: auto;">
    <input id="hidPicturesStatus" type="hidden" value="0"/>
    <input id="hidCurrPictures" type="hidden" value=''/>
    <input id="hidDictSuggestion" type="hidden" value=''/>
    <table>
      <tr>
        <td>
          <div id="fileQueue"></div>
          <div id="picWrapper"></div>
          <a id="fake-dlg-bigPic" href="javascript:void(0)" style="display: none;"></a>
          <div id="dlg-bigPic" class="popImg" style="display: none;">
            <a class="leftBtn" href="javascript:void(0)"></a>
            <a class="rightBtn" href="javascript:void(0)"></a>
            <a class="closeImgBtn" href="javascript:void(0)"></a>
            <div class="imgList">
              <ul></ul>
            </div>
          </div>
          <div class="validation-summary-valid">
            <ul>
              <li style="display: none"></li>
            </ul>
          </div>

        </td>
      </tr>
    </table>
  </div>
  <div>
    <button id="fileUpload">    </button>
    <button id="submit" class="btn btn-primary" style="vertical-align: top;line-height:23px;width:112px;height: 35px;">    
    </button>
  </div>
</div>

upload.jps 페이지 부분의 js 코드:

//    
    photoTaskDetail.submit = function () {
      var pictures = window.picManager._getPictures();
      if (pictures.length < 1) {
        alert('     1   ');
        return false;
      }
      for (var i in pictures) {
        var imgPath = "<img src='" + staticFileRoot + pictures[i].URL + "'/>";
        var element = window.parent.CKEDITOR.dom.element.createFromHtml(imgPath);
        window.parent.CKEDITOR.instances.editorContent.insertElement(element);
      }
      parent.closeDialog(false);
    }

위의 코드 에 서 는 여러 장의 사진 을 올 려 각각 ckeditor 에 사진 을 넣 을 수 있다.
ckeditor 의 config.js 설정:

config.extraPlugins += (config.extraPlugins ? ',editorupload' : 'editorupload');
CKEDITOR.editorConfig = function( config ) {
  config.font_names= '  /  ;  /  ;  /  _GB2312;  /  _GB2312;  /  ;  /  ;    /    ;'+ config.font_names;
  config.language = 'zh-cn';
  config.extraPlugins += (config.extraPlugins ? ',lineheight' : 'lineheight');
  config.extraPlugins += (config.extraPlugins ? ',editorupload' : 'editorupload');
  CKEDITOR.config.lineheight_sizes = CKEDITOR.config.lineheight_sizes +  '30px'; 
  config.height = 650;
  config.toolbarCanCollapse = true;
  config.uiColor = '#90B8E9';
  config.toolbar = 'Full';
  config.toolbar_Full = [
   { name: 'document',  items: [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
   { name: 'clipboard',  items: [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
   { name: 'links',    items:['Link','Unlink']},
   { name: 'insert',   items:['HorizontalRule','Table','Image'] },

   '/',
   { name: 'basicstyles', items: [ 'Bold','Underline','Strike','Subscript','Superscript','-','RemoveFormat'] },
   { name: 'paragraph',  items: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
   { name: 'styles',items: ['lineheight','Format','Font','FontSize']},
   { name: 'colors',items: ['TextColor', 'BGColor']},
   { name: 'tools', items : [ 'Maximize','editorupload'] }
];

편집기 upload 플러그 인 을 ckeditor 에 추가 합 니 다.
다음은 실 현 된 부분 캡 처 입 니 다.


요약:사용자 정의 플러그 인 과정 에서 원래 플러그 인의 그림 을 삽입 하 는 기능 을 열 어야 합 니 다.업 로드 를 담당 하 는 그림 은 ckeditor 에 넣 지 않 고 그림 주 소 는 자동 으로 걸 러 집 니 다.이것 은 ckeditor 버 전의 bug 로 인 한 것 일 수 있 습 니 다.해결 방안 이 있 는 환영 지도.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.