2

我目前正在为客户端构建一个 CMS，其中编辑页面看起来与渲染页面完全一样。

因此，我不想要基于 iframe 的 WYSIWYG，我正在寻找一种可以contenteditable消除 Firefox 和 Webkit 之间差异的包装器。

例如Enter，Firefox 中的按键会产生一个<br/>标签，而 Webkit 中的相同事件会导致它被包含在一个<div>标签中。

如果您对编辑器没有建议，那么您能帮我解决这个问题吗？我首先修复它的方法是检查onkeyup事件，然后使用execCommand“撤消”，然后使用insertHtml <br/>。

这很好用，但问题是如果用户在一个列表中，并且他们按 Enter 键，他们希望创建下一个列表元素，但最终会换行。当输入键被触发时，如何检测插入符号的位置，以便我可以跳过<br/>插入行为？

理想情况下，我什至不希望<br/>将文本块封装在<p>标签中以用于 SEO 目的，但我也无法解决这个问题。

任何帮助将不胜感激 ！

4

4 回答 4

2

Aloha 编辑器很好。去谷歌上查询。

于 2011-04-22T14:49:35.100 回答
0

在内容编辑方面，浏览器之间存在许多细微差别。我不知道有任何库可以消除所有差异，我怀疑任何编写此类库的人都会简单地编写基于浏览器的所见即所得编辑器。既然如此，你最好的选择可能是看看像TinyMCE和CKEditor这样的大型开源编辑器是如何做到的。

于 2010-07-02T15:42:55.630 回答
0

在 TinyMCE v3.5.2 的源代码中有一个名为“content_editable”的配置属性。此标志可防止 iframe 被渲染。已发布的文档没有说明此标志。我认为这是因为该标志可能没有经过深入测试。

我在 contenteditable div 上调用了 TinyMCE 并禁用了所有 TinyMCE UI。基本功能似乎运行良好。

初始化选项：

$('#editor').tinymce({
        script_url: '/tinymcecustom/tiny_mce_jquery.js',
        content_editable: true,
        theme: "simple"
    });

html标记：

<div id="editor" contenteditable="true" style="height: 900px"></div>

EditorTemplate.js（在主题文件夹内）：

(function () {
tinymce.create('tinymce.themes.SimpleTheme', {
    init: function (ed, url) {
        this.editor = ed;
    },
    renderUI: function (o) {
        return {
            editorContainer: this.editor.id
        };
    }
});
tinymce.ThemeManager.add('simple', tinymce.themes.SimpleTheme); })();
于 2012-06-18T06:34:54.843 回答
0

这是一个复杂的领域，您将难以做到正确。此外，如果您允许用户粘贴内容，那么使用 iFrame 是确保有效结果且不会弄乱页面的最佳方式。

Aloha 编辑器、TinyMCE 等相当大而且臃肿。我建议你看看 WYSIHTML5 https://github.com/xing/wysihtml5， http:www.createjs.org 或者更简单的https://github.com/mquan/freshereditor但是我不推荐这个简单的方法。

于 2012-08-24T08:02:59.433 回答