JavaScript 함수를 호출하는 도구 모음에 사용자 지정 단추를 추가하는 방법은 무엇입니까?

lottogame 2020. 10. 31. 09:10

JavaScript 함수를 호출하는 도구 모음에 사용자 지정 단추를 추가하는 방법은 무엇입니까?

다음과 같은 JavaScript 함수를 호출하는 도구 모음에 버튼을 추가하고 싶습니다 Tada().

이것을 추가하는 방법에 대한 아이디어가 있습니까?

저는 CKEditor 용 사용자 정의 플러그인을 개발 중이며 여기에 제 서바이벌 북마크 팩이 있습니다.

귀하의 목적을 위해 _source/plugins디렉토리 에있는 플러그인 중 하나 ( 예 : "인쇄"버튼)를 살펴볼 것을 권장 합니다. 간단한 자바 스크립트 기능을 추가하는 것은 매우 쉽습니다. 인쇄 플러그인을 복제하고 (_source에서 실제 plugins / 디렉토리로 디렉토리를 가져오고, 나중에 축소에 대해 걱정합니다.) 이름을 바꾸고, 그 안에있는 "print"에 대한 모든 언급의 이름을 바꾸고, 나중에 사용할 적절한 이름을 버튼에 지정할 수 있어야합니다. 도구 모음 설정에서 버튼을 포함하고 기능을 추가하십시오.

또한 플러그인을 만들지 않고도 버튼을 추가 할 수있는 좋은 방법이 있습니다.

html :

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

자바 스크립트 :

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

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

editor.ui.addButton('SuperButton', { // add new button and bind our command
    label: "Click me",
    command: 'mySimpleCommand',
    toolbar: 'insert',
    icon: ''

작동 원리를 확인하세요 : 데모

쉬운 예는 다음 URL을 참조하십시오.

몇 가지 단계가 있습니다.

1) 플러그인 폴더 생성

2) 플러그인을 등록하십시오 (위의 URL은 ckeditor.js 파일을 편집하라는 메시지를 표시합니다. 다음 번에 새 버전을 다시 만들 때 중단되므로이 작업을 수행하지 마십시오. 대신 config.js를 편집하고 다음과 같은 행을 추가하십시오.

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

3) 플러그인 폴더 안에 plugin.js라는 JS 파일을 만드십시오. 여기 내 코드가 있습니다.

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

    //Section 2 : Create the button and add the functionality to it
    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

누구나 관심이있는 경우 Prototype을 사용하여 이에 대한 솔루션을 작성했습니다. 버튼이 올바르게 나타나도록 extraPlugins: 'ajaxsave'하려면 CKEDITOR.replace()메서드 호출 내부에서 지정해야 했습니다 .

다음은 plugin.js입니다.

    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 {

        canUndo : true

        label: 'Save',
        command: pluginName,
        className : 'cke_button_save'

CKEditor 4

There are handy tutorials in the official CKEditor 4 documentation, that cover writing a plugin that inserts content into the editor, registers a button and shows a dialog window:

If you read these two, move on to Integrating Plugins with Advanced Content Filter.

CKEditor 5

So far there is one introduction article available:

CKEditor 5 Framework: Quick Start - Creating a simple plugin

You'll need to create a plug-in. The documentation for CKEditor is very poor for this, especially since I believe it has changed significantly since FCKEditor. I would suggest copying an existing plug-in and studying it. A quick google for "CKEditor plugin" also found this blog post.

You can add the button image as follows:

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
  //add new button to the editor
   label:'Show current time',
   icon:this.path+"showtime.png"   //path of the icon
  CKEDITOR.dialog.add(b,this.path+"dialogs/ab.js") //path of our dialog file

Here is the actual plugin with all steps described.

This article may be useful too

There are code samples and step-by-step guide about building your own CKEditor plugin with custom button.

There might be Several plugins but one may use CSS for creating button. First of all click on Source button mentioned in Editor then paste the button code over there, As I use CSS to create button and added href to it.

<p dir="ltr" style="text-align:center"><a href="" 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>

This is the Button Written Open App over It. You May change the Color as i am using #0080ff (Light Blue)

참고URL :