Question

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

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

我会非常感谢任何指针和信息。

谢谢！

Answer 1

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

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

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

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

Answer 2

你看到的是你的意思是这样的 - 不要跟随WYSIWYG路径，因为它充满了陷阱。

在输出语义和干净的HTML时，

WYMeditor是最好的。

Answer 3

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

从installation directions看来，HTML form部分（允许将表单提交到服务器进行存储）是使用textarea内部替换为TineMCE编辑器

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

祝你好运！

修改

虽然我没有花费很多时间，但是查看TinyMCE的源代码似乎表明编辑器本身位于iframe内，因此可以解释图像如何在“可编辑的“区域。

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

Answer 4

使用TinyMCE并关闭工具栏。

说真的，为网络制作一个WYSIWYG编辑器比听起来要复杂得多，而且有一百万种方法可以出错。接下来的两个月你可能会花费不同的浏览器和没有充分理由的东西，或者你可以信任那些比你或我更了解这个主题的人。

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();

它是免费的，易于使用的，并且通过批次用户证明可靠。重新发明轮子是没有充分理由的。

如何在网页上制作WYSIWYG部分？

4 个答案: