All geek questions in one place

Aloha interface does not display correctly (screenshot)

I followed instructions on how to “install” the aloha editor, as described at aloha-editor.org.

Aloha Editor is loaded (as you can see in the photo), but not correctly

You can see the photo here:

enter image description here

this is some javascript i used:

<head> <script type="text/javascript" src="lib/js/jquery-1.7.1.min.js"></script> <script src="aloha/lib/aloha.js" data-aloha-plugins="common/format,common/list" > </script> <script type="text/javascript"> Aloha.ready( function() { Aloha.jQuery('#content').aloha(); }); </script> </head>
+4
source share
2 answers

I had a similar problem - just need to download the css file to which they refer, and run it locally. Running it with code can be a mistake. If you already do this, double check the path to the css file.

 <link href="aloha.css" rel="stylesheet" type="text/css"> (local seems to help)

other includes config

 <script src="http://cdn.aloha-editor.org/current/lib/aloha.js" data-aloha-plugins="common/format, common/list, common/link, common/highlighteditables"> </script>

... and start on the page

 <script type="text/javascript"> Aloha.ready( function() { var $ = Aloha.jQuery; $('.editable').aloha(); }); </script>

and finally, all elements with class = 'editable' are editable

 <p class="editable">Click to edit this paragraph.</p>

I think that in the aloha editor there may be problems with z-index ... or maybe they are working on some errors ... here is a good place to search for answers.

http://aloha-editor.org/builds/development/latest/doc/guides/output/

If it does not work, consider CKEditor or similar? It is worth doing what I use most often.

0
source

There was the same problem even after adding the css link. Ended the transition to your demo page and copying their source to initialize aloha to make it work.

 <link href="/Scripts/aloha/css/aloha.css" type="text/css" rel="stylesheet" /> <script> var Aloha = window.Aloha || (window.Aloha = {}); Aloha.settings = { locale: 'en', plugins: { format: { config: ['b', 'i', 'p', 'sub', 'sup', 'del', 'title', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'removeFormat'], editables: { // no formatting allowed for title '#title': [] } }, link: { editables: { // No links in the title. '#title': [] } }, list: { editables: { // No lists in the title. '#title': [] } }, image: { 'fixedAspectRatio': true, 'maxWidth': 1024, 'minWidth': 10, 'maxHeight': 786, 'minHeight': 10, 'globalselector': '.global', 'ui': { 'oneTab': false }, editables: { // No images in the title. '#title': [] } } }, sidebar: { disabled: true } }; </script> <script type="text/javascript" src="/Scripts/aloha/lib/aloha.js" data-aloha-plugins="common/format, common/table, common/list, common/link, common/highlighteditables, common/block, common/undo, common/contenthandler, common/paste, common/commands, common/abbr, extra/browser, extra/linkbrowser"></script> <!-- turn an element into editable Aloha continuous text --> <script type="text/javascript"> Aloha.ready(function () { Aloha.require(['aloha', 'aloha/jquery'], function (Aloha, $) { $('.edit').aloha(); }); }); </script>

On the side of the note, it ultimately does not go with this editor, even though in-place editing is amazing. Basically, it was a library that was quite large, even reduced it by 1 MB, and some bizarre behavior detected during testing (most likely because the project is still at an early stage of development). The tested version I was 0.20.10.

0
source

Source: https://habr.com/ru/post/1392761/

More articles:


All Articles