Ace editor "define is not defined" - javascript

I'm trying to add the ace editor to my app. I downloaded it from github, dropped the "ace/lib/ace" directory into my app's directory, included:
<script src="ace/lib/ace/ace.js" type="text/javascript" charset="utf-8"></script>"
in my body tag and:
editor = ace.edit "editor"
in my script tag. I've tried to load the page in Chrome and Firefox and I get "define is not defined" in ace.js:46. The line in ace.js is:
define(function(require, exports, module) {
Does anyone know why ace is expecting the define() function to exist and why it's not finding it? Here's my source:
<html>
<body>
<div id="editor">some text</div>
<script src="ace/lib/ace/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
</script>
</body>
</html>

I hacked it by putting window.define = ace.define; in my DOMload handler.

If you already have the source, then it is pretty easy to do still. Just go in the directory where you copied all the ace source.
Then, do:
npm install
node Makefile.dryice.js
See the wiki for additional details
https://github.com/ajaxorg/ace/wiki/Building-ace

You are getting this error because the RequireJS JavaScript library has not been included in your page.
To fix this either use an ace build or include RequireJS in your page.
If you choose to include RequireJS your html fragment will look something like this:
<!-- Editor will go here -->
<div id="editor"></div>
<!-- Load RequireJS -->
<script src="lib/requirejs/require.js"></script>
<!-- Initialize ace -->
<script>
// Tell RequireJS where ace is located
require.config({
paths: {
'ace': 'lib/ace'
}
});
// Load the ace module
require(['ace/ace'], function(ace) {
// Set up the editor
var editor = ace.edit('editor');
editor.setTheme('ace/theme/monokai');
editor.getSession().setMode('ace/mode/javascript');
// etc...
});
</script>

In React, if at all you are importing anything from ace-builds, your import order matters.
It should be like this
import AceEditor from 'react-ace';
import 'ace-builds/src-noconflict/mode-json';
Not like this
import 'ace-builds/src-noconflict/mode-json';
import AceEditor from 'react-ace';

Alternatively you can use a cdn
http://cdnjs.com/libraries/ace/
http://www.jsdelivr.com/#!ace
And replace
<script src="/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
With something like
<script src="http://cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js" type="text/javascript" charset="utf-8"></script>

Related

Misspelled Option - Ace Editor

I am trying to set the options for the editor in an external file outside of my HTML file. I have everything imported and I can change the options from within the HTML script but when I try in the external file I get the error misspelled option "enableLiveAutocompletion". I've attached some code snippets below:
main HTML file:
<script src="/editor/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="/editor/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
<script type="module" src="src/js/main.js"></script>
code.js file (imported through main as a module)
ace.require("ace/ext/language_tools");
this.session = ace.createEditSession("// Edit Session " + name);
this.session.setOptions({
enableLiveAutocompletion : true
})
If anyone could provide some insight that would be great.
I have tried creating the session in the HTML file and it works fine. Although when I try to do it externally I get that error.
enableLiveAutocompletion is an option for the editor, not session, set it when you call ace.edit

How to import or use external JS files and functions in my angular web application

I want to integration external code (html, js and css files) into my angular web application.
in this external code, the HTML files is just like this:
index.html
<html>
<header>
</header>
<body>
</body>
<script src="app/components/landing-page/js/bootstrap.min.js"></script>
<script src="app/components/landing-page/js/owl.carousel.min.js"></script>
<script src="app/components/landing-page/js/cbpAnimatedHeader.js"></script>
<script src="app/components/landing-page/js/theme-scripts.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="app/components/landing-page/js/ie10-viewport-bug-workaround.js"></script>
<script type="text/javascript" src="app/components/landing-page/js/imageComparisonSlider.js"></script>
<script>
/*Execute a function that will execute an image compare function for each element with the img-comp-overlay class:*/
initComparisons();
</script>
<html>
as you see, there are several javascript files, and a funciton initComparisons() will be called.
If I only double click index.html, everything works fine. But I copy this html code in one component.html, that was not working. I can not see any animation.
I have googled some solutions,
and I have change my angular.json file just like this:
"scripts": [
"src/app/components/landing-page/js/imageComparisonSlider.js",
"src/app/components/landing-page/js/owl.carousel.min.js",
"src/app/components/landing-page/js/cbpAnimatedHeader.js",
"src/app/components/landing-page/js/theme-scripts.js"
]
and also import all js files in index.html in my angular web application
<script src="app/components/landing-page/js/imageComparisonSlider.js"></script>
<script src="app/components/landing-page/js/owl.carousel.min.js"></script>
<script src="app/components/landing-page/js/theme-scripts.js"></script>
<script src="app/components/landing-page/js/cbpAnimatedHeader.js"></script>
and in the component.ts, I also do this:
import initComparisons from './js/imageComparisonSlider.js';
ngOnInit() {
this.isLoggedIn = this.authService.isLoggedIn;
initComparisons();
}
I added some code in stackblitz;
https://stackblitz.com/edit/angular-qowfwy?file=angular.json
but it was not working.
can somebody help me and give me some suggestion.
Best Regards,
Leo
If you want to use external js in your angular project you have to import in your angular.json in the "scripts": [] area that will be allow you to bring the js and make the build after without problem.
After putting the external scripts in angular.json (paths correct and everything), in component you should
declare const initComparisons;
// ...
ngOnInit() {
initComparisons();
}

CKEditor does not work in a custom folder

I have my root folder htdocs/_ and my custom CKEditor folder htdocs/_/ckeditor where all my CKEditor files are in. But when I run CKEditor it looks for all the CKEditor files in htdocs/_
<textarea name='post_editor' id='post_editor' rows='10' cols='80'></textarea>
<script type='text/javascript'>
CKEDITOR.replace('post_editor');
</script>
It works for me with the underscore in URL, so I don't know what may be wrong in your case. Did you e.g. changed the name of ckeditor.js file?
As a workaround, try setting CKEDITOR_BASEPATH. You can find more in the Specifying the Editor Path guide.
<script>
var CKEDITOR_BASEPATH = 'htdocs/_/ckeditor/';
</script>
<script src="htdocs/_/ckeditor/ckeditor.js"></script>

How to use aloha editor on the website

I want to use aloha editor on my website and i downloaded it from [http://aloha-editor.org/].Now i am totally confused because the downloaded bundle contain lots of files.
I pick up aloha.js and aloha.css and added the following script
$(document).ready(function () {
Aloha.ready(function () {
var $ = Aloha.jQuery;
$('.editable').aloha();
})
});
but its not working.Then i tried
<script src="http://cdn.aloha-editor.org/current/lib/aloha.js"
data-aloha-plugins="common/format,
common/list,
common/link,
common/highlighteditables">
</script>
<!-- load the Aloha Editor CSS styles -->
<link href="http://cdn.aloha-editor.org/current/css/aloha.css" type="text/css" />
<!-- make all elements with class="editable" editable with Aloha Editor -->
<script type="text/javascript">
Aloha.ready( function() {
var $ = Aloha.jQuery;
$('.editable').aloha();
});
</script>
It works fine. But i want to use my downloaded bundle, Can anyone tell me how can i manage all the files & folders (for ex- where i have to put image folder and other folder..) so it starts working?
Copy all the files in to the root directory which includes plugins,lib,img,css and refer above described guide.
See http://www.alohaeditor.org/guides/using_aloha.html.
Save the files in /javascripts in the root directory of your web server, such as where localhost is run.

tinyMCE with ExtJs, not defined error

I'm trying to implement a tinyMCE editor into an ExtJs environment. But it's not going well.
First things first: Include the necessary scripts.
<script src="js/jquery-1.2.1.min.js" type="text/javascript"></script>
<script src="ext-2.3.0/adapter/jquery/ext-jquery-adapter.js" type="text/javascript"></script>
<script src="ext-2.3.0/ext-all.js" type="text/javascript"></script>
<script src="js/miframe-min.js" type="text/javascript"></script>
<script src="js/Ext.ux.TinyMCE.js" type="text/javascript"></script>
(I have old versions of JQuery and Ext because I tried to copy the example/demo exactly).
Then I use some Javascript to define the window with tinyMCE in it, click on a button to initiate the popup window. When I try and see the result in firefox I get one error:
Error: tinymce is not defined
Source File: http://localhost:4927/ExtJS/js/Ext.ux.TinyMCE.js
Line: 301
Leading to this snippet:
/** ----------------------------------------------------------
WindowManager
*/
var WindowManager = Ext.extend(
function( editor ) {
WindowManager.superclass.constructor.call( this, editor );
},
tinymce.WindowManager, //THIS IS WHERE THE ERROR IS
{
// more code
What am I doing wrong?
This is the base code I grabbed from the official TinyMCE ext page. So the js file must be okay, indicating I made a mistake elsewhere.
Yarr. Should include the actual plugin as well.
<script src="js/tiny_mce_src.js" type="text/javascript"></script>
Done.

Categories