I want to use colorbox inline image, which can be done using http://website-design.operationenterprise.com/articles/website-development/colorbox-ckeditor-drupal-7, but I want to automate the the process for it to be user friendly.
The code I used
CKEDITOR.on( 'dialogDefinition', function( ev )
{
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if ( dialogName == 'image' )
{
var linkTab = dialogDefinition.getContents( 'info' );
var link = linkTab.get( 'txtUrl' );
link['onChange'] = function(evt){
var dialog = CKEDITOR.dialog.getCurrent();
dialog.getContentElement('Link', 'txtUrl').setValue(dialog.getContentElement('info', 'txtUrl').getValue());
}
if ( dialogName == 'link' )
{
var infoTab = dialogDefinition.getContents( 'advanced' );
var cssField = infoTab.get( 'advCSSClasses' );
cssField['default'] = 'colorbox-load';
}
}
});
Copying url in image-link tab tab worked fine but setting default css in Link dialog didnot.
I am no Java developer, so What am i doing wrong
PLease HELP
Related
I'm trying to add a plugin to set a default URL when adding a link.
I followed the instructions here:
https://apostrophecms.org/docs/tutorials/howtos/ckeditor.html
And I ended up with:
// lib/modules/apostrophe-areas/public/js/user.js
apos.define('apostrophe-areas', {
construct: function(self, options) {
var superEnableCkeditor = self.enableCkeditor;
self.enableCkeditor = function() {
superEnableCkeditor();
CKEDITOR.plugins.addExternal('defaulturl', '/modules/my-apostrophe-areas/js/ckeditorPlugins/defaulturl/', 'plugin.js');
};
}
});
and this is my apostrophe-areas/public/js/ckeditorPlugins/defaulturl/plugin.js
CKEDITOR.on( 'dialogDefinition', function( ev ) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if ( dialogName == 'link' ) {
var infoTab = dialogDefinition.getContents( 'info' );
var urlField = infoTab.get( 'url' );
urlField[ 'default' ] = 'www.example.com';
}
});
However, this is not working for me, I tried to do what is suggested here:
Ckeditor plugin configuration not working
But it doesn't worked.
What I've tried and worked was to append the plugin.js file at the end of the plugin.js of the split plugin at the apostrophe-area folder, but I think this is not the correct way to go
Thanks!
I think you can solve the issue two ways:
1. If you want to keep the external plugin file:
Wrap your code according to the API, see e.g. https://sdk.ckeditor.com/samples/timestamp.html and the plugin it references https://sdk.ckeditor.com/samples/assets/plugins/timestamp/plugin.js for an example. You need to use CKEDITOR.plugins.add( 'defaulturl', { init: ... }) in your plugin.js. Not sure if there is anything special to do otherwise as you want to modify the behavior of a CKEDITOR core plugin. That's why it would go with the next option...
2. If you don't need the extra plugin.js:
You can also replace the CKEDITOR.plugins.addExternal() call with the contents of your plugin.js file. I did this to modify the default link target to be _blank:
// /lib/modules/apostrophe-areas/public/js/user.js
'use strict';
// See https://apostrophecms.org/docs/tutorials/howtos/ckeditor.html and
apos.define('apostrophe-areas', {
construct: function(self, options) {
var superEnableCkeditor = self.enableCkeditor;
self.enableCkeditor = function enableCkeditor() {
superEnableCkeditor();
// https://docs.ckeditor.com/ckeditor4/latest/guide/dev_howtos_dialog_windows.html
CKEDITOR.on('dialogDefinition', function redefineDialog(ev) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName === 'link') {
var targetTab = dialogDefinition.getContents('target');
var targetField = targetTab.get('linkTargetType');
targetField.default = '_blank';
}
});
};
}
});
Good luck!
It's not a question, but rather a solution (with a small dirty trick).
I needed to insert an image in CKEditor with "center" alignment by default. I could not find working example, so I spent lots of time and come up with the following answer.
In your editor's config.js
CKEDITOR.on( 'dialogDefinition', function( ev ) {
// Take the dialog name and its definition from the event data.
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if ( dialogName == 'image2' ) {
ev.data.definition.dialog.on('show', function() {
//debugger;
var widget = ev.data.definition.dialog.widget;
// To prevent overwriting saved alignment
if (widget.data['src'].length == 0)
widget.data['align'] = 'center';
});
}
});
Enjoy!
I've used the above solution for a few years successfully - although now (CKEditor Version 4.14.0) it throws an error and no longer works. After a bunch of troubleshooting and assistance from admittedly old documentation from here:
https://nightly.ckeditor.com/20-05-20-06-04/standard/samples/old/dialog/dialog.html
... the following seems to work here:
In editor config.js file:
CKEDITOR.on('dialogDefinition', function(ev) {
let dialogName = ev.data.name;
let dialogDefinition = ev.data.definition;
console.log(ev);
if (dialogName == 'image2') {
dialogDefinition.onFocus = function() {
/**
* 'none' is no good for us - if is none - reset to 'center'
* if it's already 'left','center', or 'right' - leave alone.
*/
if (this.getContentElement('info', 'align')
.getValue() === 'none') {
this.getContentElement('info', 'align')
.setValue('center');
}
};
}
});
I use this code to display Upload Tab first when the Image dialog box is opened
CKEDITOR.on('dialogDefinition', function( ev ) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if ( dialogName == 'image' ) {
dialogDefinition.onShow = function() {
this.selectPage( 'Upload' );
};
}
});
After uploading image to the server it was not displayed in Tab Preview page and I get this javascript error
Uncaught TypeError: Cannot call method 'removeStyle' of undefined image.js?t=DBAA:467
contents.elements.children.children.onChange image.js?t=DBAA:467
I am trying to set up the default properties of table that is created inside CKEditor.
For example is there a way to make sure that the attribute border is 0 not 1, or the width is by default set to 100%.
Here you go. dialogDefinition event solves the problem:
CKEDITOR.on( 'dialogDefinition', function( ev ) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if ( dialogName == 'table' ) {
var info = dialogDefinition.getContents( 'info' );
info.get( 'txtWidth' )[ 'default' ] = '100%'; // Set default width to 100%
info.get( 'txtBorder' )[ 'default' ] = '0'; // Set default border to 0
}
});
CKEDITOR.replace( 'editor1' );
More to read:
This official guide will help you playing with dialog API (also with devtools plugin).
Devtools plugin is helpful when looking for IDs and elements in CKEditor dialogs.
Have fun!
If you need to make changes to the table options when the table is first created AND when the table properties are edited later, then you need to also target 'tableProperties' in addition to 'table' as seen below:
CKEDITOR.on( 'dialogDefinition', function( ev ) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if ( dialogName == 'table' || dialogName == 'tableProperties' ) {
var info = dialogDefinition.getContents( 'info' );
info.get( 'txtWidth' )[ 'default' ] = '100%'; // Set default width to 100%
info.get( 'txtBorder' )[ 'default' ] = '0'; // Set default border to 0
}
});
CKEDITOR.replace( 'editor1' );
This is from #DanH comments from the #oleq answer. But I thought it's worth putting into it's own answer since I overlooked this the first time I was making this change.
Basically I removed the anchor button so there should not be a link to anchor option in my link window.
Any way to remove that dropdown option
?
Figured it out
if ( dialogName == 'link' )
{
var infoTab = dialogDefinition.getContents( 'info' );
var linktypeField = infoTab.get( 'linkType' );
/* Remove it from the array of items */
linktypeField['items'].splice(1, 1);
}
dialogDefinition allows you to completely redesign dialog boxes.
I did it this way, based on the example at http://nightly.ckeditor.com/7156/_samples/api_dialog.html
CKEDITOR.on( 'dialogDefinition', function( ev )
{
// Take the dialog name and its definition from the event
// data.
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
// Check if the definition is from the dialog we're
// interested on (the "Link" dialog).
if ( dialogName == 'link' )
{
// Get a reference to the "Link Info" tab.
var infoTab = dialogDefinition.getContents( 'info' );
infoTab.remove( 'linkType' );
}
});
$("#mydiv").ckeditor(function(){}, {
removeDialogTabs: 'link:advanced;link:target'
// any other customizations go here.
});
This's my solution:
CKEDITOR.on('dialogDefinition', function (ev) {
// Take the dialog name and its definition from the event data.
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
// Check if the definition is from the dialog we're
// interested in (the 'link' dialog).
if (dialogName == 'link') {
// Remove the 'Target' and 'Advanced' tabs from the 'Link' dialog.
//dialogDefinition.removeContents('target');
//dialogDefinition.removeContents('advanced');
// Get a reference to the 'Link Info' tab.
var infoTab = dialogDefinition.getContents('info');
infoTab.remove('protocol');
infoTab.get('linkType').style = 'display: none';
}
});
If you get rid of Link Type using infoTab.remove('linkType'); it will fails to create the link