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
Related
Please any one help me. I need the tinyMCE popup textbox validation. how to validate the textbox when click on ok Here i use the code below.
tinymce.PluginManager.add('weblink', function(editor, url) {
editor.addButton('weblink', {
text: 'Web Link',
icon: false,
onclick: function() {
editor.windowManager.open({
title: 'Web Link',
body: [
{type: 'textbox', name: 'caption', label: 'Enter Your Caption',maxLength:20},
{type: 'textbox', name: 'weburl', label: 'Enter Your Web URL',maxLength:32}
],
onsubmit: function(e){
var weblinkTxt = "href='"+e.data.weburl+"'";
if(hyperlink!='' && (hyperlink==1 || hyperlink =='1'))
{
editor.insertContent("<a "+weblinkTxt+">"+ e.data.caption+"</a>")
}
else
{
editor.insertContent("<img src='"+emailImg+"'>"+ e.data.caption+" "+e.data.weburl)
}
}
});
}
});
});
I just came across the need to validate the input from a dialog in TinyMCE as well. Unfortunately, it seems there is no native way to do it. However, I found a way to do it, using e.preventDefault().
The idea is to use the e.preventDefault() right after the submit function starts, and manage the dialog window afterwards. This way, it is possible to validate the input:
If it is not valid, then show a warning to the user and do nothing to the dialog window. It will be kept open, and the user will have to insert a new value;
If it is valid, then close the window dialog and continue the method to do whatever you want.
Applied to you example, it would be like this:
tinymce.PluginManager.add('weblink', function(editor, url) {
editor.addButton('weblink', {
text: 'Web Link',
icon: false,
onclick: function() {
editor.windowManager.open({
title: 'Web Link',
body: [
{type: 'textbox', name: 'caption', label: 'Enter Your Caption',maxLength:20},
{type: 'textbox', name: 'weburl', label: 'Enter Your Web URL',maxLength:32}
],
onsubmit: function(e){
//this will prevent TinyMCE from closing the window dialog
e.preventDefault();
/*here you apply your validations to e.data.weburl
and to e.data.caption*/
if(isNotValid){
/*The validation failed, so let's tell the user about it.
The empty function is to let TinyMCE know that it should
do nothing when clicking on the "OK" button. Without it,
I experienced different behaviour when clicking on
"OK" and when pressing "Enter".*/
editor.windowManager.alert('Invalid input!', function(){});
} else {
/*It is valid, so let's first close the
dialog window, and then do what you want*/
editor.windowManager.close();
var weblinkTxt = "href='"+e.data.weburl+"'";
if(hyperlink!='' && (hyperlink==1 || hyperlink =='1'))
{
editor.insertContent("<a "+weblinkTxt+">"+ e.data.caption+"</a>")
}
else
{
editor.insertContent("<img src='"+emailImg+"'>"+ e.data.caption+" "+e.data.weburl)
}
}
}
});
}
});
});
Hope this can still help you or anyone also facing this problem!
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.
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)
This seems like it ought to be simple to do, but I'm having a hard time figuring it out. I have a tinymce instance, and for various reasons I want to have all the toolbar items on one long line. The problem is that there are slightly too many items for it all to fit so I'd like to create a custom button and put the toolbar items in there. Something like:
tinyMCE.init({
...
setup: function(editor) {
editor.addButton('insertMenu', {
type: 'listbox',
text: 'Insert',
icon: false,
items: 'code link'
});
},
toolbar1: 'insertMenu undo redo | bold italic |alignjustify | ...
Obviously that doesn't work because the items: 'code link' isn't correct for a listbox.. but it I'd hope it's possible to do this sort of thing in tinyMCE. Yes I have looked at examples like http://www.tinymce.com/tryit/3_x/menu_button.php but they always contain text links etc. whereas I just want to reuse the existing toolbar icons and functionality.
You were almost there. You could use something like this if you wanted to define your button inline in the initialiser as you're doing it, or else you might be better off moving the functionality out into a separate plugin and requiring that in your initialiser. http://www.tinymce.com/wiki.php/Tutorials:Creating_a_plugin
editor.addButton('insertMenu', function() {
var items = [{text: 'Option 1', value: 'option1Value'}, {text: 'Option 2', value: 'option2Value'}];
return {
type: 'listbox',
text: 'select box title',
tooltip: 'a tooltip',
values: items,
fixedWidth: true,
onclick: function(e) {
console.log('Value selected: ' + e.control.settings.value)
}
};
});
I have to make a diagram editor, so I'm using AlloYUI, I've added a custom node following the answer for this question.
I've successfully set new nodes and retreive it's values via diagramBuilder.toJSON()
What I'm trying to do is change the default editor widget for the custom attribute of my custom node, I'd like to change the textbox for date picker widget, but my goal is being able to use any other form elements, like a select, or a set of radio buttons.
Toying around with the javascript debugger included in WebStorm, I've found that the default fields have an 'editor' attribute where is defined a "textAreaCellEditor".
But my custom property doesn't have this attribute, So I'm trying to attach an editor, but I cannot get it to work, I've tried with this:
Y.DiagramNodeCustom = Y.Component.create({
NAME: 'diagram-node',
ATTRS: {
type: {
value: 'custom'
},
custom_attr: {
value: 'customAttr'
}
},
EXTENDS: Y.DiagramNodeTask,
prototype: {
getPropertyModel: function () {
var instance = this;
var model = Y.DiagramNodeTask.superclass.getPropertyModel.apply(
instance, arguments);
model.push({
attributeName: 'customAttr',
name: 'Custom Attribute',
editor: Y.Component.create({
NAME: "DateField",
EXTENDS: Y.DateCellEditor
})
});
return model;
},
SERIALIZABLE_ATTRS: ['description', 'name', 'required', 'type',
'width', 'height', 'zIndex', 'xy', 'customAttr']
}
});
Y.DiagramBuilder.types['custom'] = Y.DiagramNodeCustom;
I've also tried to change the "model.push" section to:
model.push({
attributeName: 'customAttr',
name: 'Custom Attribute',
editor: {name: "textCellEditor"}
});
and to:
model.push({
attributeName: 'customAttr',
name: 'Custom Attribute',
editor: Y.DateCellEditor({
name: 'DateCellEditor'
})
});
But nothing works. Do you have any idea how can I change the default editor?
Thanks to Robert Frampton, who anwered my question in google groups, the way to do it is:
model.push({
attributeName: 'customAttr',
name: 'Custom Attribute',
editor: new Y.DateCellEditor()
});
You have to create a new instance of the Y.DateCellEditor object with adding 'new' before the constructor.