2015-04-15 3 views
0

Мы пытаемся добавить настраиваемый выпадающий список в CKeditor, который будет иметь список предварительно заданных значений, которые мы найдем и заменим, для жизни меня я не могу найти простой способ сделать это. Глядя на TinyMCE очень легко:CKEditor Custom Dropdown

http://www.tinymce.com/tryit/menubutton.php

Есть простое решение, как это для CKEditor, мы предпочли бы не поменять CKEditor за TinyMCE только для этой функции. Я нашел плагин под названием PlaceHolder, но это не совсем то, что мы хотим, и, честно говоря, я надеялся сделать это без плагинов и просто настроить на инициализацию так, как это делает TinyMCE.

Большое спасибо за понимание.

ответ

6

Это все о editor.ui.addRichCombo (JSFiddle):

CKEDITOR.replace('editor', { 
    toolbarGroups: [ 
     { name: 'mode' }, 
     { name: 'basicstyles' } 
    ],  
    on: { 
     pluginsLoaded: function() { 
      var editor = this, 
       config = editor.config; 

      editor.ui.addRichCombo('my-combo', { 
       label: 'My Dropdown Label', 
       title: 'My Dropdown Title', 
       toolbar: 'basicstyles,0', 

       panel: {    
        css: [ CKEDITOR.skin.getPath('editor') ].concat(config.contentsCss), 
        multiSelect: false, 
        attributes: { 'aria-label': 'My Dropdown Title' } 
       }, 

       init: function() {  
        this.startGroup('My Dropdown Group #1'); 
        this.add('foo', 'Foo!'); 
        this.add('bar', 'Bar!');      

        this.startGroup('My Dropdown Group #2'); 
        this.add('ping', 'Ping!'); 
        this.add('pong', 'Pong!');      

       }, 

       onClick: function(value) { 
        editor.focus(); 
        editor.fire('saveSnapshot'); 

        editor.insertHtml(value); 

        editor.fire('saveSnapshot'); 
       } 
      });   
     }   
    } 
}); 
+0

Потрясающе, спасибо. Работает отлично. – user351711

+0

Спасибо, Oleq, использовал многие ваши решения из stackoverflow во время работы с ckeditor. Спасибо! – VGranin

Смежные вопросы