I am Implementing ace into my site for the first time and I have some noob questions. I have only been programming for about a year so bear with me.
I have downloaded the code from https://github.com/ajaxorg/ace. I am assuming (could be wrong) the code I need lies in /lib/ace/ so I copied the ace folder to my /lib/js/ in my dev environment. I imported the ace.js per the instructions on the github wiki.
<script type="text/javascript" src="lib/js/ace/ace.js" charset="utf-8"></script>
I have my HTML code also:
<script>
window.onload = function() {
var editor = ace.edit("editor");
editor.setTheme("ace/theme/twilight");
var JavaScriptMode = require("ace/mode/javascript").Mode;
editor.getSession().setMode(new JavaScriptMode())
};
</script>
<div id="editor"></div>
CSS:
#editor {
width: 800px;
height: 690px;
}
Firebug tells me ace is not defined where I am declaring my variable "editor" and also gives me this output:
missing variable name
const function (require, exports, module) {
that is from the ace.js. So I am missing something with getting this basic Implementation working.
You downloaded the source which requires require.js.
You should download one of the builds from https://github.com/ajaxorg/ace-builds
to get started without additional requirements.
You must position your editor-div, either use "position:relative;" or "position:absolute;" in your css too.
Have you tried removing the window.load action?
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/twilight");
</script>
<div id="editor"></div>
It's described on their official website completely clear.
Just clone ace-builds github repository
and then create html file as described on ace official website.
HTML file should load this js script /ace-builds/src-noconflict/ace.js
Related
I am trying to get syntax highlighting working but when changing the mode it doesn't work
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/monokai.js"></script>
<script="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/mode-javascript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/ace.js"></script>
<script src="scripts.js"></script>
scripts.js
var html = ace.edit("htmlEditor");
var css = ace.edit("cssEditor");
var js = ace.edit("jsEditor");
html.setTheme("ace/theme/monokai");
css.setTheme("ace/theme/monokai");
js.setTheme("ace/theme/monokai");
var JavaScriptMode = ace.require("ace/mode/javascript").Mode;
js.session.setMode(new JavaScriptMode());
You have a typo in your html <script=" also scripts for theme and modes must be inserted after ace.js
It is better to pass names to ace and let it load modes and themes by itself
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/ace.js"></script>
<div id="htmlEditor"><html></div>
<div id="cssEditor">.css { color: red }</div>
<div id="jsEditor">var js</div>
<style>
html, body {
height: 100%;
}
#htmlEditor, #cssEditor, #jsEditor {
height:30%
}
</style>
<script>
var html = ace.edit("htmlEditor");
var css = ace.edit("cssEditor");
var js = ace.edit("jsEditor");
html.setTheme("ace/theme/monokai");
css.setTheme("ace/theme/monokai");
js.setTheme("ace/theme/monokai");
html.session.setMode("ace/mode/html");
css.session.setMode("ace/mode/css");
js.session.setMode("ace/mode/javascript");
</script>
what let me to this question is that I got 404 error when I call setMode
I traversed the code to see whats going on, Ace tries to identify where Ace library and its files are located, and it does that by looking at the script tags within the page, so if it had a lock finding the lib location, it set it as a basePath for it,
but what if Ace is bundled within a one minified main js file main.js it will fail and return 404
to solve this
if (window.ace) {
configureAce();
//....
}
function configureAce() {
// this is important in case of bundling , to have Ace knows where
// its files are located (like themes, workers and modes)
// and get them from that path
window.ace.config.set("basePath", "/resources/js/lib/ace");
}
Trying to get gist-embed (https://github.com/blairvanderhoof/gist-embed) working within my Angular app but with no luck.
It works no problem on my homepage (which is not part of the Angular app) but when I use something like:
<code data-gist-id="<gist-id>"></code>
within the app it won't show. There are no messages in the console to explain why though.
Could someone explain why and offer a solution?
(function($) {
$(function() {
// find all elements containing "data-gist-id" attribute.
$('[data-gist-id]').each(function() {
var $elem = $(this),
id,
that lib is coded in such a way one cant really use it in angular,you'll have to look for a fork that offers a proper jquery plugin architecture you can use into a directive.That lib doesnt respect basic jQuery plugin architecture.
And no Error will show up because it's likely the .each will execute before your angular app runs.
As of June (version 1.8), the gist-embed project is now a jQuery plugin.
var $code = $('<code data-gist-id="474f6d7839fccffc4b2a"/>');
$code.appendTo('body').gist();
Basically you have to trigger "gist()" on the dom elements.
Try this, it worked for me very well.
// register trigger gist on every template include
$rootScope.$on('$includeContentLoaded', function() {
// initialize gist on new elements
angular.element(document).ready(function() {
if (typeof(angular.element(document).gist) === 'function') {
angular.element('[data-gist-id]').gist();
}
});
});
I put together a small library hoping to solve the problem.
Check it out : https://github.com/pasupulaphani/angular-gist-embed
Chekout this angular module : https://github.com/kiran3807/another-angular-gist-embed
This allows you to include the gists in your angular project in the form of a directive, one of the attributes for which is the gist-id :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="path/to/another-angular-gist-embed.js"></script>
<script>
angular.module('example',['another-angular-gist-embed']);
angular.module.controller('exampleCtrl',['$scope',function($scope){
$scope.gistId = 'a85770344febb8e30935';
}]);
</script>
</head>
</head>
<body ng-app="example">
<div ng-controller="exampleCtrl">
<!-- This loads a gist with a specific id-->
<gist-embed data-gist-id="gistId"></gist-embed>
</div>
</body>
</html>
Declaration : I am the author of this module
I am developing a Web-Application using ASP.NET MVC 4 and I am trying to use CKEditor for some content editing.
In debug everything works fine as long as no bundeling or minification is happening, but as soon as this does CKEditor generates wrong URLs even if I have set baseHref:
CKEDITOR.replace('ckeditor',
{
autoUpdateElement: true,
baseHref: '#Url.Content("~/Scripts/ckeditor/")',
filebrowserImageUploadUrl: '/Uploads/Upload'
});
In debug the following is included:
<script src="/Scripts/ckeditor/ckeditor.js"></script>
And after bundeling/minifaction it is just:
<script src="/bundles/ckeditor?v=dLE-_JqB4vxXJ9idGep_8yUL8KfOwGhfYoEZAeIudoE1"></script>
and it trys to load the following JS files:
http://DOMAIN.net/CONTROLLER/ACTION/config.js?t=D26D
Which is wrong as it should be:
http://DOMAIN.net/Scripts/ckeditor/config.js?t=D26D
Does anyone know what I am doing wrong or how to fix this?
Alternatively I would also be fine with a possibility to disable bundeling/minification for that one bundle to avoid that problem.
Try to add the following content before include the ckeditor's js file:
<script type="text/javascript">
var CKEDITOR_BASEPATH = '#Url.Content("~/Scripts/ckeditor/")';
</script>
More information: http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Specifying_the_Editor_Path
And it will also work with ckeditor 4.x.
I had similar problem but found this to work. Include it in the cshtml layout file.
<script>
CKEDITOR.basePath = "#Url.Content("~/lib/ckeditor/")";
</script>
or with JQuery
$(document).ready(function() {
CKEDITOR.basePath = "#Url.Content("~/lib/ckeditor/")";
});
I found that a similar approach to #bluee worked for me:
I put the following in my cshtml layout file:
<script type="text/javascript">CKEDITOR_BASEPATH = "#Url.Content("~/Scripts/ckeditor/")";</script>
#Scripts.Render("~/Scripts/ckeditor/ckeditor.js")
The subtle difference being using CKEDITOR_BASEPATH rather than CKEDITOR.basePath. This resolves the 'CKEDITOR is not defined' issue.
I met the same problem. In fact, the bundle system trouble the ckeditor loading. So you can avoid it doing the following :
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/Script/CKEditor/ckeditor.js")
#Scripts.Render("~/Script/CKEditor/adapters/jquery.js")
Is there any way to load some text from another file into javascript, without server side code?
I was thinking to use another element to hold the text inside some comments, but I don't know how to read it's source code with javascript.
Something like:
<script src="myfile.js"></script>
<script> function readMyText() { ... }</script>
In myfile.js:
/* some text */
You can put anything you want into a script tag if you give it a "type" that's not something the browser understands as meaning "JavaScript":
<script id='Turtle' type='text/poem'>
Turtle, turtle, on the ground;
Pink and shiny - turn around.
</script>
You can get the contents via the "innerHTML" property:
var poemScript = document.getElementById('Turtle');
var poem = poemScript.innerHTML;
Here is a jsfiddle to demonstrate.
That trick is popular lately with people doing client-side page building via templates.
Without using ajax or any server code... sorry mate but you can't :(
Building on Pointy's answer, to import from local files do this:
<script src="foo.txt" id="text" type="text">
</script>
You could also use this to target an external file:
<script src="http://foo.txt"></script>
I am working on ASP.NET 3.5, c#, visual studio 2010. I have made a master file and a default page that uses this master file. I have placed a couple asp:contentplaceholders in the master and corresponding code in the page that uses this master. I have also inserted JavaScript like this in the content page (and not the master):
<asp:Content ID="Content6" ContentPlaceHolderID="Mainpage" Runat="Server">
<script src="path1" type="text/javascript"></script>
<script src="path2" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var options = {
//some java code
};
$(".mycssclass").effect(options);
});
</script>
</asp:Content>
On running the website I get the following runtime error in visual studio:
Microsoft JScript runtime error: 'this.node' is null or not an object
and it point to some function inside the JavaScript like
this.node.onload=function(){..............//I am not a java guy so do not know much about this
Where am I going wrong? Why does the site compile correctly but throw this runtime error?
I also tried inserting this java code inside the master file in the <head>, but same error. This is urgent please so if someone experienced can pinpoint where exactly to put the code that would be solve my problem quickly.
Have you included a reference to the jQuery library? A good practice would be to have the jQuery include in the Master.
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<!-- the remainder of your .js references should follow-->
</head>
If it's your intention to have that script run on 'page load', then ensure you have it set correctly:
$(document).ready(function() {
// put all your jQuery goodness in here.
});
More info on jQuery document ready.
I'm not sure exactly what it is you are doing with that snippet of code, but I don't think it is the proper syntax.
You probably should re-write it to look like this:
$(document).ready(
function () {
var options = {
//some java code
};
$(".mycssclass").effect(options);
});
Just passing in the function to the jQuery selector will probably get some wonkiness.
Thank you everyone! there was no problem with either the syntax in the javascript or the location/page where it was first included by me. I just figured out that the mistake was somewhere else. This javascript works on an <img> tag. It zooms the image insdie the <img> tag. I was using the <asp:ImageButton> instead og <img>. It works perfect as soon as I replaced it. Thank you all for your time and the knowledge sharing.