自定義顏色選擇器TinyMCE

我在我的網站上使用TinyMCE編輯WYSIWYG編輯器，除了使用forecolor的現有顏色選擇器以外，我還想向編輯器添加自定義顏色選擇器。我發現這個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

來源

2013-03-27 Mike

我做了較舊的小提琴:) 這裏修改後的小提琴限制顏色：http://fiddle.tinymce.com/jYcaab/1

應用的字體內容是另一回事。更新：字體現在得到應用：http://fiddle.tinymce.com/jYcaab/2

來源

2013-03-28 10:07:39 Thariama

令人敬畏的Thariama。完美的作品。有什麼方法可以使標準顏色選擇器具有默認顏色，並且新顏色選擇器僅具有我們正在尋找的特定顏色？ – Mike 2013-03-28 15:41:10

當然，你需要做的就是定義你自己的color_set在你的init中定義它，稍後再用editor.getParam（'my_own_color_set'） – Thariama 2013-04-02 06:52:08

這裏是我的關於如何創建color_set的問題的鏈接。如果你有機會，任何幫助，將不勝感激：http://stackoverflow.com/questions/15768671/create-custom-color-set-tinymce – Mike 2013-04-02 15:58:43

自定義顏色選擇器TinyMCE

回答

相關問題