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
Related
I am trying to embed into the editor an uploaded image. My filebrowserUploadUrl is /api/m/image and it seems to be working fine. After I clicked the Send it to the Server button, there is a script error as follows:
image.js?t=H4PG:19 Uncaught TypeError: Cannot read property 'setCustomData'
of undefined
at textInput.onChange (image.js?t=H4PG:19)
at textInput.n (ckeditor.js:10)
at textInput.CKEDITOR.event.CKEDITOR.event.fire (ckeditor.js:12)
at textInput.setValue (ckeditor.js:619)
at textInput.setValue (ckeditor.js:545)
at a.q (ckeditor.js:841)
at ckeditor.js:31
at Object.callFunction (ckeditor.js:31)
at image?CKEditor=editor&CKEditorFuncNum=1&langCode=en:1
The last line in the above is the call to filebrowserUploadUrl and the response from that is:
window.parent.CKEDITOR.tools.callFunction(1, '/images/bulletins.jpg', 'Uploaded successfully');
The Uploaded successfully message is shown in an alert. The Preview box under Image Info tab is not updated. But if I clicked OK to close the dialog, the image (bulletins.jpg) is embedded in the editor alright.
What could be causing the error and how do I fix it?
I found what was causing it. I wanted to set the default tab when the insert image dialog is launched to the Upload tab. I use the following code:
CKEDITOR.on("dialogDefinition", function(ev) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName === "image") {
dialogDefinition.onShow = function() {
this.selectPage("Upload");
}
}
});
When the above code is used, that error happens when a file is uploaded.
I was having same issue, and after using proposed solution from vikram, editor was generating error while pasting image link into the text. Better approach here, not to completely override default onShow method, but add more to it in the following way:
CKEDITOR.on('dialogDefinition', function (ev) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName == 'image') {
var oldOnShow = dialogDefinition.onShow;
var newOnShow = function () {
this.selectPage('Upload');
this.hidePage('Link');
// change tabs order
$('a[title=Upload].cke_dialog_tab').css('float', 'left');
};
dialogDefinition.onShow = function () {
oldOnShow.call(this, arguments);
newOnShow.call(this, arguments);
};
}
});
After debugging a lot I found a solution on this.
If you will see onChange method of txtUrl textBox in image.js
See line number 507 and 513
you will understand cause of this error.
at line 513 setCustomData is called.
original.setCustomData( 'isReady', 'false' );
CKEDITOR.on("dialogDefinition", function(ev) {
var dialogName = ev.data.name;
//current editor
var editor = ev.editor;
var dialogDefinition = ev.data.definition;
if (dialogName === "image") {
dialogDefinition.dialog.on('show', function(e){
var dialogBox = e.sender;
//This line is the answer of your question
//this line will get rid of the error setCustomData
dialogBox.originalElement = editor.getSelection().getStartElement();
this.selectPage("Upload");
});
}
});
I use Sails.js, which is based on Node.js. For the upload I use Dropzone. To display the pictures I use owl-carousel.
When I add a new picture and I try to display it I receive the following error:
"NetworkError: 404 Not Found - http://localhost:1337/superrare/b004421de079bb2531cc5cd6346d202d/dde8221dc9e0b750479cedd3924af191/dde8221dc9e0b750479cedd3924af191.png"
If I open the above link in another tab I can see the image, because it exists at the specific path.
If I refresh the page I can see the picture in the owl carousel, with the same path that is displayed above.
If I modify the Dropzone code for testing purposes, on success add to carousel an older picture, the picture will be displayed -> imagePath = '/superrare/b004421de079bb2531cc5cd6346d202d/d845a68e5a57acf2f879bcd50966cc11/d845a68e5a57acf2f879bcd50966cc11.png';
So only when I try to add a new picture path I receive a 404 error...
If I add a delay of 5 seconds, the error is the same 404.
Here is my code
Dropzone.options.mydropzone = {
autoProcessQueue: false,
init: function () {
var imageName, imagePath, imageID;
var submitButton = document.querySelector("#submit-all");
myDropzone = this; // closure
this.on("success", function (file, responseJson) {
imageName = responseJson.createdAt;
imagePath = responseJson.path;
//imagePath = '/superrare/b004421de079bb2531cc5cd6346d202d/d845a68e5a57acf2f879bcd50966cc11/d845a68e5a57acf2f879bcd50966cc11.png';
imageID = responseJson.id;
var content = '<div class="item"><div id="visinput" class="container-img">'+
'<img file-id="' + imageID + '" src="' + imagePath + '">'+
'</div></div>';
// get owl element
var owl = $("#owlUpload");
// add item to owl carousel
setTimeout(function () {
owl.data('owlCarousel').addItem(content);
}, 5000);
document.getElementById("serverFile").value = fileProcess;
});
},
paramName: "file",
acceptedFiles: ".jpeg,.jpg,.png,.gif"
};
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
I am trying to set the defaultview to list when some one clicks link on CKEditor. I have already configured CKFinder with CKEditor. So now when i click links in CKEditor, I see a browse button and onclick of browse button it takes me to file list. But there it shows images as thumbnails. I want to display it as "list". I should do this only when I click links in CKEditor. If I click images it should show me the thumbnails.
The following is the way I created my CKEditor and associated it with my CKFinder.
function createCkEditor(textAreaId, width, height) {
var editor = CKEDITOR.replace( textAreaId,
{
customConfig : 'suConfig.js',
width : width,
height : height
});
CKFinder.setupCKEditor( editor, { basePath : '/CKFinderJava/ckfinder/', id:'123', startupPath : varStartupDir, startupFolderExpanded : true, rememberLastFolder : false} ) ;
}
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 "Link" dialog
if ( dialogName == 'link' ) {
alert('link dialog clicked');
// Remove extraneous tabs
dialogDefinition.removeContents( 'target' );
dialogDefinition.removeContents( 'advanced' );
// Set default URL
var infoTab = dialogDefinition.getContents( 'info' );
var urlField = infoTab.get( 'url' );
urlField['default'] = contentUrl;
}
// If "Image" dialog
if ( dialogName == 'image' ) {
// Remove extraneous tabs
dialogDefinition.removeContents( 'Link' );
dialogDefinition.removeContents( 'advanced' );
// Set default URL
var infoTab = dialogDefinition.getContents( 'info' );
var urlField = infoTab.get( 'txtUrl' );
urlField['default'] = contentUrl;
}
});
CKEditor.on will be called if you click an option in CKEditor. I am not sure how to get the CKFinder instance associated with the current editor and set default view to list. I am using JavaScript and JSP.
i did find the solution for this.
In config.js which is in CKFinderJava.war/ckfinder directory make the necessary configurations.
config.defaultViewType_Images = 'thumbnails';
config.defaultViewType_Files = 'list';
this is settings for Images and Links from ckeditor. If you want all the displays to be as list then
config.defaultViewType = 'list';
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