интерфейс алоха отображается некорректно (скриншот) - PullRequest
Новая
       13

интерфейс алоха отображается некорректно (скриншот)

4 голосов
/ 24 января 2012

Я следовал инструкциям по «установке» редактора Aloha, как описано на aloha-editor.org.

Редактор Aloha загружен (как вы можете видеть на фотографии), но не правильно

Вы можете посмотреть фото здесь:

enter image description here

это какой-то javascript, который я использовал: 

<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>

Ответы [ 2 ]

0 голосов
/ 20 апреля 2012

Была точно такая же проблема, даже после добавления ссылки CSS.Закончилось переходом на их демонстрационную страницу и копированием их источника для инициализации aloha, чтобы заставить его работать.

<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>

Кстати, в конечном итоге вы не пошли с этим редактором, хотя функциональность редактирования на месте поразительна.В основном это была довольно большая библиотека, даже уменьшенная в размере более 1 МБ, и некоторое странное поведение, обнаруженное во время тестирования (скорее всего потому, что проект все еще находится на ранней стадии разработки).Версия, с которой я тестировал, была 0.20.10.

0 голосов
/ 20 апреля 2012

У меня была похожая проблема - просто нужно скачать файл css, на который они ссылаются, и запустить его локально. Запуск его с использованием их кода может быть ошибочным. Если вы уже делаете это, дважды проверьте путь к файлу CSS. 

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

другие включает и конфигурации 

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

... и начать на странице 

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

и наконец - все элементы с class = 'editable' доступны для редактирования 

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

Я думаю, что могут быть некоторые проблемы с z-index в редакторе Aloha ... или, возможно, они работают над некоторыми ошибками ... вот хорошее место, чтобы искать ответы.

http://aloha -editor.org / сборки / разработки / последний / документ / направляющие / выход /

Если это не работает, рассмотрите CKEditor или подобное? Стоит попробовать и это то, что я использую чаще всего.

...