向Redactor WYSIWYG添加自定义下拉列表/按钮

时间:2012-11-23 16:42:59

标签: javascript jquery wysiwyg redactor

我有两个问题:

  1. 我想尝试这样一个按钮:

    buttons: buttons,
    buttonsCustom: {
      sh: {
        title: 'Syntax Highlighter', 
        callback: function(){
          var html = "<pre class='brush:'></pre>";
          this.execCommand('inserthtml', html);
        }
      }
    }
    

    我的按钮出现但是当我点击它时,它会说&#34;这个&#34;没有&#34; execCommand&#34;功能。它是如何工作的 ?我怎么能这样说&#34;这个&#34;是Redactor? 你知道我的意思吗?

  2. 是否可以创建下拉列表?

3 个答案:

答案 0 :(得分:6)

我想在redactor中添加一个自定义按钮。我拿了你的代码,我为了我的目的改变了代码。它对你有用,你可以看看:

$(document).ready(
    function()
    {
        $('.redactor').redactor({ 
            focus: true,
            buttonsAdd: ['|', 'token'], 
            buttonsCustom: {
                token: {
                    title: 'Ajouter une variable', 
                    dropdown: {
                        header: {title: 'Entête',callback: function(obj){obj.insertHtml('%header%');}},
                        footer: {title: 'Signature',callback: function(obj){obj.insertHtml('%footer%');}},
                        last_name: {title: 'Nom',callback: function(obj){obj.insertHtml('%last_name%');}},
                        first_name: {title: 'Prénom',callback: function(obj){obj.insertHtml('%first_name%');}},
                        date: {title: 'Date',callback: function(obj){obj.insertHtml('%date%');}},
                        contract: {title: 'Contrat',callback: function(obj){obj.insertHtml('%contract%');}}
                    }
                } 
            }
        }); 
    }
);

干杯

答案 1 :(得分:1)

我自己解决了这个问题:

callback: function(obj){
  var html = "<pre class='brush:'></pre>";
  obj.execCommand('inserthtml', html);
}

答案 2 :(得分:0)

查看编辑器源代码(最新版本8.2.6),我注意到您可以将第四个参数传递给插件API的addBtn函数来描述下拉列表。所以,假设你想从插件中添加一个字体大小下拉菜单:

RedactorPlugins.fontSize = {

    init: function(obj) {

        btnCallback = function(obj,event,key) {
            // button actions, if any
        }

        dropdown = {
            small: {
                title: 'Small'
                callback: function(obj,event,key) { //set the font size to small }
            }
            medium: {
                title: 'Medium'
                callback: function(obj,event,key) { //set the font size to medium }
            }
        }

        this.addBtn('fontSize','Change font size', btnCallback, dropdown);
    }

}