Autocompletion in ACE editor - javascript

I've found simmilar question: Ace Editor autocomplete and multiple languages
But the responses were that autocompletion is not supported by ACE, and according to Google group for Ace Editor "It is on my wishlish for Ace and we definitively need it
for Cloud9".
This post is one year old and as you can see, the cloud9 supports autocompletion now:
https://c9.io/site/features/
So is autocompletion available in Ace Editor by default? I cannot find any information about it.

Autocomplete is now an official part of the API. Enabling it takes 3 lines of code:
ace.require("ace/ext/language_tools");
var editor = ace.edit("editor");
editor.setOptions({
enableBasicAutocompletion: true
});
Depending on your setup with require-js, you may also need to include an additional javascript file in the html for your page:
<script src="ace/ext-language_tools.js"></script>
You can find a demo at https://github.com/ajaxorg/ace/blob/master/demo/autocompletion.html
And here's the wiki page I just wrote on the topic:
https://github.com/ajaxorg/ace/wiki/How-to-enable-Autocomplete-in-the-Ace-editor

Since Autocomplete is now a part of the ACE api:
1) Include ace.js at the top of your html:
<script type="text/javascript" src="js/ace.js"></script>
2) Also include your mode (language type):
<script type="text/javascript" src="js/mode-yaml.js"></script>
3) Also include your theme:
<script type="text/javascript" src="js/theme-monokai.js"></script>
4) Also include ex-language_tools.js:
<script src="js/ext-language_tools.js"></script>
5) Add your div with id editor (this will become your IDE):
<div id="editor"></div>
6) Include the following script (see my comments to understand them) :
<script>
var langTools = ace.require("ace/ext/language_tools");
Line below transforms your div with id="editor" into the editor
var editor = ace.edit("editor");
Line below sets the color theme. Other themes available here...try them here
editor.setTheme("ace/theme/monokai");
Line below sets the mode based on programming language...other modes here:
editor.getSession().setMode("ace/mode/yaml");
editor.setShowPrintMargin(false);
Lines below turns ON autocompletion in real-time.
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: false
});
Thus, the whole thing could be broken down into the following:
<!DOCTYPE html>
<html>
<head>
<title>IDE AUTOCOMPLETE</title>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.min.css">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/ace.js"></script>
<script type="text/javascript" src="js/mode-yaml.js"></script>
<script type="text/javascript" src="js/theme-monokai.js"></script>
<script src="js/ext-language_tools.js"></script>
</head>
<body>
<!-- EDITOR SECTION BELOW! -->
<div id="editor"></div>
<script>
var langTools = ace.require("ace/ext/language_tools");
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/yaml");
editor.setShowPrintMargin(false);
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: false
});
</script>
<!-- EDITOR SECTION ABOVE -->
</body>
</html>

Autocompletion is still not available natively for Ace, however we have implemented a component doing that for the Codiad IDE which is based on Ace and fully open source.
You can check the code on Github, it will surely help you to write your own.

Note, to implement custom completion logic, you can pass a completion provider object in enableBasicAutocompletion.
See jsfiddle
<!-- integrity removed for example sake -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ext-language_tools.js"></script>
<script>
const editor = ace.edit('some-ace-editor-holder-div-id');
editor.setOptions({
enableBasicAutocompletion: [{
getCompletions: (editor, session, pos, prefix, callback) => {
// note, won't fire if caret is at a word that does not have these letters
callback(null, [
{value: 'hello', score: 1, meta: 'some comment'},
{value: 'world', score: 2, meta: 'some other comment'},
]);
},
}],
// to make popup appear automatically, without explicit _ctrl+space_
enableLiveAutocompletion: true,
});
</script>
Info source
See also this and this answers

Make sure to have following imports
require('ace/ext/language_tools');
Use under snippet as required
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});

AjaxOrg has pushed a commit in their Cloud9 repository with the following message:
Code completion plug-in
I assume that this would be the answer to this question.
Here is the commit.
Also, I think that this is a good project that can help us.
For more information, we can follow the message from this issue opened in Cloud9 repository.

Currently it's not available in any form. According to this issue:
https://github.com/ajaxorg/ace/issues/1031
Autocomplete is only available in Cloud9 IDE (which is based on ACE) and may be available later as a separate plugin for ACE Editor.

add this in your mounted:
this.aceEditor.setOptions({
enableSnippets: true,
enableLiveAutocompletion: true,
enableBasicAutocompletion: true
})

Related

Can someone give me a step by step tutorial?

