javascript - 自定义颜色选择器 TinyMCE

标签 javascript tinymce wysiwyg color-picker

我正在使用 TinyMCE 作为我网站上的所见即所得编辑器,除了使用前景色的现有颜色选择器之外,我还想向编辑器添加自定义颜色选择器。我找到了这个http://fiddle.tinymce.com/lwcaab/16并用它来显示按钮,但有两个问题。我需要过滤该按钮中显示的颜色(仅显示几种颜色),并且当您单击该颜色时,它不会更改编辑器中的字体颜色。

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,


    });

我也在以下位置做了一个 fiddle :http://fiddle.tinymce.com/jYcaab

最佳答案

我做了那个旧 fiddle :) 这是限制颜色的修改后的 fiddle : http://fiddle.tinymce.com/jYcaab/1

将字体应用于内容是另一回事。 更新:现在应用字体:http://fiddle.tinymce.com/jYcaab/2

关于javascript - 自定义颜色选择器 TinyMCE,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15667207/

相关文章:

javascript - Drupal中如何获取压缩文件名?

c# - 找不到路径的一部分 - ASP.net/C# 图片上传

ruby-on-rails - TinyMCE rails Assets 管道

javascript - TinyMCE getContent 给出编码的 URL

javascript - 没有 UI 的 RichText 所见即所得编辑器(仅限 JavaScript API)

javascript - 如何将标题(h1,h2 ...)按钮添加到具有高级主题,简单布局的tinyMCE?

Javascript 疯狂想法寻找节点

javascript insidehtml 显示为文本

javascript - 如何在 JavaScript 中比较用户输入和属性值?

javascript - 如何启用TinyMCE图片上传?