I am still at upgrading tinymce version 3 to version 4.
The problem i have is with the usage of the toolbar ui.
I am able to create a listbox with several entries, but i do not know how to add listbox elements after the listbox has been created.
With tinymce3 it was easy to add a list item to a list even after creation of that list.
I do not know how to achieve this with tinymce 4.
What do i need to do? Any suggestions?
Here the code i use to create the listbox:
editor.addButton('my_listbox', {
type: 'listbox',
text: 'my_listbox_desc',
icon: false,
onselect: function(e) {
editor.insertContent(this.value());
},
values:[
{text: 'Menu item 1', value: 'Some text 1'},
{text: 'Menu item 2', value: 'Some text 2'},
{text: 'Menu item 3', value: 'Some text 3'}
],
onPostRender: function() {
// Select the third item by default
editor.irstyle_control = this;
this.value('Some text 3');
}
});
I had a same issue... After visiting many topics on their forum, I came to write something like this
tinymce.PluginManager.add('sampleWithEditable', function(ed, url) {
var me=this, dynamicallyEditable;
function getValues() {
return ed.settings.myKeyValueList;
}
ed.addButton('my_listbox', {
type: 'listbox',
text: 'my_listbox_desc',
icon: false,
onselect: function(e) {
ed.insertContent(this.value());
},
values:[
{text: 'Menu item 1', value: 'Some text 1'},
{text: 'Menu item 2', value: 'Some text 2'},
{text: 'Menu item 3', value: 'Some text 3'}
],
onPostRender: function() {
// Select the third item by default
ed.irstyle_control = this;
this.value('Some text 3');
dynamicallyEditable=this
}});
me.refresh = function() {
if(dynamicallyEditable.dynamicallyAdded){
dynamicallyEditable.dynamicallyAdded.remove();
dynamicallyEditable.dynamicallyAdded = null;
}
dynamicallyEditable.settings.values = dynamicallyEditable.settings.dynamicallyAdded = getValues();
};
}
Then From the ajax success method
tinyMCE.activeEditor.settings.myKeyValueList = [{text: 'text_here', value: 'value_there'}];
tinyMCE.activeEditor.plugins.sampleWithEditable.refresh();
Related
I'm working on a plugin for TinyMCE editor. The idea is very simple, basically the user can insert a product link from a dropdown selecter where a custom class and a link to the page of the product are automatically added.
I get data from an array like this one:
function products_list() {
return array(
array('product-tag-1' => 'Product 1', 'https://website.com/product1-page'),
array('product-tag-3' => 'Product 2', 'https://website.com/product2-page'),
array('product-tag-3' => 'Product 2', 'https://website.com/product3-page'),
);
}
and here is the plugin code:
(function() {
var _products_list = [];
for(var i = 0; i < products_list.length; i++){
var product = _products_list[i];
_products_list.push({ product: Object.values(product)[1], url: Object.values(product)[0], tag: Object.keys(product)[1]});
console.info(_products_list);
}
tinymce.PluginManager.add('product_link', function( editor, url ) {
editor.addButton( 'product_link', {
text: 'Product Link',
icon: false,
onclick: function() {
editor.windowManager.open( {
title: 'Select a Product',
body: [{
type: 'listbox',
name: 'productSelect',
values: _products_list,
onPostRender: function( ){
productSelect = this;
}
},
{type: 'textbox', name: 'linkText', label: 'anchor text'}
],
onsubmit: function( e ) {
link = editor.insertContent('' + e.data.linkText + '');
}
});
}
});
});
})();
But when I select something it returns this error in console : 'Uncaught Typerror: productSelect.url is not a function'.
Any hint?
Tried to debug code but nothing worked.
I have CKEDITOR dialog with two tabs:
- view one
- view two
Inside view one I have a button that should open view two if clicked by the user.
But I don't know how to do this. This is my CKEDITOR.dialog code:
CKEDITOR.dialog.add('placeholder', function(editor) {
var lang = editor.lang.placeholder,
generalLabel = editor.lang.common.generalTab,
validNameRegex = /^[^\[\]<>]+$/;
return {
title: 'some title',
minWidth: 300,
minHeight: 150,
contents: [{
id: 'initial-view',
label: 'view one',
title: generalLabel,
elements: [{
id: 'name-one',
style: 'width: 100%;',
type: 'html',
html: 'Organizational units'
}, {
type: 'button',
id: 'buttonId',
label: 'Click me',
title: 'My title',
setup: function(widget) {
},
onClick: function(widget) {
// this = CKEDITOR.ui.dialog.button
My code should go here........?
}
}]
}, {
id: 'organizational-unit-view',
label: 'view two',
title: generalLabel,
elements: [
// Dialog window UI elements.
{
id: 'list-of-vars',
style: 'width: 100%;',
type: 'html',
html: 'second view --- html goes here',
label: lang.name,
setup: function(widget) {
this.setValue(widget.data.name);
},
commit: function(widget) {
widget.setData('name', this.getValue());
}
}
]
}]
};
});
My question is how should I handle that button click? What method should I use? Basically how to open view two?
I found a solution. On click event is should use getDialog():
this.getDialog().selectPage('your-content-id);
Like this:
onClick: function(widget) {
this.getDialog().selectPage('organizational-unit-view');
}
I am adding a textfield dynamically when i click add button, after that i need to get the values what i added dynamically while i click save button. its in extjs2.0 itself.
This is the code what i am working on
var settingsEmailPanel = new Ext.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
url:'save-form.php',
frame:true,
id:'emailForm',
title: 'Email Servers',
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {width: 230},
defaultType: 'checkbox',
items: [{
boxLabel: 'Server 1',
hideLabel: true,
name: 'server1'
},{
boxLabel: 'Server 2',
hideLabel: true,
name: 'server2'
},{
boxLabel: 'Server 3',
hideLabel: true,
name: 'server3'
}, {
boxLabel: 'Server 4',
hideLabel: true,
name: 'server4'
}
],
buttons: [{
text: 'Add',
handler: function () {
settingsEmailPanel.add({
xtype: 'textfield',
fieldLabel: 'New ServerName',
name: 'newServer',
allowBlank:false
});
settingsEmailPanel.doLayout();
}
},{
text: 'Save',
handler: function () {
alert("Save clicked");
console.log(Ext.getCmp("emailForm").getForm().findField("newServer").getValue());
}
}]
});
Here what I am trying to do is onclick of save I need to query each element of form and if element xtype is textfield then getting value each by each and displaying that.
Code for save button is :
{
text: 'Save',
handler: function() {
var settingsEmailPanel = this.up().up();
var settingsEmailPanelItem = settingsEmailPanel.items.items;
for (var i = 0; i < settingsEmailPanelItem.length; i++) {
if (settingsEmailPanelItem[i].xtype == "textfield") {
var Value = settingsEmailPanelItem[i].getValue();
alert(Value)
}
}
// alert("Save clicked");
//console.log(Ext.getCmp("emailForm").getForm().findField("newServer").getValue());
}
}
I created a fiddler for you which you can check here.
Fiddle
Note : I can not see fiddle work for ExtJs 2 so I did in ExtJS 4. For making work in extJS 2 you need to assign uniqe id to each textfield and then retrive the value I suppose. The above answer will work from ExtJS 4 and above. if you make a fiddle for ExtJS 2 and I will try further more.
Just add them to an array every time you create one so you can retrieve them later in your save button handler :
var textFields = [];
/*
* [...]
*/
buttons: [{
text: 'Add',
handler: function () {
var textField = Ext.create('Ext.form.field.Text', {
xtype: 'textfield',
// ...
});
textFields.push(textFields);
settingsEmailPanel.add(textField);
settingsEmailPanel.doLayout();
}
},{
text: 'Save',
handler: function () {
for(var i=0; i<textFields.length; i++){
console.log(textFields[i].getValue());
}
}
}]
I have 2 select tags on my view.html like so
<select id="first" data-bind="options: firstDropdownOptions, optionsText: 'title', value: value"></select>
<select id="second" data-bind="options: secondDropdownOptions, optionsText: 'title', value: value"></select>
And something like this in my viewmodel.js
var firstDropdownOptions = ko.observableArray([
{ value: -1, title: 'Select Type' },
{ value: 111, title: 'Option 1' },
{ value: 222, title: 'Option 2' },
{ value: 333, title: 'Option 3' }
]);
var secondDropdownOptions = ko.observableArray([
{ value: -1, title: 'Select Type' },
{ value: 1, title: 'Option New 1' },
{ value: 2, title: 'Option New 2' },
{ value: 3, title: 'Option New 3' }
]);
I am unable to bind data to both my <select> tags. Only the first <select> tag works properly. Also, if I move the #second <select> tag before the #first <select>, then the #second shows correct data, but not the #first <select>.
How do I bind data to both my <select> tags?
In both of your bindings you are using value: value. This means that values of both select elements are bound to the same model property, called value. You are using different arrays with different objects, so single value cannot function correctly. Try using two different properties for storing values, for example:
var vm = {
firstDropdownOptions: ko.observableArray([
{ value: -1, title: 'Select Type' },
{ value: 111, title: 'Option 1' },
{ value: 222, title: 'Option 2' },
{ value: 333, title: 'Option 3' }
]),
secondDropdownOptions: ko.observableArray([
{ value: -1, title: 'Select Type' },
{ value: 1, title: 'Option New 1' },
{ value: 2, title: 'Option New 2' },
{ value: 3, title: 'Option New 3' }
]),
// property for storing selected value of firstDropdownOptions:
selectedFirstOptionValue: ko.observable(''),
// property for storing selected value of secondDropdownOptions:
selectedSecondOptionValue: ko.observable('')
};
ko.applyBindings(vm);
And in your HTML bind properties selectedFirstOptionValue and selectedSecondOptionValue respectively (properties will contain objects from your arrays):
<select id="first" data-bind="options: firstDropdownOptions, optionsText: 'title', value: selectedFirstOptionValue"></select>
<select id="second" data-bind="options: secondDropdownOptions, optionsText: 'title', value: selectedSecondOptionValue"></select>
Here is a working jsFiddle
As an alternate to dotnetom's answer, this worked for me too.
Instead of using different properties for storing the selected values in my viewmodel.js, I used firstDropdownOptions().value and firstDropdownOptions().value in view.html instead.
view.html
<select data-bind="options: firstDropdownOptions, optionsText: 'title', value: firstDropdownOptions().value"></select>
<select data-bind="options: secondDropdownOptions, optionsText: 'title', value: secondDropdownOptions().value"></select>
viewmodel.js
var vm = {
firstDropdownOptions: ko.observableArray([
{ value: -1, title: 'Select Type' },
{ value: 111, title: 'Option 1' },
{ value: 222, title: 'Option 2' },
{ value: 333, title: 'Option 3' }
]),
secondDropdownOptions: ko.observableArray([
{ value: -1, title: 'Select Type' },
{ value: 1, title: 'Option New 1' },
{ value: 2, title: 'Option New 2' },
{ value: 3, title: 'Option New 3' }
])
};
ko.applyBindings(vm);
Here's the fiddle.
I can access a list (as a container of items) in a controller but I do not know how to access list items properties.
How to create the correct ComponentQuery rule? I tried 'list > item' but it does not work.
Each item has it's title but I get 'undefined' as output in selectSection.
Ext.define( 'UGP.controller.BeginList',
{
extend: 'Ext.app.Controller',
config:
{
views: [ 'BeginList' ],
control:
{
'list':
{
select: 'selectSection'
}
}
},
selectSection: function()
{
Ext.Msg.alert( 'title=' + this.title );
}
}
);
The BeginList.js with the list component:
Ext.define( 'UGP.view.BeginList',
{
extend: 'Ext.List',
config:
{
fullscreen: true,
itemTpl: '{title}',
data:
[
{ title: 'Chapter 1', id: 0, action: "selectSection" },
{ title: 'Chapter 2', id: 1, action: "selectSection" },
{ title: 'Chapter 3', id: 2, action: "selectSection" },
{ title: 'Chapter 4', id: 3, action: "selectSection" }
]
}
}
);
You can see in the select event documentation that it passes arguments. So you can change the signature of your selectSection function to this :
selectSection: function (list, record) {
Ext.Msg.alert( 'title=' + record.get( 'title' ) );
}
You can also take a look at the itemTap event which usually the one used to detect tap events on a list item.
Hope this helps