Question

我按照aloha-editor.org中的说明，按照说明如何“安装”aloha编辑器。

加载了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>

Answer 1

我有类似的问题 - 只需要下载他们引用的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>

我认为aloha编辑器可能存在一些z-index问题...或者他们正在处理一些错误...这里是寻找答案的好地方。

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

如果不能解决CKEditor或类似的问题？值得一试，是我经常使用的。

Answer 2

即使在添加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>

另一方面，即使编辑到位功能令人惊讶，最终也没有使用此编辑器。主要是图书馆相当大，甚至缩小了它超过1MB，并且在测试期间发现了一些古怪的行为（很可能是因为该项目仍处于开发的早期阶段）。我测试的版本是0.20.10。

aloha界面显示不正确（截图）

2 个答案: