JavaScript 함수를 호출하는 도구 모음에 사용자 지정 단추를 추가하는 방법은 무엇입니까?
다음과 같은 JavaScript 함수를 호출하는 도구 모음에 버튼을 추가하고 싶습니다 Tada().
이것을 추가하는 방법에 대한 아이디어가 있습니까?
저는 CKEditor 용 사용자 정의 플러그인을 개발 중이며 여기에 제 서바이벌 북마크 팩이 있습니다.
- 저를 시작하게 만든 플러그인 자습서에 대한 링크 및 이에 대해 이야기하는 StackOverflow 게시물 (Tim Down이 이미 언급 했음)
- FCK 및 CKEditor에 대한 준비가 만든 플러그인의 수 는 시스템의 하나의 이해를 향상시킬 수 있습니다
- 개발자 중 한 명인 AlfonsoML 의 블로그 , 예를 들어 CKEditor의 플러그인 현지화와 같은 많은 유용한 정보
- 개발자 중 한 명인 Garry Yao의 입력으로 대화 상자 단추와 IFrame 대화 상자 간의 상호 작용
- 포럼 그들이 보면 나쁜으로하지 않습니다, 거기에 어떤 숨겨진 보석이있다. 첫 번째가 아니라면 적어도 두 번째 또는 세 번째로 거기에서 검색하십시오.
귀하의 목적을 위해 _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) {
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'
});
쉬운 예는 다음 URL을 참조하십시오. http://ajithmanmadhan.wordpress.com/2009/12/16/customizing-ckeditor-and-adding-a-new-toolbar-button/
몇 가지 단계가 있습니다.
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();
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
});
}
});
})();
누구나 관심이있는 경우 Prototype을 사용하여 이에 대한 솔루션을 작성했습니다. 버튼이 올바르게 나타나도록 extraPlugins: 'ajaxsave'하려면 CKEDITOR.replace()메서드 호출 내부에서 지정해야 했습니다 .
다음은 plugin.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'
});
}
});
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
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
}
});
Here is the actual plugin with all steps described.
This article may be useful too http://mito-team.com/article/2012/collapse-button-for-ckeditor-for-drupal
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="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>
This is the Button Written Open App over It. You May change the Color as i am using #0080ff (Light Blue)
'Programing' 카테고리의 다른 글
| 두 날짜 내에서 임의의 날짜 배열을 생성하는 우아한 방법 (0) | 2020.10.31 |
|---|---|
| 키를 길게 누르고 VSCode에서 반복하려면 어떻게해야합니까? (0) | 2020.10.31 |
| didSelectRowAtIndexPath가 잘못된 IndexPath를 반환합니다. (0) | 2020.10.31 |
| 상수에 대한 PHPDocs를 작성하는 올바른 방법은 무엇입니까? (0) | 2020.10.31 |
| Android : 텍스트없이 이미지가있는 토글 버튼 만들기 (0) | 2020.10.31 |