ckeditor error while creating file upload button - javascript

I am using below code to create a ckeditor plugin to upload images. While i am trying to create a ckeditor dialog, I am getting below errors. Below piece of code i took from the below link.
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.definition.button.html
In chrome :
Uncaught TypeError: Cannot read property '_' of undefined
In firefox :
b.getContentElement(...) is undefined
Any help will be greateful.
{
type : 'file',
id : 'upload',
label : 'Select file from your computer',
size : 38
},
{
type : 'fileButton',
id : 'fileId',
label : 'Upload file',
'for' : [ 'tab1', 'upload' ],
filebrowser : {
onSelect : function( fileUrl, data ) {
alert( 'Successfully uploaded: ' + fileUrl );
}
}
},

I think that what you have there, is not "code" as it. Is just the object definition you must do to initialize a button in a dialog, as the docs you pasted say:
This class is not really part of the API. It just illustrates the
properties that developers can use to define and create buttons.
Once the dialog is opened, the created element becomes a
CKEDITOR.ui.dialog.button object and can be accessed with
CKEDITOR.dialog#getContentElement. For a complete example of dialog
definition, please check CKEDITOR.dialog.add.
Then, if we check that: http://docs.ckeditor.com/#!/api/CKEDITOR.dialog.definition
We will find this code:
CKEDITOR.dialog.add( 'testOnly', function( editor ) {
return {
title: 'Test Dialog',
resizable: CKEDITOR.DIALOG_RESIZE_BOTH,
minWidth: 500,
minHeight: 400,
contents: [
{
id: 'tab1',
label: 'First Tab',
title: 'First Tab Title',
accessKey: 'Q',
elements: [
{
type: 'text',
label: 'Test Text 1',
id: 'testText1',
'default': 'hello world!'
}
]
}
]
};
} );
Then it seems you need to call the method CKEDITOR.dialog.add with the object you prepared. (anyway, I din´t checked all the data and the formats you have in your object) this example should work.
Anyway, you should check this part of the same documentation and be sure on which one is the dialog/plugin you need.
Hope it may help to you.

Related

tinyMCE 6 insert link to server side content

I'm upgrading an old internal system used in my academic department. The page that I'm rewriting allows users to modify webpages containing information and content relevant to a course. The old system is using cleditor which I am replacing with the free version of tinyMCE 6.2.0.
One of the functionalities that needs to be replaced is a custom button that brings up a list of URLs to uploaded content and then turns the highlighted text into a link to the selected content (example of this in current system). I have been able to create my own custom button, and I have found the panel and selectbox features, but I haven't found how to populate the list in selectbox using a URL like one can for link_list.
Below is an example of the javascript that I have:
tinymce.init({
selector: '.course_page_editor',
toolbar: 'custContentLink',
setup: (editor) => {
editor.ui.registry.addButton('custContentLink', {
text: 'Insert Content Link',
onAction: (_) => insert_content_link_dialog(tinymce.activeEditor)
});
}
});
function insert_content_link_dialog(editor)
{
editor.windowManager.open({
title: 'Insert Content Link',
body: {
type: 'panel',
items: [{
type: 'selectbox',
name: 'content_list',
label: 'Choose the file that the link should point to:',
size: 5,
//TODO: generate list of uploaded content URLs
items: [
{text: 'Primary', value: 'primary style'},
{text: 'Success', value: 'success style'},
{text: 'Error', value: 'error style'}
],
flex: true
}]
},
onSubmit: function () {
//TODO: replace highlighted text with selected link
},
buttons: [
{
text: 'Close',
type: 'cancel',
onclick: 'close'
},
{
text: 'Add content link',
type: 'submit',
primary: true,
enabled: true
}
]
});
};
How do I create a popup list of links to server side content
My original process was overly complicated. TinyMCE has the link_list functionality which does exactly what I'm looking for. I then created a page to return a JSON array of link items as outlined in this other question I asked.

CKEditor error creating dialog