I started to use codeMirror... But i don't really understand the manual and don't find a good tutorial on the internet. At the moment, i managed to get this:
var codeHtml = $(".codemirror-html") [0];
var editor = CodeMirror.fromTextArea(codeHtml, {
mode: "htmlmixed",
lineNumbers: true
});
It does basically works, there are linenumbers and a textarea :D, but the mode doesnt' works. It's just raw black text in the textarea.
I think I importet the needed Files:
<script src="cm/lib/codemirror.js"></script>
<link rel="stylesheet" href="cm/lib/codemirror.css">
<script src="cm/mode/javascript/javascript.js"></script>
<script src="cm/mode/htmlmixed/htmlmixed.js"></script>
I don't know what I am doing wrong.. I alsow tried to add a theme, didn't worked as well.
Please, can someone show me how to do it?
The htmlmixed mode depends on the xml and css modes as well, so you'll have to add script tags for those.

CKEditor removing <html> and <body> tags

I using CKEditor, and if I click the Source button and paste HTML code like below :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" />
</head>
<body>
<p>test</p>
</body>
</html>
and click to Source again and then submit the form, the html , head and , body tags are removed and just stays <p>test</p>!
CKEditor configuration:
CKEDITOR.replace('content', {
extraPlugins: 'font,panelbutton,colorbutton,colordialog,justify,indentblock,aparat,buyLink',
autoGrow_onStartup: true,
enterMode: CKEDITOR.ENTER_BR,
FullPage : false,
allowedContent : true,
ProtectedTags : 'html|head|body'
});
Can you help me?
If you want to edit an entire HTML page, with <html>, <head> and <body> elements, you need to set the config.fullPage option to true:
CKEDITOR.replace( 'content', {
fullPage: true,
extraPlugins: 'font,panelbutton,colorbutton,colordialog,justify,indentblock,aparat,buyLink',
// You may want to disable content filtering because if you use full page mode, you probably
// want to freely enter any HTML content in source mode without any limitations.
allowedContent: true,
autoGrow_onStartup: true,
enterMode: CKEDITOR.ENTER_BR
} );
Pay attention to using proper case (fullPage is not FullPage) in your configuration. See also the following resources for more information:
Editing Complete HTML Pages sample
Full Page Editing with Document Properties Plugin
If you want to use the config.autoGrow_onStartup option, you need to include the Auto Grow plugin in your setup.
Last but not least, changing the Enter Mode setting to BR or DIV is not recommended. The default CKEDITOR.ENTER_P mode is fully supported by all editor features and plugins and is also the most correct one in terms of best practices for creating web content.
If you do it to control paragraph spacing, you should use stylesheets instead. Edit the contents.css file and set up a suitable margin value for <p> elements, for example:
p { margin: 0; }
Just add this code to prevent editor to remove 'HEAD/BODY/HTML' tags from your source code:-
CKEDITOR.replace( 'editor1', {
fullPage: true,
allowedContent: true,
autoGrow_onStartup: true,
enterMode: CKEDITOR.ENTER_BR
});

Tinymce emoticon bug, adding a slash

Iam using a Tinymce setup that only uses emoticons for a small reply section on my website.
The js plugin itself works fine and is visible within the editor but when it save to the database it shows it as:
<img src=\"/subdir/includes/tinymce/plugins/emoticons/img/smiley-kiss.gif\" alt=\"kiss\" />
The \ is nowhere to be found in my code, it starts and ends with it. Strangely is also does this with the alt of the image. These are the tinymce settings iam using:
<script type="text/javascript" src="includes/tinymce/tinymce.js"></script>
<script type="text/javascript">
tinymce.init({
selector: "textarea",
theme: "modern",
plugins: ["emoticons"],
toolbar1: "emoticons",
menubar : false,
height : 100,
forced_root_block : false,
relative_urls : false,
});
</script>
Does anyone have a clue where this might go wrong? I've searched for the backward slash in the plugin files of emoticons but cannot find anything related to this.
For those who have the same issue, this has todo with prepared statements, normal inserts using mysqli give no such errors. before you enter the textarea data from ckeditor into the database using prepared statements you should use striplashes!

Issue with cursor position in Firefox

