Javascript
var tiny_options = {
height: 120,
width: 300,
mode: 'textareas',
theme: 'advanced',
theme_advanced_buttons1: 'bold,italic,underline',
theme_advanced_buttons2: '',
theme_advanced_fonts: 'Arial=arial,helvetica,sans-serif,Courier New=courier new,courier,monospace,Georgia=georgia,times new roman,times,serif,Tahoma=tahoma,arial,helvetica,sans-serif,Times=times new roman,times,serif,Verdana=verdana,arial,helvetica,sans-serif',
theme_advanced_toolbar_location: 'top',
theme_advanced_toolbar_align: 'left'
};
//tinymce.init(tiny_options); // Please, remove comment to activate the tinymce
var initData = function (d) {
this.id = ko.observable(d.id);
this.text = ko.observable(d.text);
};
var viewModel = function () {
var self = this,
data = [{
id: 1,
text: 'some text 1'
}, {
id: 2,
text: 'some text 2'
}];
self.dataSet = ko.observableArray([]);
$.each(data, function (i, d) {
self.dataSet.push(new initData(d));
});
};
var model = new viewModel();
ko.applyBindings(model);
UI
<!-- ko foreach : dataSet -->
<br>
<textarea data-bind="value: text, valueUpdate : 'change'"></textarea>
<br>
<!-- /ko -->
Link to Demo
Above, code is working fine, i.e. model data is updating nicely without tinymce binding, but when I activate the tinymce, view model observable is not updating. I tried this also, but no result.
So, Please help me to configure, how can I update the view model observables using tinymce binding?
Looks like you need a custom binding that will bind up the value and apply the TinyMCE Editor to your <textarea>. The net result looking something like this;
<textarea data-bind="wysiwyg: text"></textarea>
Give the one I've put together on Github a try https://github.com/michaelpapworth/tinymce-knockout-binding
This is a simple custom binding to update observable:
ko.bindingHandlers.richTextEditor = {
init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
window.tinymce.init({
target: element,
skin: "lightgray",
menubar: false,
statusbar: false,
forced_root_block: false,
browser_spellcheck: true,
toolbar: "bold italic underline",
valid_elements: "strong,br,em,span[style|class|id|data],i[class]",
formats: {
bold: { inline: "strong" },
italic: { inline: "em" },
underline: { inline: "span", styles: { "text-decoration": "underline" } }
},
plugins: "paste",
resize: false,
setup: function (editor) {
editor.on("change", function () {
var textInputBinding = allBindings().textInput;
var content = this.getContent();
textInputBinding && textInputBinding(content);
});
}
});
}
};
the binding on textarea should be data-bind="textInput: yourObservable".
Related
I have a form with autoScroll feature. How can I scroll to the bottom of the form when I add a new item to it?
height: 200,
autoScroll: true,
Here is my sample code
If the field is added at the end of the form then the following solution might help:
EXTJS 5 & 6
http://docs.sencha.com/extjs/5.1.0/api/Ext.form.Panel.html#cfg-scrollable
In the form config:
scrollable: true,
In button handler:
{
xtype: 'button',
itemId: 'addChildBtn',
disabled: false,
text: 'Clone fieldset',
handler: function () {
// Clone field set
var set = Ext.getCmp('s1');
var s = set.cloneConfig();
form.add(s);
this.up('form').getScrollable().scrollTo(0, 9999);
}
}
EXTJS 4
http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.form.Panel-method-scrollBy
In button handler:
{
xtype: 'button',
itemId: 'addChildBtn',
disabled: false,
text: 'Clone fieldset',
handler: function () {
// Clone field set
var set = Ext.getCmp('s1');
var s = set.cloneConfig();
form.add(s);
this.up('form').scrollBy(0, 9999, true);
}
}
I have CKEditor and I added a dialog with 2 text areas in my own plugin.js folder, but I can't take text inputs when ok button pressed at dialog.
CKEDITOR.dialog.add('ticketDialog', function (editor) {
return {
title: 'Ticket Properties',
minWidth: 100,
minHeight: 100,
maxWidth: 100,
maxHeight: 100,
contents:
[
{
id: 'general',
label: 'Ticket from',
elements:
[
{
type: 'text',
id: 'Ticket',
label: "Write the company's name that you bought from",
'default': "Thy,Pegasus etc."
},
{
type: 'text',
id: 'Price',
label: "Price for single ticket",
'default': "0.00TL"
}
]
}
]
};
});
I have mvc view page and I replace my textarea with CKeditor by using javascript and I need to handle dialog's ok event here.
<script type="text/javascript">
var editor = CKEDITOR.instances['editor1'];
if (editor) { editor.destroy(true); }
CKEDITOR.replace('editor1', {
enterMode: CKEDITOR.ENTER_BR,
extraPlugins: 'ticket',
toolbar: 'Full',
language:'English'
});
CKEDITOR.on('dialogDefinition', function (e) {
var dialogName = e.data.name;
var dialog = e.data.definition.dialog;
dialog.on('ok', function () {
var elementPrice = e.data.definition.dialog.getElement('Price');
var rawValue = elementPrice.getInputElement().$.value; // here I am trying to take the value of Price area input.
alert(rawValue);
//CKEDITOR.instances['editor1'].insertHtml(rawValue);
});
});
</script>
Thank you.
Here is the answer for the other people to see well.
CKEDITOR.on('dialogDefinition', function (e) {
var dialogName = e.data.name;
var dialog = e.data.definition.dialog;
dialog.on('ok', function () {
var elementPrice = dialog.getContentElement('general','Price');
});
});
I've created a custom dropdown in tinymce like this:
tinymce.init({
toolbar: "alignment",
setup: function(editor) {
editor.addButton('alignment', {
type: 'menubutton',
text: 'Alignment',
icon: false,
menu: [
{ text: 'left', onclick: function() {tinymce.activeEditor.formatter.toggle('alignleft');}},
{ text: 'center', onclick: function() {tinymce.activeEditor.formatter.toggle('aligncenter');}},
{ text: 'right', onclick: function() {tinymce.activeEditor.formatter.toggle('alignright');}},
{ text: 'justify', onclick: function() {tinymce.activeEditor.formatter.toggle('alignjustify');}},
]
});
}
});
which creates this:
However what I'd like is to just move the alignment buttons from the main toolbar in the dropdown menu.
How do I got about putting these actual buttons from the toolbar, into a dropdown menu? Is it like the code above or is a a totally different way?
So basically put these buttons in the dropdown above with the toggle states for on and off too.
Try this setup - Plunker
tinymce.init({
selector: "textarea",
toolbar: "styleselect | bold italic | alignment | alignmentv2",
setup: function(editor) {
editor.addButton('alignment', {
type: 'listbox',
text: 'Alignment',
icon: false,
onselect: function(e) {
tinyMCE.execCommand(this.value());
},
values: [
{icon: 'alignleft', value: 'JustifyLeft'},
{icon: 'alignright', value: 'JustifyRight'},
{icon: 'aligncenter', value: 'JustifyCenter'},
{icon: 'alignjustify', value: 'JustifyFull'},
],
onPostRender: function() {
// Select the firts item by default
this.value('JustifyLeft');
}
});
editor.addButton('alignmentv2', {
type: 'menubutton',
text: 'Alignment v2',
icon: false,
menu: [
{icon: 'alignleft', onclick: function() { console.log(editor); tinyMCE.execCommand('JustifyLeft'); }},
{icon: 'alignright', onclick: function() { tinyMCE.execCommand('JustifyRight'); }}
]
});
}
});
#NoBugs, you can enhance the onselect method to perform the alignment icon update.
At first, by examining structure of this object in the onselect method we'll see that this.settings.values property stores an array with early defined values.
By using one of many find utility functions we get the selected value item and update the icon as needed:
onselect: function() {
selectedItem = find(this.settings.values, {value: this.value()})
this.icon(selectedItem.icon)
tinyMCE.execCommand(this.value());
}
Hope, this helps. Cheers!
This is probably best solved using a custom split button. That way we can assign the last selected option to the main button.
See the result here - CodePen
tinymce.init({
selector: '#editor',
menubar: false,
toolbar: 'bold italic underline | alignmentsplit | bullist numlist outdent indent',
setup: function (editor) {
editor.on('init', function() {
this.getDoc().body.style.fontSize = '16px';
this.getDoc().body.style.fontFamily = 'Georgia';
});
editor.addButton('alignmentsplit', {
type: 'splitbutton',
text: '',
icon: 'alignleft',
onclick: function(e) {
tinyMCE.execCommand(this.value);
},
menu: [{
icon: 'alignleft',
text: 'Align Left',
onclick: function() {
tinyMCE.execCommand('JustifyLeft');
this.parent().parent().icon('alignleft');
this.parent().parent().value = 'JustifyLeft'
}
}, {
icon: 'alignright',
text: 'Align Right',
onclick: function() {
tinyMCE.execCommand('JustifyRight');
this.parent().parent().icon('alignright');
this.parent().parent().value = 'JustifyRight';
}
}, {
icon: 'aligncenter',
text: 'Align Center',
onclick: function() {
tinyMCE.execCommand('JustifyCenter');
this.parent().parent().icon('aligncenter');
this.parent().parent().value = 'JustifyCenter';
}
}, {
icon: 'alignjustify',
text: 'Justify',
onclick: function() {
tinyMCE.execCommand('JustifyFull');
this.parent().parent().icon('alignjustify');
this.parent().parent().value = 'JustifyFull';
}
}
],
onPostRender: function() {
// Select the first item by default
this.value ='JustifyLeft';
}
});
}
});
Note: If you re-select an alignment option on content that is already aligned that way, TinyMCE toggles the alignment formatting off. This is default TinyMCE behaviour, but you would need to indicate that the section already has that formatting via a toggle state on the button for this to make more sense to the user. This has not been implemented above.
I've just started working with Sencha Touch over the past couple days and I've run into a few questions. The main one is, when working with anything that doesn't regularly have user click interaction (titlebar, html text, etc for some random examples), is it possible to click on things like this and get a panel to appear.
I know that with buttons and other things, you have a tap, itemtap, etc, but I'm not sure about instances like this. Any help would be appreciated with examples.
Yes you can. Check out my blog post here: http://www.senchahackers.com/touch/multiple-tap-listeners-one-xtemplate/ that explains exactly how to do that.
Basically you can listen for a tap event on any element, as long as you add it to the list of 'delegates'
In your view:
listeners: {
tap: {
element: 'element',
delegate: '.app-box, .doc-box, .bubble-holder',
fn: function(e){
var url = e.target.name,
divClassName = e.delegatedTarget.className,
appbox = "app-box",
docbox = "doc-box",
bubble = "bubble-holder";
console.log(divClassName);
switch(divClassName){
case docbox :
//lets say you have an element '.doc-box' that you want to click and show the panel
// show the panel, which is a separate file, shown below
var profileController = YourApp.getController('YourController');
//call the showProfilePanelPopup() method in your controller, passing in this as the element that shows it
profileController.showProfilePanelPopup(this);
break;
case appbox :
alert(appbox);
break;
case bubble :
alert(bubble);
break;
}
}
}
}
Then in your controller:
extend: 'Ext.app.Controller',
config: {
refs: {
profilePanelPopup: {
autoCreate: true,
selector: '#profilePanelPopup',
xtype: 'profilePanelPopup'
}
}
},
showProfilePanelPopup: function(btn, action, values) {
var me = this;
var popup = me.getProfilePanelPopup();
popup.showBy(btn);
popup.on('hide', function () {
popup.destroy();
}, this);
}
Assuming you some Panel in your views directory like this:
Ext.define('App.view.ProfileNowPop', {
extend : 'Ext.Panel',
alias: 'widget.profileNowPop',
xtype: 'profilePanelPopup',
config: {
height: (Ext.os.deviceType != "Desktop") ? "35%" : 253,
cls:'profilePop',
left: '1%',
padding: 0,
top: '1%',
width: (Ext.os.deviceType != "Desktop") ? '40%' : '36%',
hideOnMaskTap: true,
modal: {
cls:'opaquemask'
},
scrollable: false,
store: 'ProfilePopStore',
model: 'App.model.ProfilePopModel',
items:[
{
xtype: 'fieldset',
items: [
{
xtype: 'textfield',
id: 'gradePopField0',
cls: 'gradePopField',
style: 'background: #f7f7f5',
listeners: {
initialize: function(ele, eOpts) {
this.setReadOnly(true);
}
}
}
]
}
]
},
initialize: function() {
this.callParent(arguments);
}
});
Im really new to this java script and Sencha touch so sorry if this question is simple but I didn't find a way to do this.
I have a function that returns a value .
now I want to display the value from the function inside an html line.
how im calling this function from html element? how I show the value?
config: {
title: 'Me',
iconCls: 'user',
//layout: 'fit',
/* create a title bar for the tab panel */
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Singers'
},
{
html: [
'<h1>Hi!! ' + this.setName +'</h1>'
].join("")
}
],
},
setName: function (val) {
var store =Ext.getStore('user');
var last = st.last('user');
return val=(last.get('user'));
}
});
You could use the itemId property to reference the component and then update its html property via the initialise listener.
For example:
config: {
title: 'Me',
iconCls: 'user',
//layout: 'fit',
/* create a title bar for the tab panel */
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Singers'
},
{
itemId:'htmlContainer', //use itemIds like div ids
xtype:'container',
html: ''
}
],
/**
* #cfg listeners
* Parent Component listeners go here.
* Check sencha touch doc for more information and other available events.
*/
listeners:{
initialize: 'onInitialise'
}
},
onInitialise: function()
{
//set the html config item here
var c = this.down('#htmlContainer');
c.setHtml(this.setName());
},
setName: function (val) {
....
}