I want to use the Aloha-Editor for one of my projects. The default project language is german, but I can't find any way to change the language of the editor. (Searched the web and the Guides of their website.)
The only thing I found is how to use i18n when developing a plugin for the editor but not how to set the language in the current stable version.
This is what I did:
<!-- load the jQuery and require.js libraries -->
<script type="text/javascript" src="http://cdn.aloha-editor.org/latest/lib/require.js"></script>
<script type="text/javascript" src="http://cdn.aloha-editor.org/latest/lib/vendor/jquery-1.7.2.js"></script>
<!-- load the Aloha Editor core and some plugins -->
<script src="http://cdn.aloha-editor.org/latest/lib/aloha.js"
data-aloha-plugins="common/ui,
common/format,
common/list,
common/link,
common/highlighteditables">
</script>
<!-- load the Aloha Editor CSS styles -->
<link href="http://cdn.aloha-editor.org/latest/css/aloha.css" rel="stylesheet" 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>
Does anyone know what I need to add or change to get the editor in an other language?
At first I found something in the Aloha Guide about Localization but doing this didn't work for me.
Than I had a look at the demo pages and came to this working solution. I had to add the following javascript before I include require.js and aloha.js
<script language="javascript">
Aloha = window.Aloha || {};
Aloha.settings = {
locale: 'de'
};
</script>
Then the Aloha script automatically loads the i18n files for the chosen language. I used a local version of aloha and did not test it with the version from http://cdn.aloha-editor.org/latest. My version was 0.22.7.
you can download other languages here there is more information available in the help file
You can change the master language at any time in your project via Admin->Languages.
hope this helps
Rachel
Related
I am New to Web Programming ....
I have a Problem With including Libraries , I Using Summer note (/*! Summernote v0.7.3 ) For Add Notes And I Using Data Tables And Bootstrap 4.5
<script src="template/assets/js/datatables.js"></script>
When After Add Above Connection Code
! Summernote Change To Like This
enter image description here
I Changed Up And Down Of Rules and Lines Of Code Libraries Links
But does Not Changes Anything
Like This
!! up
<script src="template/assets/js/datatables.js"></script>
<script src="template/assets/plugins/summernote/summernote.min.js" type="text/javascript"></script>
!! Down
<script src="template/assets/plugins/summernote/summernote.min.js" type="text/javascript"></script>
<script src="template/assets/js/datatables.js"></script>
After Removed the Data tables Link Summernote Work Correctly
enter image description here
How I Run this 2 Codes Links Without Crashing Like this
In the chain of this SO thread, I am extending the question. If I have two files say jquery.ui 1.8.12 and jquery.ui 1.10.3. If I use some ui functionality like datepicker,tooltip,throws me error for the older version of jquery (I want older version because one of my js plugin uses this) file How to handle this situation. how to link particular file for particular function call.
Yes you can do it:
By using jQuery.noConflict() to load multiple versions of jQuery is actually pretty simple.
Example from the blog(The blog is bit old but worth reading).
<!-- load jQuery 1.1.3 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.1.3.js"></script>
<script type="text/javascript" src="jquery.dimensions.min.js"></script>
<!-- revert global jQuery and $ variables and store jQuery in a new variable -->
<script type="text/javascript">
var jQuery_1_1_3 = $.noConflict(true);
</script>
<!-- load jQuery 1.3.2 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.3.2.js"></script>
<!-- revert global jQuery and $ variables and store jQuery in a new variable -->
<script type="text/javascript">
var jQuery_1_3_2 = $.noConflict(true);
</script>
So now you can use refer to your required version by using their references.
Demo of Different plugin usega
http://blog.nemikor.com/2009/10/03/using-multiple-versions-of-jquery/
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>
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.
I have a group of CSS imports as like:
<link rel="stylesheet" href="/css/reset.css"/>
<link rel="stylesheet" href="/css/visualize.css"/>
<link rel="stylesheet" href="/css/datatables.css"/>
and some JavaScript code imports as like:
<script src="/js/excanvas.js"></script>
<script src="/js/jquery.js"></script>
<script src="/js/jquery.livesearch.js"></script>
<script src="/js/jquery.visualize.js"></script>
Is it possible to put all CSS import lines into a file i.e. cssImports.css and put all JS import lines into a file i.e. jsImports.js. So when I want to import that CSS and JS group files I will write something like:
<link rel="stylesheet" href="/css/cssImports.css"/>
<script src="/js/jsImports.js"></script>
so all the files listed above will be imported?
PS: I don't want to write any code belongs to web server specific.
Javascript imports: no.
CSS import: yes, but you shouldn't because it breaks parallel downloading of stylesheets.
Your best bet is to use a local build script (such as the Ant script included with the HTML5 Boilerplate) to concatenate your stylesheets and scripts before uploading them to the server, then linking to the 'master' resources in your HTML:
<link rel="stylesheet" href="/css/master.css">
<script src="/js/master.js"></script>
There is a tutorial on using the Ant script.
Go with LazyLoad! https://github.com/rgrove/lazyload/
It's a very small js (less than 1kb) that takes care of resource loading for you.
Download the package and save on your js folder. Then you would probably want to do this:
<script src="js/lazyload-min.js"></script>
Then for javascript files:
<script>
LazyLoad.js(["/js/excanvas.js", "/js/jquery.js", "/js/jquery.livesearch.js", "/js/jquery.visualize.js"], function () {
alert('all js files have been loaded');
});
</script>
Css:
<script>
LazyLoad.css(["/css/reset.css", "/css/visualize.css", "/css/datatables.css"], function () {
alert('all css files have been loaded');
});
</script>
This will also boost the performance of your page, enabling parallel css and js loading (the latter on firefox opera only).
You can Import CSS like this:
Create a new CSS cssImports.css and add there lines
#import url('/css/reset.css');
#import url('/css/visualize.css');
#import url('/css/datatables.css');
and relate it in your homepage as:
<link rel="stylesheet" href="/css/cssImports.css"/>
For Javascript import doesn't work. But you can create a single JS file and include the javascript code of each file after one another. But this is not recommended. It is better to have separate <script> tag for each js file.
for css:
<style>
#import url('/css/styles.css');
</style>
for js you could try something like
document.write("<script type='text/javascript' src='otherScript.js'></script>");
but i dont see a reason to do either of theese...
Yes just copy all the code and place in into a new file in the order than you would like it to run.
I know there are some javascript libraries that can do this for you but I dont have an experience of using them. I think Yahoo compiler/ YUI has one.
I'm not recommend do that because performance issue, but if you want the way, you can do that:
For CSS yes its possible, in cssImports.css you can put:
#import url(/css/reset.css);
#import url(/css/visualize.css);
#import url(/css/datatables.css);
But for JS, I think no way as much as CSS, but you can do this (adding JS files) from one JS file (ex jsImports.js), by write code create script element and add this element to page, like that :
var jsE = document.createElement('script');
var url = 'JS LINK HERE';
jsE.setAttribute('type', 'text/javascript');
jsE.setAttribute('src', url);
document.getElementsByTagName('head').item(0).appendChild(jsE);
Do this for each link of JS that you want to put, I have and idea, using Arracy contains JS links like this:
var jsLinks = new Array(
"/js/excanvas.js",
"/js/jquery.js",
"/js/jquery.livesearch.js",
"/js/jquery.visualize.js"
);
then a loop read a link each time and put this, like :
for (i = 0; i < jsLinks.length; i++)
{
var jsE = document.createElement('script');
var url = jsLinks[i];
jsE.setAttribute('type', 'text/javascript');
jsE.setAttribute('src', url);
document.getElementsByTagName('head').item(0).appendChild(jsE);
}
I didn't test my code, But I hope my idea is explained well.
Best
Edit 1: yes you can use Gatekeeper solution for JS (Very Simple), but it use "write" but "for me" I don't like that way :)
This is now possible as follows with HTML Imports which are in W3C draft
<link rel="import" href="import.html">
import.html
<link rel="stylesheet" href="/css/reset.css"/>
<link rel="stylesheet" href="/css/visualize.css"/>
<link rel="stylesheet" href="/css/datatables.css"/>
<script src="/js/excanvas.js"></script>
<script src="/js/jquery.js"></script>
<script src="/js/jquery.livesearch.js"></script>
<script src="/js/jquery.visualize.js"></script>
At this time only Chrome, Android and Opera support HTML Imports natively, but WebComponents provides a very mature polyfill script called webcomponents-lite.js to support all modern browsers