I have one page which has simply save button and i set alt+s for that.
hotkeys.bindTo($scope).add({
combo: ['alt+s'],
description: 'Collect Payments',
callback: function() {
$scope.collectPayment();
}
});
Below that there is one add button. when add button is presed one model is opened.
On that model also have save button and i have to set alt+s for that also.
hotkeys.bindTo($scope).add({
combo: ['alt+s'],
description: 'Save Form',
callback: function() {
$scope.saveForm();
}
});
How it isa possible ?
i tryed but main page key is lost.
Fortunatly i find answer of this.
When open model just delete all combs and initialize model combs.
and when close model reinitialize that main page combs.
Related
I have been using ng2-smart-table plugin for the table grid. There is an Add new button to add entry into the table.
But I just want to trigger the 'Add new' event from an external button (May be top of the table but not within the table). There is a feature already available in the ng2-smart-table which is completely reverse to my requirement. That can be achieved by using 'mode:external'.
Currently this is open with their Github page as an issue.
If they don't have an option with Ng2-smart-table, is there anyway to bind an event to other buttons(External) in Angular 6? If so, how can I do it?
You can trigger the ng2-smart-table's create event via DOM object event.
Let's say my ng2-smart-table's add button settings
add: {
addButtonContent : '<span class="add"><i class=""></i></span>',
createButtonContent:'<i class="far fa-save"></i>',
cancelButtonContent: '<i class="fas fa-times"></i>',
confirmCreate: true,
}
then on click of your external button trigger the click of 'add' button in the ng2-smart-table like
onAdd(event) {
$(".add").click();
}
You need to use LocalDataSource or ServerDataSource.
I had the same question, and after trying some examples, I saw the good one here.
In this part of the code they use the data source method load(data) with source(LocalDataSource):
constructor(protected service: BasicExampleLoadService) {
this.source = new LocalDataSource();
this.service.getData().then((data) => {
this.source.load(data);
});
}
Then i try with my code and did the same with LocalDataSource, but to add a row into the table I did this:
this.source.add({
name: 'name',
description: 'desc',
numQuestions: '8',
});
this.source.refresh();
And it work for me.
I hope it helps.
try it:
on your html:
<button (click)="addRecord()">Add</button>
<ng2-smart-table #smartTable [settings]="settings" [source]="source"></ng2-smart-table>
on your component:
#ViewChild('smartTable') smartTable;
.
.
.
addRecord() {
this.smartTable.grid.createFormShown = true;
this.smartTable.grid.getNewRow();
}
I try to disable programmatically the standard "save" button of the save plugin
tinymce.init
({
selector: '#editorMain',
plugins: "save,code,textcolor,charmap,searchreplace,paste,wordcount",
height: 400,
setup: function(editor) {
editor.on('keyup',function(e){
console.log(getStats('editorMain').chars);
var body = tinymce.get('editorMain').getBody();
var currentValue=tinymce.trim(body.innerText || body.textContent);
var currentCharsCount=getStats('editorMain').chars;
var limit=10;
var diff=limit - currentCharsCount;
if (diff>-1)
{
$("#chars_left").html(diff + " characters left");
}
else
{
$("#chars_left").html("Your comment is too long");
// here should we disable the save button
}
});
},
I googled for a solution and found that in version 3.x there was an object called "ControlManager". This has been removed in version 4 (the one I currently use)
According to the documentation the following should be implemented to do that:
// In TinyMCE 4 you can use the simpler stateSelector setting
editor.addButton('SomeButton', {
text: 'My button',
stateSelector: 'a'
});
but how can this work for the "save" button ? the save button comes when I use the "save" plugin, this does not have to be programmatically added.
well that was a tough one. This:
tinymce.activeEditor.theme.panel.find('toolbar *')[1];
enables to access the button. then the ".disabled(1)" method.
That's a pity that we cannot access the elements using their names or ids...
If you don't want the functionality of the save plugin simply remove it from the list in the plugins: init options. Use the list shown here.
tinymce.init
({
selector: '#editorMain',
plugins: "code,textcolor,charmap,searchreplace,paste,wordcount",
....
I am extending vBulletin's version of CKEditor 3.6 because I want to display an additional tab inside of the image upload dialog.
CKEDITOR.on('dialogDefinition', function(ev){
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName == 'vbimage'){
dialogDefinition.onOk = function(e){
doSomeOtherKindOfUpload();
return false;
};
dialogDefinition.addContents({
id: 'bla',
label: 'Additional Tab',
/*...*/
});
}
});
This works, but how can I control the dialog's OK button? As you see I already overrode the onOK-method, but this of course overrides it for all page tabs. How can I define a function that is only executed when my custom page tab is visible?
I just found a way by evaluating the DOM and the attributes elements of the dialog:
$('.cke_dialog_contents .cke_dialog_page_contents:visible').attr('name')
This works, but I don't consider it as a good solution. Isn't there a method in the CKEditor API for this?
I have made a webform that uses a TinyMCE editor. When the user clicks on a link to leave the page, I want a message to be displayed if he still has unsaved changes. For this, I was thinking of using the TinyMCE undoManager, http://www.tinymce.com/wiki.php/API3:class.tinymce.UndoManager
Essentially, I want the events onAdd, onUndo, OnRedo to fire. I will then keep track of the number of changes (if any) since the last save. But how do I get them to fire? Where do I set them up?
Also, it would be nice to have access to the hasUndo method in the rest of my javascript code. Again, not sure where to initiate this?
Not sure if it matters, but I'm using Django.
Edit: I have tried
tinyMCE.init({
...,
setup : function(ed) {
ed.UndoManager.onAdd(function(ed) {
ed.windowManager.alert('added.');
});
}
});
This gives me an error: Unable to get value of the property 'onAdd': object is null or undefined
I created a tinym fiddle for this: http://fiddle.tinymce.com/H0caab .
The solution is to use the oninit setting and to addresss the onAdd.add:
tinyMCE.init({
...
setup : function(ed) {
ed.onInit.add(function(ed) {
ed.undoManager.onAdd.add(function(ed) {
alert('added.');
});
});
}
});
I am using CKEditor on a website and I need to be able to put a special data attributes on some of the links created through the editor. The user would indicate that they need the special attribute put on the link by checking a checkbox in the link dialog. I have managed to add a checkbox to the link dialog with the following code:
CKEDITOR.on('dialogDefinition', function(ev) {
if (ev.data.name == "link") {
var info = dialog.getContents("info");
info.elements.push({
type: "vbox",
id: "urlOptions",
children: [{
type: "hbox",
children: [{
id: "button",
type: "checkbox",
label: "Button",
commit: function(data) {
data.button = this.getValue()
console.log("commit", data.button, data);
},
setup: function(data) {
this.setValue(data.button);
console.log("setup", data.button, data);
}
}]
}]
});
}
});
Now I have two problems. The first one is that despite me adding the code in the commit and setup functions that should save the state of the checkbox, it's not working. It's as if the data can't hold any other parameters but the ones there by default.
The second problem is that I don't know how to add / remove the data attribute on my links. It seems to me that I should be doing that in my onOk callback on the dialog, however, the link dialog already has an onOk callback, so I'm not sure how I should be proceeding. I, of course, do not want to modify any of CKEditor's files directly.
How can I accomplish these things?
You best option is to modify the plugin. So you need to open the source code and find the file links.js in c:\ckeditor_3.6.5\ckeditor\_source\plugins\link\dialogs\
The source code is quite big (40k) but here you can modify the dialog however you want. When you finish just copy it to your plugins folder, and compress it: http://jscompress.com/
I have done what you need myself. The whole uncompressed file is here: https://gist.github.com/3940239
What you need to do:
First add this line just before the dialog "browse" button is appended. Approx. in line: 547:
{
id: "button",
type: "checkbox",
label: "Button",
setup: function (data) {
this.allowOnChange = false;
if (data.button)
this.setValue(data.button);
this.allowOnChange = true;
},
commit: function (data) {
data.button = this.getValue()
this.allowOnChange = false;
}
},
This part is actually your code. I just copied and pasted it.
Then, go to the onOk function, approx. in line 1211: and after commitContent add this code:
this.commitContent( data );
//My custom attribute
if (data.button)
attributes["custom-attribute"] = "button";
else
attributes["custom-attribute"] = "";
This will modify your link adding the attribute to the element such as text
That's it. Although, you may also like to load the current status of the checkbox. Then, go to the function parseLink . Approx. line 179 to load the attributes:
...
if ( element )
{
retval.button = element.getAttribute('custom-attribute');
var target = element.getAttribute( 'target' );
...
I am exploring the same thing now. What I have decided to do at this point is to:
Get a base ckeditor install without the link plugin
create my own fork of the link plugin, and add my changes to it, then activate and use this plugin within the group that link normally shows up in.
...working with it as a custom plugin (albeit a copy of the original) should alleviate the problem of upgrading. You just simply do not use the original link plugin at all. Copy and rename it, and use your custom copy instead.