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)
Related
I want to do something like this jsfiddle example, I need to put some custom attributes on left panel properties. Below I tried to make similarly but I can't drag the field
YUI().use('aui-form-builder',function (Y) {
Y.MyFormCustom = Y.Component.create({
NAME: 'form-node',
ATTRS: {
type: {
value: 'custom'
},
customAttr: {
validator: Y.Lang.isString,
value: 'A Custom default'
}
},
EXTENDS: Y.FormBuilderFieldBase,
prototype: {
getPropertyModel: function () {
var instance = this;
var model = Y.FormBuilderFieldBase.superclass.getPropertyModel.apply(instance, arguments);
model.push({
attributeName: 'customAttr',
name: 'Custom Attribute'
});
return model;
}
}
});
Y.FormBuilder.types['custom'] = Y.MyFormCustom;
var availableFields = [
{
iconClass: 'form-builder-field-icon-button',
label: 'Button',
type: 'custom'
}
];
myform= new Y.FormBuilder({
availableFields: availableFields,
boundingBox: '#myHolder'
}).render();
I don't know why the form is not appearing. Any help will be appreciated.
Your example has been very helpful to me because I also needed to extend the Form Builder fields.
The fix to the above is simple.
Replace the line:
Y.FormBuilder.types['custom'] = Y.MyFormCustom;
by
Y.FormBuilderField.types['custom'] = Y.MyFormCustom;
This solution is inspired from the source code found in the Alloy UI API.
See link:
AlloyUI Form Builder
Cheers
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 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.
I'm trying to implement [ngTagsInput][1] in my angularjs project. Following is my setup
#js file
$scope.loadTags = function(query) {
$scope.tags = [
{ text: 'just' },
{ text: 'some' },
{ text: 'cool' },
{ text: 'tags' }
]
//return $http.get('/tags?query=' + query);
}
and in my view (myview.html.haml)
%tags-input{"ng-model" => "tags"}
%auto-complete{:source => "loadTags($query)"}
which is same as
<tags-input ng-model="tags">
<auto-complete source="loadTags($query)"></auto-complete>
</tags-input>
** Above code I copied from the ngTagInput plugin website itself. and I'm using CDN to load the same versions as in the plugin website. But when I type tags im getting the following error in my javascript console
TypeError: Cannot read property 'then' of undefined
at http://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/2.0.1/ng-tags-input.min.js:1:5150
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js:13777:28
at completeOutstandingRequest (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js:4236:10)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js:4537:7
it looks like something to do with promises. (I'm pretty new to angularjs and Im just guessing), but I wonder how it works in the example given in the website
But if I load the tags with the page load, it works fine. What could be going wrong here. any help would be much appreciated
edit after #Pierre comments and my new code looks like this
I probably have forgot the most important part, I'm calling this tags autocomplete method (in controller) from a directive. (sorry about that... :()
recipeform.tags is my model
#haml form
%tags-input{"ng-model" => "recipeform.tags"}
%auto-complete{:source => "loadTags($query)"}
#js
$scope.loadTags = function(query) {
var defer = $q.defer();
defer.resolve([
{ text: 'just' },
{ text: 'some' },
{ text: 'cool' },
{ text: 'tags' }
]);
return defer.promise;
/*return [*/
//{ text: 'just' },
//{ text: 'some' },
//{ text: 'cool' },
//{ text: 'tags' }
/*]*/
}
Both the js codes give the same error as previous :(
<auto-complete source="loadTags($query)"></auto-complete>
The "source" is a method supposed to return a promise, which will be used to return the tags. Not to inject them into your model...
$scope.loadTags = function(query) {
return[
{ text: 'just' },
{ text: 'some' },
{ text: 'cool' },
{ text: 'tags' }
]
}
should work. If not, it means the directive need a REAL promise, then you will need to do (but I dont think you will need to go this far) :
$scope.loadTags = function(query) {
var defer = $q.defer();
defer.resolve([
{ text: 'just' },
{ text: 'some' },
{ text: 'cool' },
{ text: 'tags' }
]);
return defer.promise;
}
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