I'm doing my own TinyMCE toolbar and I want to add the exact same functionality as when you choose Format>Code, but as its own button in the toolbar. Is that possible and how should I do that?
Thank you!
I figured it out. You can add your own button and then have it execute a command.
setup: function(editor) {
editor.ui.registry.addButton('strikeout', {
icon: 'sourcecode',
tooltip: "Format as code",
onAction: function() {
editor.execCommand('mceToggleFormat', false, 'code');
}
});
}
Related
In CKeditor4, I have tried to show a notification when the dialog is opened at first time but the notification is displayed behind the dialog box. Is-there a way to show the notification at foreground ?
This is my code in the dialog part :
CKEDITOR.dialog.add( 'MypluginDialog', function( editor ) {
return {
title: 'my plugin title,
minWidth: 400,
minHeight: 200,
contents:
[
{
id: 'tab-basic',
label: 'Dialog settings',
elements:
[
{
type: 'text',
id: 'title',
label: 'My title',
default: ''
}
]
}
],
onOk: function() {
},
onShow: function() {
var notification1 = new CKEDITOR.plugins.notification( editor, {
message: 'Error occurred',
type: 'warning'
} );
notification1.show();
}
};
});
So how to display the notification not behind the dialog box ?
Thanks by advance
Notifications can be displayed in front of any dialog after adjusting their z-index CSS property, for example (!important needed since it has inline z-index style already):
.cke_notifications_area {
z-index: 10050 !important;
}
Keep in mind that dialogs and notifications z-index value depends on CKEditor 4 baseFloatZIndex configuration option (which is 10000 by default) so if this configuration option was changed you need to adjust CSS accordingly.
Please also keep in mind that Notification plugin is not really intended to be displayed over dialogs since it works in a way that it's positioned related to editor editable area (and dialog is not) and may display on the bottom part of a dialog or some more unexpected places (depending on editor position).
See this codepen demo.
I need to add a custom button to CKEditor 4.6.2 instance without plugin.
I've tried solution suggested at similar question How to add a custom button to the toolbar that calls a JavaScript function?
The difference is that I don't want to replace existing instance, but instead modify it after it's initialised. Like here: http://jsfiddle.net/paragonid/8r4gk45n/1/
CKEDITOR.replace('container', {
on: {
instanceReady: function( evt ) {
console.log('instanceReady', evt)
evt.editor.addCommand("mySimpleCommand", {
exec: function(edt) {
alert(edt.getData());
}
});
evt.editor.ui.addButton('SuperButton', {
label: "Click me",
command: 'mySimpleCommand',
toolbar: 'insert',
icon: 'https://avatars1.githubusercontent.com/u/5500999?v=2&s=16'
});
}
}
});
But button doesn't appear in this case.
I also faced the same issue, this is how I resolved mine-
var editor = CKEDITOR.replace(ck, {
toolbar: [['Source','-','Preview','Print'],['UIColor','Maximize','ShowBlocks'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo','RemoveFormat','-','Link','Unlink','Anchor'],
['Bold','Italic','Underline','Strike','Subscript','Superscript','RemoveFormat'],['Link','Unlink','Anchor'], '/',
['NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl'],
['Styles','Format','Font','FontSize'],['TextColor','BGColor'],'/',
{name: 'insert', items:['InsertCustomImage','Flash','Table','Iframe','HorizontalRule','Smiley','SpecialChar','PageBreak']}]
});
editor.addCommand("insertImgCmd", {
exec: function(edt) {
helper.showdlg(component);
}
});
editor.ui.addButton('InsertCustomImage', {
label: "Insert Image",
command: 'insertImgCmd',
toolbar: 'insert',
icon: 'https://avatars1.githubusercontent.com/u/5500999?v=2&s=16'
});
While setting the toolbar, I inserted a custom command name "InsertCustomImage".
Now while creating new button below, set the same name as "InsertCustomImage" in addButton function.
first of all, thank you for your support.
I've tried to create my first plugin for CKEditor.
I used the official Tutorial: http://docs.ckeditor.com/#!/guide/plugin_sdk_sample
The Button appears in the Toolbar. But if I click on this, nothing happens.
Here is my Code of plugin.js
CKEDITOR.plugins.add( 'drmail', {
icons: 'drmail',
init: function( editor ) {
editor.addCommand( 'drmailCommand', {
exec: function( editor ) {
var now = new Date();
editor.insertHtml( 'The current date and time is: <em>' + now.toString() + '</em>' );
}
});
editor.ui.addButton( 'DRmail', {
label: "E-Mail Adresse hinzufügen",
command: 'drmailCommand',
toolbar: 'insert'
});
}
});
thanks for your Help.
I found it. (The Hint to the JS-Debugger was very good)
I had an old not functional version of the Script in Cache.
Dean
I want to add a close a button in CK Editor (v4.4) and want to align it right, below screen shot shows the end product.
With the help of documentation from CKEditor website I was able to create a simple close plugin. With the help of little jQuery hack I am able align it right but if possible I would like to align it using standard toolbar creation approach rather then below hack.
Current working hack
<script>
$(document).ready(function () {
var rteComment = CKEDITOR.replace("txtPluginDemo", {
toolbar: [
['NumberedList', '-', 'Image'],
['Save'],
['CKClose'],
],
toolbarCanCollapse: false,
allowedContent: 'p img ol br',
disallowedContent: 'script',
extraAllowedContent: 'img[*]{*}(*)',
extraPlugins: 'ckclose',
image_previewText: "Image preview will be displayed here.",
disableNativeSpellChecker: false,
//If true <p></p> will be converted to <p> ,</p>
fillEmptyBlocks: true,
removePlugins: 'contextmenu,liststyle,tabletools',
skin: 'moonocolor',
});
rteComment.on("close", function (evt) {
alert("Ok time to close it.");
return true;
});
rteComment.on("instanceReady", function (evt) {
//THIS IS HACK
$(".cke_button__ckclose").closest(".cke_toolbar").css({ "float": "right" });
});
})
</script>
I am hoping that there will be some option in the below code which will let me specify the my css class here.
CKEDITOR.plugins.add('ckclose', {
// Register the icons. They must match command names.
icons: 'ckclose',
// The plugin initialization logic goes inside this method.
init: function (editor) {
// Define an editor command that inserts a timestamp.
editor.addCommand('closeEditor', {
// Define the function that will be fired when the command is executed.
exec: function (editor) {
if (editor.fire("close")) {
editor.destroy();
}
}
});
// Create the toolbar button that executes the above command.
editor.ui.addButton('CKClose', {
label: 'Discard changes and close the editor',
command: 'closeEditor',
toolbar: 'insert'
});
}
});
Below image is the Inspect Element View from Firefox.
I got help from the above answer slightly change the code its worked for me
CKEDITOR.on("instanceReady", function (evt) {
$(".cke_button__custom").closest(".cke_toolbar").css({ "float": "right" });
});
"custom" is my button name. Thank you,
You can put this piece
rteComment.on("instanceReady", function (evt) {
$(".cke_button__ckclose").closest(".cke_toolbar").css({ "float": "right" });
});
rignt inside
init: function( editor ) {
(e.g., before its closing bracket). That should be enough.
Also, you don't need to put initialization info in a SCRIPT tag of your main file. It can be cleaner to use config.js
http://docs.ckeditor.com/#!/guide/dev_configuration
Also, see an interesting example of a plugin here:
How to add an ajax save button with loading gif to CKeditor 4.2.1. [Working Sample Plugin]
I'd like to be able to invoke the find button on the search dialog when the "Enter/Return" key is pressed. Unfortunately the 'savekey' option doesn't submit the form and the same way it does in the edit and add Form Editing.
Here's a snippet of the code I'm using.
$("#list").jqGrid('navGrid', '#pager',
{edit: true, add: true, del: true, search: true, view: true},
...
{
caption: "Search",
closeAfterSearch: true,
closeOnEscape: true,
sopt: ['cn','eq'],
savekey: [true, 13]
},
Here's a link to the form_editing documentation I've consulted:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing&s[]=savekey
Here's a link to the Single field searching documentation:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:singe_searching&s[]=navgrid
I can't find anything to suggest this feature exists but I seems like a no-brainer. As always, any help or direction is greatly appreciated.
It seems to me that the problem cam be solved if you replace savekey: [true, 13] option which really not work for searching to the following beforeShowSearch and onClose event handle
beforeShowSearch: function(form){
form.keydown(function(e) {
if (e.which == 13) {
$(".ui-search", form).click();
}
});
},
onClose: function(form){
form.unbind('keydown');
}
This method will work not only for the single field searching but for advance searching also.
If you want that the 'Enter' key work only in the input fields you can replace form.keydown to $('.vdata',form).keydown and make the corresponding changes in the unbind.
I had the same problem on FireFox but the above solution worked fine in IE. In order to make it work on Firefox I had to use the focus function instead of click as below:
beforeShowSearch: function (form) {
form.keydown(function (e) {
if (e.which == 13) {
$("#fbox_list_search").focus();
}
});
},
This was pretty helpful, but I'm the provided solution isn't quite working for me. I tweaked the code provided and it somewhat works now, but it doesn't appear to be submitting the correct data. Whenever I press the enter key, it submits a "0" in the input box instead of whatever I've actually put in there. For whatever reason it is not posting the searchString. The code I'm using is:
beforeShowSearch: function(form){
$(form).keydown(function(e) {
if (e.keyCode == 13) {
$("#fbox_cust_grid_search").click();
}
});
},
onClose: function(form){
$(form).unbind('keydown');
}
Do any of you guys have a suggestion as to what might be going on here?
Edit: Interesting, when I alert something out(anything) right before the .click() method, the data is posted perfectly. Any ideas?
Try the following code. Works for me:
beforeShowSearch: function(form){
$(form).keydown(function(e) {
if (e.keyCode == 13) {
setTimeout(function() {
$("#fbox_cust_grid_search").click();
}, 200);
}
});
return true;
},
onClose: function(form){
$("#fbox_cust_grid_search").unbind('keydown');
}
There seems to be an issue when the click method is called too quickly. Giving the grid 200ms to do what it has to do before searching seems to do the trick.