一页上有多个 WMD 编辑器（SO 分叉版）？答案

【问题标题】：Multiple WMD editors (SO forked version) on one page?一页上有多个 WMD 编辑器（SO 分叉版）？
【发布时间】：2010-10-14 19:54:04
【问题描述】：

为了清楚起见，我指的是stackoverflow's forked WMD 的用法，不是 original version from attacklab。

我想使用分叉版本，但是脚本用来识别 WMDify 页面元素的 div id 似乎在wmd.js:66 中硬编码：

// A collection of the important regions on the page.
// Cached so we don't have to keep traversing the DOM.
wmd.PanelCollection = function(){
    this.buttonBar = doc.getElementById("wmd-button-bar");
    this.preview = doc.getElementById("wmd-preview");
    this.output = doc.getElementById("wmd-output");
    this.input = doc.getElementById("wmd-input");
};

如果我只是想使用不同的地区名称，我自己会很好 - 但我想在单个页面上使用可变数量的 WMD 编辑器。我需要一种方法来告诉 WMD 的每个实例它应该影响的页面区域，但我没有看到任何“挂钩”。

没有看到可能是我几乎完全缺乏 js 知识的产物。 The Right Thing To Do™ 就是正确地学习 javascript，但我正在进行一个有截止日期的项目。我真的很想使用这个版本的 WMD，但我需要一些关于如何修改 WMD 脚本的线索，或者只是一个如何以我可以指定使用哪个 div id 的方式调用它的示例。

感谢线索！

【问题讨论】：

谁能帮我解决这个问题stackoverflow.com/questions/3616788/…

标签： javascript wmd

【解决方案1】：

我有类似的问题，所以我重新考虑了 WMD 以便能够做到这一点。 my version of wmd

最近，我重新检查了这个。 Google 代码中的版本支持一个页面上的多个版本。
google code fork 并且是最新版本。

【讨论】：

似乎是服务器的问题。我需要找到一个不同的地方来举办这个。如果你愿意 - 给我发电子邮件，我会把文件发给你。
我正在尝试做同样的事情。谁有这个版本的工作链接允许它？
给我发邮件，我会给你发一份网站moowmd.awardspace.info的工作副本
@ItayMoav 它确实允许单个页面上的多个编辑器，假设它们具有不同的 id 并为每个编辑器初始化一个 wmd 编辑器。

【解决方案2】：

在“有期限的项目”中，它可以绕过一些限制。在这种情况下，我只需制作 WMD 编辑器脚本的多个副本（或在服务器端生成它）并用您需要的标识符替换 ID。这样您就可以立即在一个页面上部署多个 WMD。

您只需要非常清楚一件事：您的项目正在累积technical debt（“草率的软件架构和仓促的软件开发的最终后果”）。您将必须重新审视这一点以偿还这笔债务，否则您将在进行维护时淹没在利息支付中。

【讨论】：

啊，我没有完全指定：我需要根据内容在每个页面上使用可变个编辑器。是的，如果快速解决方案过于骇人听闻，这次我将简单地放弃 wmd 以支持另一种解决方案。允许的黑客行为是有限制的。 :)
对于可变数量的 wmd，您可以进入 generate-wmd-source-with-servers-side-script。如果你做得对，应该很容易将其转换为 JS 参数化的单源解决方案。
我试过这个，即使有多个 .js 文件，我似乎也无法让它工作。它只会加载第一个文本区域的按钮。如果我删除第一个，则第二个文本区域的按钮加载正常。我已经挖掘了 JS 并确保所有引用都已更新，但仍然没有运气。

【解决方案3】：

wmd.js 的第 2339 行可能是一个不错的起点：

Attacklab.wmd_defaults = {version:1, output:"HTML", lineLength:40, delayLoad:false};

为您需要更改的每个 div id 添加一个选项。

您可以通过在包含 wmd.js 之前添加脚本块来覆盖这些设置，例如：

<script type="text/javascript">wmd_options = {"output": "Markdown"};</script>

然后把wmd.PanelCollection函数改成..

wmd.PanelCollection = function(){
        this.buttonBar = doc.getElementById(wmd.wmd_env["wmd-button-bar"]);
        this.preview = doc.getElementById(wmd.wmd_env["wmd-preview"]);
        this.output = doc.getElementById(wmd.wmd_env["wmd-output"]);
        this.input = doc.getElementById(wmd.wmd_env["wmd-input"]);
};

请注意，这完全未经测试，可能无法正常工作，但与自动生成 WMD 编辑器或制作多个副本相比，它稍微更优雅..

编辑：我尝试进行编辑，但这并不像添加到 wmd_defaults 那样简单 - 各种项目（主要是按钮栏）使用 ID 而不是类，但是，它很接近..

编辑 2：经过一番折腾，我想说答案基本上是“不”。

更好的答案是否定的，不是没有对 WMD 进行一些相当大的更改（超出我非常有限的 javascript 经验的更改）..

我尝试将所有硬编码的 div 名称移动到设置中，并为所有按钮类名称添加了一个“elementNamePrefix”设置，而不是使用 "wmd-spacer1" 它使用 wmd.wmd_env["elementNamePrefix"] + "spacer1"... 但即使这样你也需要复制 CSS 文件中的项目，并且更改导致我无法修复的奇怪行为（我认为是因为第一行定义的全局 AttackLab 变量？不确定）..

也许，作为拥有多个 WMD 控件的替代方案，您可以有一个通过 AJAX 加载不同帖子的下拉菜单？这肯定比修改 WMD 以允许多个实例更容易..

【讨论】：

【解决方案4】：

This 项目可能是一个好的开始。

【讨论】：