4

aloha-editor.org で説明されているように、aloha エディターを「インストール」する方法の指示に従いました。

Aloha エディターがロードされていますが (写真でわかるように)、正しくありません

ここで写真を見ることができます：

ここに画像の説明を入力

これは私が使用した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>
4

2 に答える 2

0

css参照を追加した後でも、まったく同じ問題がありました。デモページに行き、アロハを初期化して動作させるためにソースをコピーすることになりました。

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

余談ですが、その場での編集機能は素晴らしいのに、結局このエ​​ディターを使用しませんでした。主な原因は、ライブラリがかなり大きく、縮小しても 1MB を超えていたことと、テスト中に奇妙な動作が見つかったことです (おそらく、プロジェクトがまだ開発の初期段階にあるためです)。私がテストしたバージョンは 0.20.10 でした。

于 2012-04-19T20:55:31.603 に答える
0

同様の問題がありました-彼らが参照する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 の問題があるのではないかと考えています...または、おそらくいくつかのバグに取り組んでいます...ここで答えを探すのに適した場所です。

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

うまくいかない場合は、CKEditor などを検討してください。一見の価値があり、私が最も頻繁に使用するものです。

于 2012-04-19T20:28:56.853 に答える