aloha interface is not displayed correctly (screenshot)

Question

aloha interface is not displayed correctly (screenshot)

666 views Asked by user1167753 At 24 January 2012 at 19:24

I've followed the instructions how to "install" aloha editor as described in aloha-editor.org.

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

You can see the foto 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>

Original Q&A

There are 2 answers

**timpng1** · Answer 1 · 2012-04-19 20:28:56

I had a similar problem - just need to download the css file they refer to and run it locally. Running it using their code can be buggy. If you're already doing this then double check the path to the css file.

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

other includes and 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 initiate on 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'm thinking there may be some z-index issues with the aloha editor...or perhaps they're working on some bugs...here's a good place to look for answers.

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

If it's not working out consider CKEditor or similar? Worth a shot and is what I use most often.

**Jerry** · Answer 2 · 2012-04-19 20:55:31

Had exact same issue, even after adding the css reference. Ended up going to their demo page and copying over their source for initializing aloha to get it to 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 a side note, ended up not going with this editor even though edit in place functionality is amazing. Mainly it was the library being rather large, even minified it's over 1MB, and some quirky behavior found during testing (most likely because the project is still in an early phase of development). Version I tested with was 0.20.10.

TechQA.

aloha interface is not displayed correctly (screenshot)

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in ALOHA-EDITOR

Popular Questions

Popular Tags

Trending Questions