Как добавить пользовательскую кнопку на панель инструментов, которая вызывает функцию JavaScript?

Question

Я хотел бы добавить кнопку на панель инструментов, которая вызывает функцию JavaScript, такую ​​как Tada()?

Есть идеи, как это добавить?

Answer 1

Также есть хороший способ добавить кнопку без создания плагина.

HTML:

<textarea id="container">How are you!</textarea>

JavaScript:

editor = CKEDITOR.replace('container'); // bind editor

editor.addCommand("mySimpleCommand", { // create named command
    exec: function(edt) {
        alert(edt.getData());
    }
});

editor.ui.addButton('SuperButton', { // add new button and bind our command
    label: "Click me",
    command: 'mySimpleCommand',
    toolbar: 'insert',
    icon: 'https://avatars1.githubusercontent.com/u/5500999?v=2&s=16'
});

Проверьте, как это работает здесь: DEMO

Answer 2

Я нахожусь в процессе разработки ряда пользовательских плагинов для CKEditor, и вот мой пакет закладок на выживание:

• Пост StackOverflow, ссылающийся на учебник по плагинам и рассказывающий о нем, который помог мне начать (Тим Даун уже упоминал об этом)
• A количество готовых плагинов для FCK и CKEditor , которые могут улучшить понимание системы
• Блог AlfonsoML , одного из разработчиков, там много ценных вещей, например, Плагин локализации в CKEditor
• Взаимодействие между диалоговыми кнопками и диалогом IFrame , с вкладом Гарри Яо, одного из разработчиков
• Форумы не так плохи, как выглядят, там есть некоторые скрытые жемчужины. Обязательно поищите там, ну если не первый, то хотя бы второй или третий.

Для вашей цели я бы порекомендовал взглянуть на один из плагинов в каталоге _source/plugins, например кнопку «печать». Добавить простую функцию Javascript довольно просто. Вы должны быть в состоянии продублировать плагин печати (возьмите каталог из _source в реальный каталог plugins /, позаботьтесь о минимизации позже), переименуйте его, переименуйте каждое упоминание о «печати» внутри него, дайте кнопке правильное имя, которое вы используете позже в настройках панели инструментов включить кнопку и добавить свою функцию.

Answer 3

См. Этот URL для простого примера http://ajithmanmadhan.wordpress.com/2009/12/16/customizing-ckeditor-and-adding-a-new-toolbar-button/

Есть несколько шагов:

1) создать папку плагинов

2) зарегистрируйте свой плагин (приведенный выше URL-адрес говорит, что нужно редактировать файл ckeditor.js. НЕ делайте этого, так как в следующий раз он выйдет из строя, вместо этого отредактируйте файл config.js и добавьте строку, подобную этой 1008 *

config.extraPlugins = 'pluginX,pluginY,yourPluginNameHere'; 

3) создайте JS-файл с именем plugin.js внутри вашей папки плагинов Вот мой код

(function() {
    //Section 1 : Code to execute when the toolbar button is pressed
    var a = {
        exec: function(editor) {
            var theSelectedText = editor.getSelection().getNative();
            alert(theSelectedText);
        }
    },

    //Section 2 : Create the button and add the functionality to it
    b='addTags';
    CKEDITOR.plugins.add(b, {
        init: function(editor) {
            editor.addCommand(b, a);
            editor.ui.addButton("addTags", {
                label: 'Add Tag', 
                icon: this.path+"addTag.gif",
                command: b
            });
        }
    }); 
})();

Answer 4

На случай, если кому-то будет интересно, я написал решение для этого, используя Prototype. Чтобы кнопка отображалась правильно, мне пришлось указать extraPlugins: 'ajaxsave' внутри вызова метода CKEDITOR.replace().

Вот этот плагин.js:

CKEDITOR.plugins.add('ajaxsave',
{
    init: function(editor)
    {
    var pluginName = 'ajaxsave';

    editor.addCommand( pluginName,
    {
        exec : function( editor )
        {
            new Ajax.Request('ajaxsave.php',
            {
                method:     "POST",
                parameters: { filename: 'index.html', editor: editor.getData() },
                onFailure:  function() { ThrowError("Error: The server has returned an unknown error"); },
                on0:        function() { ThrowError('Error: The server is not responding. Please try again.'); },
                onSuccess:  function(transport) {

                    var resp = transport.responseText;

                    //Successful processing by ckprocess.php should return simply 'OK'. 
                    if(resp == "OK") {
                        //This is a custom function I wrote to display messages. Nicer than alert() 
                        ShowPageMessage('Changes have been saved successfully!');
                    } else {
                        ShowPageMessage(resp,'10');
                    }
                }
            });
        },

        canUndo : true
    });

    editor.ui.addButton('ajaxsave',
    {
        label: 'Save',
        command: pluginName,
        className : 'cke_button_save'
    });
    }
});

Answer 5

CKEditor 4

В официальной документации CKEditor 4 есть полезные руководства, которые охватывают написание плагина, который вставляет контент в редактор, регистрирует кнопку и показывает диалоговое окно:

• Создание плагина CKEditor 4 в 20 строках кода
• Создание простого плагина CKEditor

Если вы прочитаете эти два, перейдите к Интеграция плагинов с расширенным фильтром содержимого .

CKEditor 5

На данный момент доступна одна вступительная статья:

CKEditor 5 Framework: Быстрый старт - Создание простого плагина

Answer 6

Вы можете добавить изображение кнопки следующим образом:

CKEDITOR.plugins.add('showtime',   //name of our plugin
{    
    requires: ['dialog'], //requires a dialog window
    init:function(a) {
  var b="showtime";
  var c=a.addCommand(b,new CKEDITOR.dialogCommand(b));
  c.modes={wysiwyg:1,source:1}; //Enable our plugin in both modes
  c.canUndo=true;
 
  //add new button to the editor
  a.ui.addButton("showtime",
  {
   label:'Show current time',
   command:b,
   icon:this.path+"showtime.png"   //path of the icon
  });
  CKEDITOR.dialog.add(b,this.path+"dialogs/ab.js") //path of our dialog file
 }
});

Здесь - фактический плагин со всеми описанными шагами.

Answer 7

Вам нужно будет создать плагин. Документация для CKEditor очень плохая для этого, тем более что я считаю, что она значительно изменилась со времени FCKEditor. Я бы предложил скопировать существующий плагин и изучить его. Быстрый Google для "плагин CKEditor" также нашел это сообщение в блоге .

Answer 8

Может быть несколько плагинов, но один может использовать CSS для создания кнопки. Прежде всего, нажмите на кнопку «Источник», упомянутую в «Редакторе», затем вставьте туда код кнопки, как Я использую CSS для создания кнопки и добавил к ней href .

<p dir="ltr" style="text-align:center"><a href="https://play.google.com/store/apps/details?id=com.mobicom.mobiune&hl=en" style="background-color:#0080ff; border: none;color: white;padding: 6px 20px;text-align: center;text-decoration: none;display: inline-block;border-radius: 8px;font-size: 15px; font-weight: bold;">Open App</a></p>

Это кнопка, написанная открытым приложением поверх него. Вы можете изменить цвет, как я использую # 0080ff (светло-голубой)

Answer 9

Эта статья может быть также полезна http://mito -team.com / article / 2012 / collapse-button-for-ckeditor-for-drupal

Существуют примеры кода и пошаговое руководство по созданию собственного плагина CKEditor с пользовательской кнопкой.