I have the following test script:
var field = {id: "html1"};
var editor = CKEDITOR.replace(field.id);
var dialogObj = new CKEDITOR.dialog(editor, 'smiley');
I get the following error: Uncaught TypeError: Cannot read property 'dir' of undefined
at CKEDITOR.dialog (ckeditor.js:573)
at testCKE.html:24
I am using the full version 4.6.2 (12 Jan 2017)
dir seems to be an element of editor.lang
I experimented with setting config.language and config.defaultLanguage
I tried it with and without jquery, no difference
The editor opens fine and appears to work.
What am i doing wrong?
UPDATE: found an answer, see below. Still interested if there is a better way.
I got the dialog to work using code based on the samples/old/dialog files, cutdown version:
var field = {id: "html1"};
CKEDITOR.on( 'instanceCreated', function( ev ){
var editor = ev.editor;
// Listen for the "pluginsLoaded" event, so we are sure that the
// "dialog" plugin has been loaded and we are able to do our
// customizations.
editor.on( 'pluginsLoaded', function() {
// If our custom dialog has not been registered, do that now.
if ( !CKEDITOR.dialog.exists( 'myDialog' ) ) {
CKEDITOR.dialog.add( 'myDialog', function(){
return {title: 'My Dialog',
minWidth: 400,
minHeight: 200,
contents:[
{
id: 'tabA',
label: 'TabA',
title: 'TabA',
elements: [
{
id: 'button1',
type: 'button',
label: 'Button Field'
}
]
}
]
};
} );
}
// Register the command used to open the dialog.
editor.addCommand( 'myDialogCmd', new CKEDITOR.dialogCommand( 'myDialog' ) );
// Add the a custom toolbar buttons, which fires the above
// command..
editor.ui.add( 'MyButton', CKEDITOR.UI_BUTTON, {
label: 'My Dialog',
command: 'myDialogCmd'
});
});
});
var editor = CKEDITOR.replace(field.id);

Is there a possibility to add a HTML element dynamically inside a dialog of a plugin in CK-EDITOR?

I am creating a widget in ck-editor where when user clicks a toolbar button,a dialog is opened.In a dialog there is text field and one search button,rest area in a dialog is for search results to be shown.
Is it possible that user enters some text in a text field , hit search button and by using some API I display some 50 search results(scrollable) in a dialog of a plugin below the text field and search button?
Right now I am using this code (just a dummy to check if I can add elements dynamically)-
CKEDITOR.dialog.add('simplebox', function(editor){
return {
title: 'Reference',
minWidth: 600,
minHeight: 400,
onShow: function() {
alert(CKEDITOR.dialog.getCurrent().definition.getContents("new_reference").elements);
},
contents: [
{
id: 'new_reference',
label:'New Reference',
elements: [
{
id: 'type',
type: 'select',
label: 'Type',
items: [
[ editor.lang.common.notSet, '' ],
[ 'Book' ],
[ 'Journal' ],
[ 'URL' ],
[ 'PHD Thesis']
]
},
{
type: 'text',
id: 'reference',
label: 'Reference',
validate: CKEDITOR.dialog.validate.notEmpty( "Search field cannot be empty." )
},
{
type: 'button',
align:'horizontal',
id: 'referencebutton',
label:'Search',
title: 'My title',
onClick: function() {
var linkContent = { type : 'html', id : 'test', html : '<div>just a test</div>' };
// this = CKEDITOR.ui.dialog.button
var dialog = CKEDITOR.dialog.getCurrent();
//alert(dialog.getContentElement('new_reference','reference').getValue());
var definition = dialog.definition;
//alert(definition.title);
definition.getContents("new_reference").add(linkContent);
// CKEDITOR.dialog.addUIElement('list',function(){
// definition.getContents("new_reference").add(linkContent);
// });
alert(CKEDITOR.dialog.getCurrent().definition.getContents("new_reference").elements);
}
}
]
},
{
id: 'old_reference',
label:'Old Reference',
elements: [
{
id:'author',
type:'text',
label:'Author'
}
]
}
]
};
});
Inside onShow method I am printing the no. of UI elements inside a content of a dialog.It shows 3 objects. After click of a button,it shows 4 objects since one has been added via code but it does show in the UI?
Any clues on this?
Thanks
Your approach is OK but by calling
definition.getContents("new_reference").add(linkContent);
you're modifying CKEDITOR.dialog.definition, which is used only the first time the dialog is opened – to build it. Then, once built, if you close the dialog and open it again, the editor uses the same DOM to display it. What I mean is that CKEDITOR.dialog.definition is a blueprint, which is used once and has no further impact on the dialog.
To interact with live dialog, use the following
CKEDITOR.ui.dialog.uiElement-method-getDialog,
CKEDITOR.dialog-method-getContentElement (returns CKEDITOR.ui.dialog.uiElement),
CKEDITOR.dialog-method-getValueOf,
CKEDITOR.dialog-method-setValueOf
like
onClick: function() {
var dialog = this.getDialog();
// get the element
console.log( dialog.getContentElement( 'tabName', 'fieldId' ) );
// get the value
dialog.getValueOf( 'tabName', 'fieldId' ) );
// set the value
dialog.setValueOf( 'tabName', 'fieldId', 'value' ) );
}
One way to get around this problem is to use the onShow function and insert an html object in the dialog tab.
onShow : function() {
var element = document.createElement("div");
element.setAttribute('id', "someId");
document.getElementsByName("new_reference")[0].appendChild(element);
}
Then in the onClick function, just access the element and set the content you want, like this:
onClick : function() {
document.getElementById("someId").innerHTML='<div id="example-'+count+'">Hello World</div>';
}
By doing this, you should be able to get data to show in your dialog. Hope it helps.

