I'm working on an implementation of Ace Editor and Ctrl+F works great for the built-in "Find" dialog, however I'm trying to find a way to change out the Ctrl+H for Ctrl+R and prevent default behavior.
I've looked over docs and forums about working with the keybindings but I can't identify what method is being called to instantiate the 'replace' dialog or how to overwrite it.
Replace command is defined here. it is possible to use the following code to change Ctrl+H for Ctrl+R
editor.commands.addCommand({
name: "replace",
bindKey: {win: "Ctrl-R", mac: "Command-Option-F"},
exec: function(editor) {
require("ace/config").loadModule("ace/ext/searchbox", function(e) {
e.Search(editor, true)
// take care of keybinding inside searchbox
// this is too hacky :(
var kb = editor.searchBox.$searchBarKb
command = kb.commandKeyBinding["ctrl-h"]
if (command && command.bindKey.indexOf("Ctrl-R") == -1) {
command.bindKey += "|Ctrl-R"
kb.addCommand(command)
}
});
}
});
but the part with inner command is quite ugly, i'd suggest to make an issue on ace repository to either use normal name for it, or pick up replace commands key automatically
This worked for me:
editor.commands.addCommand({
name: 'replace',
bindKey: {win: 'Ctrl-R', mac: 'Command-Option-F'},
exec: function(editor) {
ace.config.loadModule("ace/ext/searchbox", function(e) {e.Search(editor, true)});
},
readOnly: true
});
Related
I am using Ace editor in a web app I am developing. I have a Save button that calls a function I wrote called handleFileUpdate(). But, I also want the user to be able to save the contents by a keyboard shortcut.
Here is my current code for the Ace keybinding:
this.editor.commands.addCommand({
name: 'save',
bindKey: {win: "Ctrl-S", "mac": "Cmd-S"},
exec: function(editor) {
this.handleFileUpdate();
}
});
where this.handleFileUpdate() is a function in my own code.
When the command is invoked, Ace throws this error:
TypeError: this.handleFileUpdate is not a function. (In 'this.handleFileUpdate()', 'this.handleFileUpdate' is undefined)
I understand that this.handleFileUpdate() is not visible to Ace.
My question is: how is it possible for an Ace command to invoke an external function? Or put another way, how is it possible to provide a custom function to Ace so it can invoke it when Ctrl-S is pressed?
This is not so much a question about ace, as about this handling in javascript.
In your example this in the internal function is the object on which the method is defined.
As a workaround you can use an arrow function.
this.editor.commands.addCommand({
name: 'save',
bindKey: {win: "Ctrl-S", "mac": "Cmd-S"},
exec: (editor) => {
this.handleFileUpdate();
}
})
``~
I'm trying to get to update my Electron app via auto-update. I managed to get it working fine whereas it checks for updates, downloads the update, installs the update and restarts the application.
But what I really want is that I can check if there's an update; if there is show the release notes that are in my latest.yml file and the user can agree or cancel the update. (See screenshot below)
I've tried checking for the releaseNote when I enter my update-available event, but the 2nd parameter is "undefined".
Along with that I can't really figure out how I can show a scrollable text dialog with a yes/no button structure either.
For now I've made a very crude messageBox to see if I can get the releaseNote from my yml file, with no luck. So, the newbie as I am when it comes to Electron and building/updating apps with it; I'm officially out of ideas.
This is how my update-available event looks now:
autoUpdater.on('update-available', (ev, info) => {
sendStatusToWindow('Update available.' + info)
dialog.showMessageBox({
type: 'info',
title: 'Found Updates',
message: info.releaseNotes,
buttons: ['Yes', 'No']
}, (buttonIndex) => {
if (buttonIndex === 0) {
autoUpdater.downloadUpdate()
}
})
})
And my update-downloaded event:
autoUpdater.on('update-downloaded', (ev, info) => {
sendStatusToWindow('Update downloaded: ' + info)
autoUpdater.quitAndInstall()
})
The electron-builder documentation is rather vague in regards to the object that is emitted in any of the autoUpdater instance events.
After quite some fiddling around, searching through the web, and reading documentation, I discovered that there should be only one parameter in the autoUpdater events:
autoUpdater.on('update-available', (updateInfo) => {
//Callback function
});
updateInfo is an arbitrary parameter name but the paramter is an object that contains the releaseNotes, releaseDate, and other information from the update. I am on electron-updater v4.0.6.
updateInfo then is an object with these values as its properties:
Source: electron.build/auto-update#module_electron-updater
I have a custom select menu (multiple) defined as follows:
<select name="DanceStyles" id="DanceStyles" multiple="multiple" data-native-menu="false">
Everything works fine except that I want to move the header's button icon over to the right AND display the Close text. (I have found some mobile users have a problem either realising what the X icon is for or they have trouble clicking it, so I want it on the right with the word 'Close' making too big to miss.) There don't seem to be any options for doing that on the select since its options apply to the select bar itself.
I have tried intercepting the create event and in there, finding the button anchor and adding a create handler for that, doing something like this (I have tried several variations, as you can see by the commenting out):
$('#search').live('pagecreate', function (event) {
$("#DanceStyles").selectmenu({
create: function (event, ui) {
$('ul#DanceStyles-menu').prev().find('a.ui-btn').button({
create: function (event, ui) {
var $btn = $(this);
$btn.attr('class', $btn.attr('class').replace('ui-btn-left', 'ui-btn-right'));
$btn.attr('class', $btn.attr('class').replace('ui-btn-icon-notext', 'ui-btn-icon-left'));
// $(this).button({ iconpos: 'right' });
// $btn.attr('class', $btn.attr('class').replace('ui-btn-icon-notext', 'ui-btn-icon-left'));
// // $btn.attr('data-iconpos', 'left');
$(this).button('refresh');
}
});
}
});
});
So I have tried resetting the button options and calling refresh (didn't work), and changing the CSS. Neither worked and I got weird formatting issues with the close icon having a line break.
Anyone know the right way to do this?
I got this to work cleanly after looking at the source code for the selectmenu plugin. It is not in fact using a button; the anchor tag is the source for the buttonMarkup plugin, which has already been created (natch) before the Create event fires.
This means that the markup has already been created. My first attempt (see my question) where I try to mangle the existing markup is too messy. It is cleaner and more reliable to remove the buttonMarkup and recreate it with my desired options. Note that the '#search' selector is the id of the JQ page-div, and '#DanceStyles' is the id of my native select element. I could see the latter being used for the id of the menu, which is why I select it first and navigate back up and down to the anchor; I couldn't see any other reliable way to get to the anchor.
$('#search').live('pagecreate', function (event) {
$("#DanceStyles").selectmenu({
create: function (event, ui) {
$('ul#DanceStyles-menu').prev().find('a.ui-btn')
.empty()
.text('Done')
.attr('class', 'ui-btn-right')
.attr("data-" + $.mobile.ns + "iconpos", '')
.attr("data-" + $.mobile.ns + "icon", '')
.attr("title", 'Done')
.buttonMarkup({ iconpos: 'left', icon: 'arrow-l' });
}
});
});
The buttonMarkup plugin uses the A element's text and class values when creating itself but the other data- attributes result from the previous buttonMarkup and have to be removed, as does the inner html that the buttonMarkup creates (child span, etc). The title attribute was not recreated, for some reason, so I set it myself.
PS If anyone knows of a better way to achieve this (buttonMarkup('remove')? for example), please let us know.
the way i achieved it was changing a bit of the jquery mobile code so that the close button always came to the right, without an icon and with the text, "Close"
not the best way i agree. but works..
I got a similar case, and I did some dirty hack about this :P
$("#DanceStyles-button").click(function() {
setTimeout(function(){
$("#DanceStyles-dialog a[role=button]").removeClass("ui-icon-delete").addClass("ui-icon-check");
$("#DanceStyles-dialog .ui-title").html("<span style='float:left;margin-left:25px' id='done'>Done</span>Dance Styles");
$("#DanceStyles-dialog .ui-title #done").click(function() {
$("#DanceStyles").selectmenu("close")
});
},1);
} );
When I use the Paste from Word or Paste as plain text options in CKEditor double line returns get converted into double instances of <br>.
Whilst this is technically exactly what exists in the source file it would be fantastic if there were a way to have all double line returns be converted into paragraph tags when pasting from an external document. TinyMCE doesn’t seem to struggle with this.
Is this possible with CKEditor?
I'm using Pixel & Tonic's Wygwam version of CKEditor and the inference of this support thread is that it can't be done as exists :(
Since I spent hours searching for the same thing and found lots of posts asking but none answering I decided to work it out on my own.
Here is the solution, hope it saves you the time I wasted:
In config.js add:
CKEDITOR.on('instanceReady', function (ev) {
ev.editor.on('paste', function (ev) {
ev.data.html = ev.data.html.replace(/<br>\s*<br>/g, '</p><p>');
});
});
What really really fixed this issue for me was:
Put this line in config.js:
"config.enterMode = CKEDITOR.ENTER_BR;"
This will create a "br" instead of a "p" when you hit ENTER in the ckeditor.
Then put this script where you replace the
CKEDITOR.replace( 'descripcion', { enterMode : CKEDITOR.ENTER_BR, shiftEnterMode : CKEDITOR.ENTER_BR } );
CKEDITOR.on( 'instanceReady', function( ev )
{
ev.editor.dataProcessor.writer.setRules( 'br',
{
indent : false,
breakBeforeOpen : false,
breakAfterOpen : false,
breakBeforeClose : false,
breakAfterClose : false
});
});
</script>
That script prevented the double "br"
Hope it helps.
Here is my work-around for this in CKEditor 4 (where ck is an editor instance):
ck.on('afterPaste', function() {
var data = ck.getData();
data = data.replace(/<br \/>\s*<br \/>/g, '</p><p>');
ck.setData(data);
});
$("div.square").droppable({
accept: '.white',
drop: function (event, ui)
{
$to = "#" + $(this).attr('id');
alert(to);
$.post(
"/Game/AddMove",
{
from: $from,
to: $to,
GameID: $("#gameID").val()
});
}
});
Well it's nor working. So I must ask, is it possible to call AJAX on droping some UI element ?
The problem is, it's not even calling an controller,
I'm going to guess that you want your to variable to be the id attr of the dropped element. I have no idea where you intended the value of $from to come from.
Just a side note - I would suggest not using variables starting with a $, especially not with jQuery.
Anyway, to access the object that dropped, do this:
drop: function(event, ui) {
toStr = '#' + $(ui.helper).attr('id');
}
in other words, ui.helper is the HTML object that was dropped onto your droppable.
Good luck.
Yes, you can trigger ajax calls on drop. (live example)
I see a couple of issues (details below):
$("div.square").droppable({
accept: '.white',
drop: function (event, ui)
{
$to = "#" + $(this).attr('id');// <== 1. Implicit Global?
alert(to); // <== 2. Syntax error
$.post(
"/Game/AddMove",
{
from: $from, // <== 3. Where does this come from?
to: $to,
GameID: $("#gameID").val()
});
}
});
You seem to be using $to without declaring it. (If it's declared in a containing scope you haven't shown, that's fine; otherwise, though, you're falling prey to the Horror of Implicit Globals. (That's probably not what's keeping it from working, though.)
The code should blow up here, unless to is defined somewhere. You don't have any variable called to.
You're using a variable $from that isn't defined in your quoted code. Fair 'nuff if it's defined in an enclosing scope, but if so, probably worth mentioning in the question.
If none of the above is it, just walk through the code. There are plenty of browser-based debuggers these days. If you use Firefox, install and use Firebug. If you use Chrome or Safari, they have Dev Tools built in (you may have to enable them in preferences). If you use IE, IE8 and up have a built-in debugger; for IE7 and earlier you can use the free version of VS.Net. For Opera, it has a built-in debugger called Dragonfly... In all of these, you can set a breakpoint on the first line of your drop handler and step through to see what's going wrong.