创建一个输出可用 HTML 的 JS 表单答案

【问题标题】：Creating a JS form that outputs usable HTML创建一个输出可用 HTML 的 JS 表单
【发布时间】：2016-10-20 22:55:39
【问题描述】：

我正在努力为我学校报纸的编辑创建一种方法，让他们能够进入一个可以输入信息的页面（即 img url、标题、说明），它会输出 HTML 代码已经程式化了。

所以他们在标题区域的表格中输入：“标题”

并且在段落区域：“这是一个测试”

它会输出如下内容：

<div class="div1">
    <span>Title</span>
    <p>This is a test</p>
</div>

（div1 因为它是您放置的第一个，以后可以添加更多）

我一直在寻找类似的东西，我知道这是可能的，我只是不知道从哪里开始，或者我什至不知道谷歌搜索。任何帮助将不胜感激。

谢谢。

编辑：由于与外部公司的合同，我们无法设置 Wordpress。

【问题讨论】：

太宽泛了……你可以使用任何东西，从手工代码、模板、React.JS 甚至 CMS 来实现。客户端或服务器端 HTML 生成。这么多未指定的变量...
大概设置wordpress。
帮自己一个忙，避免尝试从头开始制作编辑器。谷歌WYSIWYG editor 结果会包括CKEditor 和TinyMCE 等。当你真的把JS 写得足够好时，你可以从头开始做一个，然后意识到它仍然不值得。

【解决方案1】：

这取决于您是想自己实施解决方案还是使用已有的解决方案。这种类型的功能已经通过 WYSIWYG（所见即所得）编辑器内置到 Wordpress 和 SquareSpace 等平台中，类似于 Stackoverflow 的问题框。

如果您希望实施自定义解决方案，那么我建议您研究一下降价语言。例如，这是一个名为 Remarkable 的 markdown javascript 库：

这段代码 sn-p 直接取自他们的 github README

var Remarkable = require('remarkable');
var md = new Remarkable();

console.log(md.render('# Remarkable rulezz!'));
// => <h1>Remarkable rulezz!</h1>

正如你所见，markdown 文本被传递给一个渲染函数，并被翻译成 html。

亚历克斯

【讨论】：