We are using CKeditor4 and added image2 plugin but image2 does not contain advanced tab. To enable the advanced tab in image dialogue I added "Advanced Tab for Dialog plugin" and added "dialogadvtab" in extraPlugins even after all these its not working.
var editor = CKEDITOR.instances['editor1'];
if (editor) { editor.destroy(true); }
CKEDITOR.replace( 'editor1', {
extraPlugins: 'dialogadvtab,uploadimage,image2',
resize_enabled: 'false',
removePlugins: 'elementspath',
forcePasteAsPlainText : true,
enterMode : CKEDITOR.ENTER_BR,
shiftEnterMode: CKEDITOR.ENTER_P,
dialog_noConfirmCancel : true,
linkShowAdvancedTab : false,
linkShowTargetTab : false,
allowedContent:true,
});
Related
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.
I am using the joomla built in function to create a tinyMCE editor on a page within a jQuery dialog box. However, the dialog box appears and the tinyMCE editor is like its in read only mode.
This is the php built in function that echos out the editor:
<div id="PhoneCallCard" title="Phone Call Card" style="display:none;">
<?php
$editor = JFactory::getEditor();
echo $editor->display('commentz', $this->content, '600', '100', '60', '20', false);
?>
</div>
This is my jQuery implementation of opening that dialog box:
jQuery("#PhoneCallCard").dialog({
height:500,
width:800,
modal: true,
close: function(ev, ui){
jQuery('#tablepanelfightclubrequests .trSelected').removeClass('trSelected');
},
open:function({ //Everything I tried to activate the tinyMCE
//tinyMCE.activeEditor.getBody().setAttribute('contenteditable', false);
//tinyMCE.execCommand('mceRemoveControl',false,'commentz');
//tinyMCE.execCommand('mceAddControl',false,'commentz');
//tinyMCE.execCommand('mceFocus', false, 'commentz');
}});
I also found similar problem here Why can't I type in TinyMCE in my jQueryUI modal dialog? and here TinyMCE and JQuery dialog: TinyMCE read only when modal:true in the Dialog but both can't solve my problem
I got same problem and fix by load dialog when page load.
For example:
jQuery(function() {
jQuery( "#dialog_desc" ).dialog({
modal: true,
width: 600,
height:500,
autoOpen: false,
});
}
when you want to open dialog:
jQuery( "#dialog_desc" ).dialog( "open" );
Hope this help!
i was get same error like that too...
my first code
$( "#f_edit_gallery" ).dialog({
autoOpen: false,
resizable: true,
show: "clip",
height:450,
width:850,
modal: true
});
after i delete option
show: "clip",
be like this
$( "#f_edit_gallery" ).dialog({
autoOpen: false,
resizable: true,
height:450,
width:850,
modal: true
});
tinyMCE run well after that
You should load the editor after the dialog is loaded. What you can do is:
Load the editor as you are doing now using $editor->display method
Before opening the jquery ui dialog, detach the editor
Display UI dialog and load editor again with slight time delay so that editor loads after dialog.
here is a sample code
use this code after the dialog open is triggered
if ((tinyMCE != undefined) && (tinyMCE.activeEditor != undefined)){
tinyMCE.activeEditor.remove();
setTimeout(function(){
tinyMCE.execCommand('mceAddControl', false, 'commentz');
},500);
}
You need settimeout when active TinyMCE, because, it need time waiting when dialog init.
for example :
$("#PositionShowDialog").dialog({
modal: true,
open: setTimeout('Change_TextareaToTinyMCE_OnPopup("#elementId");', 1000),
width: width,
......
If tinymce is loaded but you cannot type in it (like disabled) . You need set more time to setTimeout .
Sorry, my english skin not good
A small correction from the answer of Nagarjun makes the script work for me :
if ((tinyMCE != undefined) && (tinyMCE.activeEditor != undefined)){
tinyMCE.activeEditor.remove();
$("#dialogId").dialog('open');
setTimeout(function(){
tinyMCE.execCommand('mceAddControl', false, 'commentz');
},500);
}
ie : I need to remove tinyMCE before open the dialog and launch the timeout
How would I enable/disable the save button of CKEditor using external JS? I don't want to remove it completely, just change the appearance between gray and colored icon so that it's more user friendly.
My save button is generated like so:
CKEDITOR.plugins.registered['save'] =
{
init : function( editor )
{
var command = editor.addCommand( 'save', {
modes : { wysiwyg:1, source:1 },
exec : function( editor ) {
if(My.Own.CheckDirty())
My.Own.Save();
else
alert("No changes.");
}
});
editor.ui.addButton( 'Save',{label : '',command : 'save'});
}
}
Here you go:
For 3.6.x:
CKEDITOR.instances.yourEditorInstance.getCommand( 'save' ).disable();
CKEDITOR.instances.yourEditorInstance.getCommand( 'save' ).enable();
For 4.x:
CKEDITOR.instances.yourEditorInstance.commands.save.disable();
CKEDITOR.instances.yourEditorInstance.commands.save.enable();
In CKEDITOR's documentation there are suggestions to use the following in the config.js file:
CKEDITOR.editorConfig = function( config ) {
config.toolbar_Full = [
{ name: 'document', items : [ 'Source','-',
'Save','NewPage','DocProps','Preview',
'Print','-','Templates' ] }
];
config.toolbar = 'Full';
};
Though that actually does not work. It only works without the parens:
CKEDITOR.editorConfig = function( config ) {
config.toolbar_Full = [
[ 'Source','-','Save','NewPage','DocProps',
'Preview','Print','-','Templates' ]
];
config.toolbar = 'Full';
};
Now, Perch also has this little rig: CKEDITOR.replace that is meant to be used inline, but I would like to use it in the config.js file. How do I rewrite the call to CKEDITOR.replace so that it works inside config.js?
CKEDITOR.replace( 'editor1', {
toolbar : 'Full'
});
CKEDITOR.replace( 'editor2', {
toolbar : 'Basic'
});
As I replied in CKEditor forums, you must be using an old version of CKEditor, that toolbar syntax was introduced in CKEditor 3.6
Just load the CKEditor with your custom config:
CKEDITOR.replace( 'editor1', {
toolbar: [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ]
});
Or define your custom toolbar and load it:
CKEDITOR.replace( 'editor2', {
toolbar_Custom: [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ],
toolbar: 'Custom'
});
I am using the jqgrid pager to just display an add and a refresh link for one of my grids. I tend to use the default icons for add, edit, delete, and refresh on most of my grids, which in turn, by jqgrid default, puts a | (bar) between the Add/Edit/Delete buttons and the refresh button.
On my "Games" grid, I'm using a custom Add button (which is displaying before the refresh), but there is no bar displaying before the refresh button. I've tried rearranging the order, adding a position option to navSeparatorAdd, and doing a lot of googling. However, I can't find anything that has helped me in this situation.
I haven't tried turning off Refresh and making a custom button, but that seems like a hack. Any ideas on how to get that bar after add & before refresh?
So, what I have: + # |
What I want: + | #
(The # is supposed to be the refresh icon)
Thanks,
ember
jQuery("#Games").jqGrid('navGrid',
'#GamesPager',
{edit:false, add:false, del:false, search:false,
refreshtitle: "Refresh"},
{}, //settings for edit
{}, // settings for add
{}, // settings for delete
{} // advanced searching settings
);
jQuery("#Games").jqGrid('navButtonAdd',
"#GamesPager",
{ caption:"Add Game",
buttonicon:"ui-icon-plus",
onClickButton:function(){
loadAddColorBox();
},
position: "first",
title:"Add Game",
cursor: "pointer"
}
);
jQuery("#Games").jqGrid('navSeparatorAdd',
"#GamesPager",
{sepclass : 'ui-separator',sepcontent: ''}
);
Separator
It is possible to group some action adding separator. This can be done using the navSeparatorAdd method
Syntax:
<script>
...
jQuery("#grid_id").navGrid("#pager",...).navButtonAdd("#pager",{parameters}).navSeparatorAdd("#pager",{separator_parameters}};
...
</script>
here's link of documentation
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_buttons
$(table_selector).jqGrid('navGrid', pager_selector, {
cloneToTop: true,
edit: false,
add: false,
del: false,
search: false,
refresh: true,
view: false
});
$(table_selector).jqGrid('navSeparatorAdd', table_selector + '_toppager', {
sepclass: 'ui-separator',
sepcontent: '',
position: 'first'
});
$(table_selector).jqGrid('navButtonAdd', table_selector + '_toppager', {
caption: 'save',
buttonicon: 'ui-icon ace-icon fa fa-pencil blue',
onClickButton: function() {
alert("1");
},
position: 'first'
});