I am using tinyMCE as a plugin in my ASP.NET MVC4 web application. I am also using SignalR to establish an open connection between the server and the clients. What I am trying to do is a real-time editor similar to Google Docs.
Until now I managed to find a way to write in an editor in one browser and have it displayed in another open document in another browser. I previously had a problem with the cursor position since when I was using the setContent() method in tinyMCE, the cursor was being put to the front and therefore the output was reversed.
This was solved by these two statements:
ed.selection.select(ed.getBody(), true);
ed.selection.collapse(false);
However now the problem I have is that with Chrome the output is as I wish for it to be i.e. writing with the cursor at the back however when I write from a Firefox browser, the space button is ignored, when I press space, the cursor goes back.
Is there a particular reason why this happened? Also, there seems to be a speed issue with the connection i.e when I type fast the latest content (1 or 2 letters) are not submitted.
This is all the code I have regarding this problem:
#{
ViewBag.Title = "- Editor";
ViewBag.ContentStyle = "/Content/CSS/editor.css";
}
<script src="/Scripts/jquery-1.6.4.min.js" ></script>
<script src="/Scripts/jquery.signalR-1.0.0.js"></script>
<script src="/signalr/hubs"></script>
<script type="text/javascript" src="~/Content/tinyMCE/tiny_mce.js" ></script>
<script type="text/javascript" src="~/Scripts/EditorHandler.js"></script>
<script type="text/javascript">
$(function () {
tinyMCE.init({
mode: "textareas",
theme: "advanced",
plugins: "emotions,spellchecker,advhr,insertdatetime,preview",
// Theme options - button# indicated the row# only
theme_advanced_buttons1: "newdocument,|,bold,italic,underline,|,justifyleft,justifycenter,justifyright,fontselect,fontsizeselect,formatselect",
theme_advanced_buttons2: "cut,copy,paste,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,image,|,code,preview,|,forecolor,backcolor",
theme_advanced_buttons3: "insertdate,inserttime,|,spellchecker,advhr,,removeformat,|,sub,sup,|,charmap,emotions",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: false,
setup: function (ed) {
ed.onKeyUp.add(function (ed, e) {
var chat = $.connection.editorHub;
chat.client.broadcastMessage = function (message) {
tinyMCE.activeEditor.setContent(message);
ed.selection.select(ed.getBody(), true);
ed.selection.collapse(false);
tinyMCE.activeEditor.focus();
};
$.connection.hub.start().done(function () {
var text = tinyMCE.activeEditor.getContent();
chat.server.send(text);
});
});
}
});
});
</script>
<form method="post" action="somepage">
<textarea id="editor" name="content" cols="100" rows="30"></textarea>
</form>
Looks like you might want to check out the possibility to get a tinymce bookmark.
There are html bookmarks which are implemented using hidden spans with a certain class.
And there are non-html bookmarks - i would use those.
// gets you a non-html bookmark which you can transfer to another server if need be
var bookmark = editor.selection.getBookmark(2, true);
editor.setContent(content);
editor.selection.moveToBookmark(bookmark);

title bar is missing in YUI

I'm using the YUI Rich Text editor on my site. I'm loading it using the load javascript from Google. When I try to create a link (or any other action that creates an "settings" box, the title bar is missing, see picture here. You can see how it supposed to look over here at Yahoos site for YUI.
I'm using this code in the <head>-tag:
<!--Include YUI Loader: -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/yui/2.7.0/build/yuiloader/yuiloader-min.js"></script>
<!--Use YUI Loader to bring in your other dependencies: -->
<script type="text/javascript">
// Instantiate and configure YUI Loader:
(function() {
var loader = new YAHOO.util.YUILoader({
base: "http://ajax.googleapis.com/ajax/libs/yui/2.7.0/build/",
require: ["editor"],
loadOptional: true,
combine: false,
filter: "MIN",
allowRollup: true,
onSuccess: function() {
var Editor = new YAHOO.widget.Editor('content', {
height: '300px',
width: '802px',
dompath: true, //Turns on the bar at the bottom
animate: true //Animates the opening, closing and moving of Editor windows
});
Editor.render();
}
});
// Load the files using the insert() method.
loader.insert();
})();
</script>
And in my webpage:
<div class="sIFR-ignore yui-skin-sam">
<textarea name="content" id="content" cols="50" rows="10">
</textarea>
</div>
I got some help from David Glass, one of the developers of YUI RTE. The error I had make was actually an CSS thing, some where in my CSS-files it was a line that read "h3 {visibility: hidden;}" which made this error. Any how, thanks for your help!
Try forcing your own title for the editor:
var Editor = new YAHOO.widget.Editor('content', {
height: '300px',
width: '802px',
dompath: true, //Turns on the bar at the bottom
animate: true //Animates the opening, closing and moving of Editor windows
});
Editor._defaultToolbar.titlebar="<b>Use my title</b>";
Editor.render();
I might be wrong here but, due to SOP (Same Origin Policy) I don't think JavaScript hosted in Google will be able to modify the DOM (unless you are google).
Try placing JavaScript in your web server and linking from there:
<script type="text/javascript" src="http://your.web.server.com/yui/2.7.0/build/yuiloader/yuiloader-min.js"></script>

Categories

Resources