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参考，也有完全相同的问题。最后转到他们的演示页面并复制他们的源代码以初始化 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。

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

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

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

如果它不起作用考虑 CKEditor 或类似的？值得一试，是我最常使用的。

于 2012-04-19T20:28:56.853 回答