3

我想知道用于网络上所见即所得页面的基本原理。我开始对其进行编码并使用文本区域进行编写，但很快我意识到我无法在文本区域中添加或显示图像或任何 HTML。所以我使用 DIV 制作它，但我不明白如何使它可编辑。

所以，总的来说，我想知道（原则上）如何在网页上制作可编辑的 DIV 部分，类似于 Google docs 或 FCKEditor 或 TinyMCE。

我将非常感谢任何指示和信息。

谢谢！

4

4 回答 4

4

可以将contentEditable标志添加到页面上的任何元素以使其可编辑，例如。

<div contentEditable>I am editable!!!!</div>

现在应该可以在所有主流浏览器中使用，并且快捷键（cmd/ctrl-b 等）之类的东西都可以使用。

然后可以通过将 innerHTML 拉出可编辑区域来完成表单提交。

于 2008-12-13T02:14:47.440 回答
3

所见即所得 - 不要走所见即所得的道路，因为它充满了陷阱。

WYMeditor在输出语义和干净的 HTML 方面是最好的。

于 2008-12-13T22:44:08.330 回答
2

TinyMCE是开源的，所以你可以看看它是如何工作的。:)

从安装说明中可以看出，HTMLform部分（允许将表单提交到服务器进行存储）是用textareaTineMCE 编辑器替换的内部创建的。

源本身是从tiny_mce.js目标 HTML 文件中引用的文件中引用的，因此这可能是了解其工作原理的一个很好的起点。

祝你好运！

编辑：

虽然我没有花很多时间，但查看 TinyMCE 的源代码似乎表明编辑器本身位于iframe一个 .

如果您好奇，请下载开发包，并查看tiny_mce/jscripts/tiny_mce/classes/Editor.js. 从第 400 行开始，他们似乎正在设置一个iframe并将其添加到目标 HTML 的 DOM 中。

于 2008-12-13T01:42:46.023 回答
2

使用TinyMCE并关闭工具栏。

说真的，为网络制作一个所见即所得的编辑器比听起来要复杂得多，而且有上百万种方法可能会出错。你可以在接下来的两个月里与不同的浏览器和无缘无故地崩溃的东西作斗争，或者你可以相信比你或我更了解这个主题的人。

TinyMCE 的可配置性令人印象深刻，您只需使用最简单的配置选项即可隐藏所有工具栏：

tinyMCE.init({
    mode: 'textareas',
    theme: 'advanced',
    theme_advanced_buttons1 : '',
    theme_advanced_buttons2 : '',
    theme_advanced_buttons3 : '',
    theme_advanced_statusbar_location : "none",
});

您也可以使用普通的 CSS 来制作

.mceLayout {
    background: none !important;
    border: none !important;
}

我不确定您想要 WYSIWYG 区域做什么，但您可能需要在某个时候获取内容。您可以使用简单的 Javascript 来做到这一点：

var editor = tinyMCE.get('editorid');
var stuff = editor.getContent();

它是免费的、易于使用的，并且被许多用户证明是可靠的。没有充分的理由重新发明轮子。

于 2008-12-13T02:48:07.090 回答