사용자 지정 색 선택기 TinyMCE

내 사이트의 WYSIWYG 편집기에 TinyMCE를 사용하고 있으며 forecolor를 사용하는 기존 colorpicker 외에도 사용자 지정 색상 선택기를 편집기에 추가하고 싶습니다. 이 http://fiddle.tinymce.com/lwcaab/16을 발견하고 버튼을 표시하는 데 사용했지만 2 가지 문제가 있습니다. 해당 버튼에 나타나는 색상을 필터링해야합니다 (두 가지 색상 만 표시). 색상을 클릭하면 편집기에서 글꼴 색상이 변경되지 않습니다.사용자 지정 색 선택기 TinyMCE

tinymce.create('tinymce.plugins.ExamplePlugin', { 
    createControl: function(n, cm) 
     { 
      switch(n) 
      { 
      case "universityColors": 
       var o = {}; 
       ed=tinyMCE.activeEditor; 
       o.scriptURL = ed.baseURI.getURI(); 
       o['class'] = 'mce_forecolor'; 
       o.title='University Font Colors'; 
       o.scope=this; 
       o.image = '../images/uor.ico', 
       o.onclick = function (color) { console.log('clicked',color);/*this.cs.showMenu(); if (this.o.onClick) this.o.onClick(c);*/}; 
       o.onselect = function (color) {console.log('selected',color); /*this.color=this.o.color=c; if (this.o.onSelect) this.o.onSelect(c);*/}; 

       var mcsb = cm.createColorSplitButton('universityColors', o); 

       // return the new ColorSplitButton instance 
       return mcsb; 
      } 
      return null; 
     } 
    }); 
tinymce.PluginManager.add('universityColorPicker', tinymce.plugins.ExamplePlugin); 
tinyMCE.init({ 
    mode: "specific_textareas", 
    editor_selector: "tinyMCE", 
    theme : "advanced", 
    plugins : "emotions,spellchecker,advhr,insertdatetime,preview, -universityColorPicker", 

    // Theme options - button# indicated the row# only 
    theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,|,justifyleft,justifycenter,justifyright,fontselect,fontsizeselect,formatselect", 
    theme_advanced_buttons2 : "cut,copy,paste,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,image,|,code,preview,|,forecolor,backcolor, universityColors", 
    theme_advanced_buttons3 : "insertdate,inserttime,|,spellchecker,advhr,,removeformat,|,sub,sup,|,charmap,emotions",  
    theme_advanced_toolbar_location : "top", 
    theme_advanced_toolbar_align : "left", 
    theme_advanced_statusbar_location : "bottom", 
    theme_advanced_resizing : true, 


    });

나는에서도의의 작업 바이올린을 만들었습니다 : 글꼴에 적용 http://fiddle.tinymce.com/jYcaab/1

: http://fiddle.tinymce.com/jYcaab

출처

2013-03-27 Mike

내가 만든 색상을 제한 여기에 오래된 바이올린 : 수정 된 바이올린이 내용은 또 다른 이야기입니다. 업데이트 : 이제 글꼴이 적용됩니다. http://fiddle.tinymce.com/jYcaab/2

출처

2013-03-28 10:07:39 Thariama

굉장한 Thariama. 완벽하게 작동합니다. 표준 색상 선택 도구가 기본 색상을 갖고 새로운 색상 선택 도구가 특정 색상 만 가질 수있게하는 방법이 있습니까? – Mike

확실히, 당신이해야 할 일은 자신의 color_set을 정의하고 init에서 정의한 다음 나중에 editor.getParam ('my_own_color_set')을 사용하는 것입니다. – Thariama

다음은 color_set을 만드는 방법에 대한 제 질문의 링크입니다. 당신이 기회를 얻는다면, 어떤 도움을 주시면 감사하겠습니다 : http://stackoverflow.com/questions/15768671/create-custom-color-set-tinymce – Mike

사용자 지정 색 선택기 TinyMCE

답변

관련 문제