I have a KendoEditor as below:
editor.component.html includes:
<textarea>
kendoTextArea
name="editText"
(document:click)="onUserClick()"
(keydown)="onKeyDown()"
(keyup)="onKeyUp()"
#textAreaEditor
value ="{{value}}">
</textarea>
editor.component.ts includes:
kendo
.jQuery(textAreaEditor.nativeElement)
.kendoEditor({
resizable: {
content: true,
toolbar: false,
},
paste: (e: any) => {
console.log("paste");
},
select: (e: Event) => {
console.log('select event fired!');
},
tools: [
'bold',
'italic',
'underline',
'justifyLeft',
'justifyCenter',
'justifyRight',
'justifyFull',
],
change: (args) => {
console.log('value Changed');
},
})
.data('kendoEditor');
const editor = kendo
.jQuery(textAreaEditor.nativeElement)
.data('kendoEditor');
kendo
.jQuery(editor.window).bind('keydown', onKeyDown());
kendo
.jQuery(editor.window).bind('keyup', onKeyUp());
I need to be able to trap the backspace key, but the above code is not working and does not catch the BackSpace key as part of the KeyDown event. Can you please help?
Related
As described in the documentation of Summernote, I integrated them using class.
On my page I control them via Javascript:
$(document).ready(function () {
$('.summernote').summernote({
height: 230,
toolbar: [
['style', ['bold', 'italic', 'underline', 'clear']],
['para', ['ul', 'ol', 'paragraph']]
],
placeholder: 'Leseprobe eingeben. Maximal 50.000 Zeichen.',
callbacks: {
onKeydown: function (e) {
var t = e.currentTarget.innerText;
...
How can I control it separate for the second summernote? It has to have a different toolbar and callback-functions.
Via id summernote does not work.
CKEDITOR.plugins.add('Copyall', {
init: function(editor) {
editor.addCommand('copy_all', {
exec : function(editor){
alert('Yay!');
}
});
editor.ui.addButton('Copyall', {
label: 'Copy All',
command: 'copy_all',
toolbar: 'basicstyles',
icon: 'https://avatars1.githubusercontent.com/u/5500999?v=2&s=16'
});
}
});
CKEDITOR.config.toolbar = [
{name: 'basicstyles', items : ['Copyall', 'Font', 'FontSize', 'Bold', 'Italic', 'Strike']},
];
I have a simple menu for inline CKEDITOR elements. I merely need a button to do some js work.
https://jsfiddle.net/elb_/as1km50L/
Gine an id to your editable area:
<div id="editor1" contenteditable="true">some text</div>
Then, use your id to add the command and the button without a plugin:
CKEDITOR.instances.editor1.addCommand('copy_all', {
exec : function(editor) {
alert('Yay!');
}
});
CKEDITOR.instances.editor1.ui.addButton('Copyall', {
label: 'Copy All',
command: 'copy_all',
toolbar: 'basicstyles',
icon: 'https://avatars1.githubusercontent.com/u/5500999?v=2&s=16'
});
CKEDITOR.config.toolbar = [
{name: 'basicstyles', items : ['Copyall', 'Font', 'FontSize', 'Bold', 'Italic', 'Strike']},
];
See this: https://jsfiddle.net/as1km50L/1/
CKEDITOR.inlineAll();
for (var instanceName in CKEDITOR.instances) {
CKEDITOR.instances[instanceName].addCommand('copy_all', {
exec: function(edt) {
alert('Yay!');
}
});
CKEDITOR.instances[instanceName].ui.addButton('Copyall', {
label: 'Copy All',
command: 'copy_all',
toolbar: 'basicstyles',
icon: 'https://avatars1.githubusercontent.com/u/5500999?v=2&s=16'
});
}
CKEDITOR.config.toolbar = [
{name: 'basicstyles', items : ['Copyall', 'Font', 'FontSize', 'Bold', 'Italic', 'Strike']},
];
See that CKEDITOR.inlineAll() method above? Turns out that CKEDITOR instances are not available to customize unless that beauty is there. It's also interesting to note that without the inlineAll(), the CKEDITOR.instances will show as populated, but for some reason cannot be iterated.
Anyway, problem solved.
I'm having a problem with performing any action on combobox's store on the form's boxready event or at any other event that occurs before the dialog is fully rendered (combobox's afterrender, etc.).
E.g. something like this.getCombobox().getStore().removeAll() works perfectly on any event firing up on the form, except the ones that happen initially during dialog/elements loading...
problem with performing any action on combobox's store on the form's
boxready event or at any other event that occurs before the dialog is
fully rendered (combobox's afterrender, etc.)
No problems at all:
Ext.widget({
xtype: 'form',
items: [
{
xtype: 'combo',
store: Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
]
}),
fieldLabel: 'Choose State',
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
listeners: {
'afterrender': function() {
console.log("combo's afterrender");
}
}
}
],
renderTo: Ext.getBody(),
listeners: {
'boxready': function() {
console.log("form's boxready");
this.down('combo').getStore().setData([
{"abbr":"ME", "name":"Middle Earth"}
]);
},
'afterrender': function() {
console.log("form's afterrender");
}
}
});
By the way, as you can see in the fiddle, boxready happens after afterrender, not before.
I get
Uncaught TypeError: Cannot read property 'apply' of undefined
when I double click on the grid row. I am not sure why is this happening.
I have read this [How to access plugin in ExtJs MVC
and [Uncaught TypeError: Cannot read property 'apply' of undefined with Sencha
Here is the code.
Ext.define('App.view.admin.PersonsGrid' ,{
extend:'Ext.grid.Panel',
requires: ['Ext.grid.plugin.RowEditing', 'Ext.toolbar.Paging'],
alias:'widget.admin-personsgrid',
title:'People',
itemId:'personGrid',
autoScroll:true,
selType: 'rowmodel',
plugins: [
{
ptype: 'rowediting',
//clicksToEdit: 1,
clicksToMoveEditor: 2,
autoCancel: false,
pluginId: 'rowediting'
}
],
],
tbar:[
{text:'Add Person', itemId:'add'},
{text:'Edit Person', itemId:'edit'},
{text:'Remove Person', itemId:'remove'},
'->',
'Search:',
{
xtype:'textfield',
name:'searchValueField',
width:200,
},
{
text:'Submit',
itemId: 'submit',
}
],
initComponent: function() {
this.store = Ext.create('Ext.data.Store',{
model:'App.model.Person',
remoteFilter:true,
remoteSort:true,
pageSize:100
});
this.columns = [
{
text:'Last Name', dataIndex:'lastName',
editor: {xtype: 'textfield', allowBlank: false}
},
{
text:'First Name', dataIndex:'firstName',
editor: {xtype: 'textfield', allowBlank: false}
},
{
text:'Email', dataIndex:'email',
editor: {vtype: 'email', allowBlank: false}
},
{
text:'Org Unit', dataIndex:'orgUnitName',
editor: {xtype: 'textfield', allowBlank: false},
},
{
text:'Location', dataIndex:'name', editor: {
xtype: 'textfield', allowBlank: false}
},
{
text:'Office Phone', dataIndex:'officePhone',editor: {
xtype: 'textfield', allowBlank: false},
},
{
text:'Mobile Phone', dataIndex:'mobilePhone',editor: {
xtype: 'textfield', allowBlank: false}
},
{
text:'Home Phone', dataIndex:'homePhone',editor: {
xtype: 'textfield', allowBlank: false}
}
];
this.dockedItems = [
{
xtype: 'pagingtoolbar',
ui: 'footer',
defaultButtonUI: 'default',
dock: 'bottom',
displayInfo: true,
store: this.store
}
];
this.callParent( arguments );
}
});
Okay,
I was getting this weird message because in the controller I was trapping the event itemdblclick
'grid[xtype=admin-personsgrid] ' : {
edit: this.savePerson,
cancelEdit: this.cancelPersonEdit,
beforerende: this.loadPersonRecords,
**itemdblclick: this.personDoubleClicked,**
itemcontextmenu: this.showpersonContextMenu
},
And for itemdblclick: this.personDoubleClicked,
I did not write any function to handle the double click.
Hence the error was popping up.
I disabled the double click as I do not need it now.
Lesson learned for extjs. Do no add listeners if it is not required.
Feel like I should have been able to track this one down already. I need to create a custom plugin for CKEditor (I'm using 4.3.1). To get started I used the guide found here (http://docs.ckeditor.com/#!/guide/plugin_sdk_sample_1). I downloaded the code and put it in my ckeditor\plugins folder. So, now I have ckeditor\plugins\abbr. I'm not sure what I'm doing, but the button is not showing in the toolbar. The code is below. My questions are, where should I define the "abbr" extra plugin? Do I do it in my _Edit.cshtml page where I'm defining stylesheetparser? Or put it in config.js? Given the setup below shouldn't the button show up next to the source button? Do I need to include it in config.js or does the plugin code take care of that?
Been doing a little playing around and it does show up if I use the full toolbar, but not when I customize it.
config.js
CKEDITOR.editorConfig = function (config) {
config.toolbar = 'MyToolbar';
config.forcePasteAsPlainText = true;
//config.extraPlugins = 'abbr';
config.ignoreEmptyParagraph = 'true'
config.toolbar_MyToolbar =
[
{ name: 'document', items: ['Preview', 'Print'] },
{ name: 'clipboard', items: ['Cut', 'Copy', 'PasteText', '-', 'Undo', 'Redo'] },
{ name: 'editing', items: ['Find', 'Replace', '-', 'SelectAll', '-', 'SpellChecker', 'Scayt'] },
{ name: 'basicstyles', items : [ 'Bold','Italic','Subscript','Superscript','-','RemoveFormat' ] },
'/',
{ name: 'insert', items: ['Table', 'SpecialChar'] },
{ name: 'styles', items : [ 'Styles'] }
, { name: 'source', items: ['Source', '-', 'abbr'] }
];
};
_Edit.cshtml
#Html.TextAreaFor(e => e.Narrative, 10, 10, null)
<script type="text/javascript">
CKEDITOR.replace('Narrative', {
extraPlugins: 'stylesheetparser,abbr',
// Stylesheet for the contents.
contentsCss: '#Href("~/content/"+#Model.CssFile)',
stylesheetParser_skipSelectors: '',
disableNativeSpellChecker: false,
// Do not load the default Styles configuration.
stylesSet: [],
height: '600px',
width: '100%'
});
</script>
plugin.js
CKEDITOR.plugins.add( 'abbr', {
// Register the icons.
icons: 'abbr',
// The plugin initialization logic goes inside this method.
init: function( editor ) {
// Define an editor command that opens our dialog.
editor.addCommand( 'abbr', new CKEDITOR.dialogCommand( 'abbrDialog' ) );
// Create a toolbar button that executes the above command.
editor.ui.addButton( 'Abbr', {
// The text part of the button (if available) and tooptip.
label: 'Insert Abbreviation',
// The command to execute on click.
command: 'abbr',
// The button placement in the toolbar (toolbar group name).
toolbar: 'source'
});
// Register our dialog file. this.path is the plugin folder path.
CKEDITOR.dialog.add( 'abbrDialog', this.path + 'dialogs/abbr.js' );
}
});