Tinymce listbox onsubmit giving [object object] rather than value

I am trying to develop a wordpress plugin and all other thing went good. but i am stuck here at the moment. i am trying to get selected value from the tinymce listbox but it returns something like [object Object] rather than value. can any one tell me why this happening and give me a solution. i am very thankful if anyone can give me a solution for this issue.
(function() {
tinymce.PluginManager.add('AP_tc_button', function( editor, url ) {
editor.addButton( 'AP_tc_button', {
text: 'My test button',
icon: 'wp_code',
onclick: function() {
editor.windowManager.open({
title: 'Select Your AD',
body: [
{
type: 'listbox',
name: 'level',
label: 'Header level',
values: [{text: 'x', value: 'x'}]
}],
onsubmit: function(v) {
alert(v);
//editor.insertContent(toString(e.value()));
}
});
}
});
});
})();
Well i found the solution i will add it here for your reference.
we have to get data from the object so i used object.data.listbox_name
onsubmit: function(v) {
alert(v.data.level)

tinyMCE plugin accessing element

I'm trying to write a tinymce plugin, so I checked out the tutorial "Creating a plugin" on http://www.tinymce.com/. Inserting and Replacing Content is no problem, everything works fine.
Now i want to change the value of the textbox automatically after changing the value of the listbox. As an example, after changing the listbox element, the value of the active element should be written to the textbox above. How can I access this element?
tinymce.PluginManager.add('myexample', function(editor, url) {
// Add a button that opens a window
editor.addButton('myexample',
{
text: 'Example',
onclick: function()
{
// Open window
editor.windowManager.open({
title: 'Example Plugin',
body: [
// Text
{type: 'textbox', name: 'title', label: 'Text', value: 'temp'},
// Listbox
{type: 'listbox', name: 'test', label: 'Ziel',
'values':
[
{text: 'Eins', value: '1'},
{text: 'Zwei', value: '2'}
],
onselect: function(v)
{
console.log(this.value());
// CHANGE THE VALUE OF THE TEXTBOX ...
// ????
}
}
],
onsubmit: function(e)
{
console.log(e.data.title, e.data.test);
}
});
}
});
});
I know this is an old question, but I was facing the same issue and I found this answer in another forum that saved my day.
The standard tinymce way to do this is to save the popup window in a variable:
var win = editor.windowManager.open({ //etc
And then for accessing the element:
win.find('#text'); // where text is the name specified
I hope this can help someone else in the future.
Now I found a solution. The best method is not to use the internal form-designer. You can use an IFrame with an external html-page, then you can work with document.getElementById(...)
Here you can find an example

Categories