JavaScript来降价/纺织转换为HTML(和,理想情况下,回降价/纺织)(Javascript

2019-07-03 12:42发布

有几个很好的JavaScript 编辑器的降价/纺织(如: http://attacklab.net/showdown/ ,我现在使用的一个),但所有我需要的是一个JavaScript函数转换从降价/纺织字符串 - > HTML和背部。

什么是做到这一点的最好方法是什么? (理想情况下是jQuery的友好-例如, $("#editor").markdown_to_html()

编辑:另一种方式把它就是我正在寻找一个Javascript实现的Rails的textilize()markdown()文本佣工

Answer 1:

对于降价- > HTML,有摊牌

StackOverflow的本身使用的问题和答案降价语言; 你尝试看看它是如何工作的?

好了,现在看来,这是用PageDown键使MIT许可下提供

这个问题有没有什么好的降价Javascript库或控制? 其答案也许会有帮助,太:-)


一个完整的编辑器,当然,不完全是你问的; 但他们必须使用某种功能的降价代码转换为HTML; 并根据这些编辑的许可,您可能能够重新使用该功能...

其实,如果你把在摊牌的密切关注,在它的源代码(文件showdown.js),你会发现评论的这一部分:

//
// Showdown usage:
//
//   var text = "Markdown *rocks*.";
//
//   var converter = new Showdown.converter();
//   var html = converter.makeHtml(text);
//
//   alert(html);
//
// Note: move the sample code to the bottom of this
// file before uncommenting it.
//

这不是jQuery的语法,但应该是很轻松的在您的应用程序集成;-)


关于纺织,这似乎是有点难以找到有用的东西:-(


在另一边,HTML - >降价,我想事情可能会有点困难...

我会做的是同时存储降价和HTML在我的应用程序数据存储(数据库?),并使用一个编辑,另一个用于渲染...将采取更多的空间,但似乎比“解密” HTML风险较小。 ..



Answer 2:

纺织品

你可以找到一个看似很细的Javascript实现纺织这里 ,另一个存在 (也许不那么好,但有一个很好的转换,为你型示例页面)。

注意:在第一次执行我做了一个链接错误:单杠不正确呈现。 为了解决这个问题,你可以在文件中添加以下代码。

for(i=0;i<lines.length;i++) {
    // Add code :Start
    if (lines[i].match(/\s*-{4,}\s*/)){
      html+="<hr/>\n";
      continue;
    }
    // Add code :End
    if (lines[i].indexOf("[") == 0) {continue;}
    //...


Answer 3:

我使用的是微型简约的脚本- mmd.js ,只支持的降价可能性的一个子集,但是这可能是所有的人会需要,无论如何,所以这个脚本小于1KB是惊人的,会不会矫枉过正。

支持的功能

  • #
  • 引用文字>
  • 有序列表1
  • 无序列表*
  • 段落
  • 链接[]()
  • 图片![]()
  • 内嵌强调*
  • 内嵌强调**

不支持的功能

  • 参考资料和ID
  • 降价的转义字符
  • 嵌套


Answer 4:

我认为这将是值得做一个清单这里的JavaScript的解决方案,在那里和他们的精缩(未压缩)的大小和优势/劣势。 为缩小的代码压缩后的大小将未压缩大小的50%左右。 什么它归结为是我推荐下页 (8KB)如果你需要全面的支持,因为用户将在您的网站上编辑文档,我建议我自己的提款 (1.3kb的),如果你在一个web应用程序呈现的信息是不是用户编辑; 做正确的事情绝大多数情况下,同时非常小。 我相信几乎所有的这些都是麻省理工学院的许可证。

故宫也有各种各样的用于此目的的脚本,在质量参差不齐的状态。

  • 对决 :28KB。 基本上的黄金标准; 它是PageDown键的基础。

  • 下页 :8KB。 这就是权力StackExchange,所以你可以看到自己哪些功能支持。 这是很全面的,非常坚固耐用。 除了8KB转换器脚本,它也提供了编辑和消毒剂脚本,这两者StackExchange也使用。

  • 降价-它 :104KB。 遵循CommonMark规范; 支持语法扩展。 快速; 实际上可能是一样强大的对决,但是非常大的。 对于基础http://dillinger.io/ 。

  • 标记 :19KB。 全面; 针对单元测试套件测试; 支持自定义词法规则。

  • micromarkdown :5KB。 支持很多功能,但缺少一些常见的如使用无序列表*和一些常见的不属于严格的围栏一样的代码块的规范的一部分。 许多错误,引发大多数较长的文档例外。 我认为这是实验性的。

  • 纳米降价 :1.9KB。 特征范围仅限于大多数文档中使用的东西; 比micromarkdown但并不完美更稳健; 使用它自己的非常基本的单元测试。 相当强劲,但减免很多边缘情况。

  • 缩编 :1.3kb的。 充分披露,我写的。 更广泛的功能范围,比纳米降价更强劲,而小; 处理大多数但不是所有的CommonMark规范的。 处理少数边缘不正确的情况下; 不建议用户编辑的文档,但在Web应用程序呈现的信息是非常有用的。 没有内嵌HTML。

  • mmd.js :800个字节。 力争做到尽可能小的解析器,仍然是功能性的结果。 支持一小部分; 文档需要为它量身定做。

  • 降价-JS :54KB(不提供下载精缩;可能会再压缩到约20KB)。 看起来很全面,包括测试,但我不是很熟悉。

  • 崩溃 :41KB(不提供下载精缩;可能会再压缩到〜15KB)。 jQuery插件; 额外的降价(表,定义列表,脚注)。



Answer 5:

它易于使用摊牌带或不带jQuery的 。 这里有一个jQuery的例子:

// See http://mathiasbynens.be/notes/showdown-javascript-jquery for a plain JavaScript version as well
$(function() {
 // When using more than one `textarea` on your page, change the following line to match the one you’re after
 var $textarea = $('textarea'),
     $preview = $('<div id="preview" />').insertAfter($textarea),
     converter = new Showdown.converter();
 $textarea.keyup(function() {
  $preview.html(converter.makeHtml($textarea.val()));
 }).trigger('keyup');
});


Answer 6:

摊牌Attacklab-Link是下来,使用https://github.com/coreyti/showdown您的转换需要:)



Answer 7:

这并没有解决整个请求(它不是一个编辑器),但纺织品的js是一个JavaScript渲染库: https://github.com/borgar/textile-js 。 演示可在http://borgar.github.io/textile-js/



Answer 8:

我发现这个问题有趣,所以我决定开始做掉(只替换strongitalic降价标签)。 在花了一个小时试图设计使用正则表达式的解决方案,我放弃了,结束了以下,这似乎很好地工作。 这就是说,它一定能够进一步优化,我不知道,以它会是多么真实世界的弹性是这种形式:

function mdToHtml(str) {
    var tempStr = str;
    while(tempStr.indexOf("**") !== -1) {
        var firstPos = tempStr.indexOf("**");
        var nextPos = tempStr.indexOf("**",firstPos + 2);
        if(nextPos !== -1) {
            var innerTxt = tempStr.substring(firstPos + 2,nextPos);
            var strongified = '<strong>' + innerTxt + '</strong>';
            tempStr = tempStr.substring(0,firstPos) + strongified + tempStr.substring(nextPos + 2,tempStr.length);
        //get rid of unclosed '**'
        } else {
            tempStr = tempStr.replace('**','');
        }
    }
     while(tempStr.indexOf("*") !== -1) {
        var firstPos = tempStr.indexOf("*");
        var nextPos = tempStr.indexOf("*",firstPos + 1);
        if(nextPos !== -1) {
            var innerTxt = tempStr.substring(firstPos + 1,nextPos);
            var italicized = '<i>' + innerTxt + '</i>';
            tempStr = tempStr.substring(0,firstPos) + italicized + tempStr.substring(nextPos + 2,tempStr.length);
        //get rid of unclosed '*'
        } else {
            tempStr = tempStr.replace('*','');
        }
    }
    return tempStr;
}

测试代码:

    var s = "This would be *italicized* text and this would be **bold** text, This would be *italicized* text and this would be **bold** text, This would be *italicized* text and this would be **bold** text";
    alert(mdToHtml(s));

输出:

This would be <i>italicized</i>text and this would be <strong>bold</strong> text, This would be <i>italicized</i>text and this would be <strong>bold</strong> text, This would be <i>italicized</i>text and this would be <strong>bold</strong> text

编辑:新以V 0.024 - 自动删除未关闭的降价标签



Answer 9:

降价-JS是一个不错的javascript降价解析器,与测试的活动项目。



Answer 10:

你有没有看在Eclipse wiki文字库,Mylyn的一部分。 它会从许多wiki语法转换为XHTML和xdocs / DITA。 它看起来非常酷。

http://help.eclipse.org/galileo/topic/org.eclipse.mylyn.wikitext.help.ui/help/Markup-Conversion.html

有没有人找到了解决HTML的“纺织品问题? 我们目前所有的文档是M $ Word格式,我们愿意把它纳入管理平台维基协作维护。 我们还没有发现任何工具,它将使转换。 我们已经找到了打开Office扩展,可生成链接到MediaWiki格式的文本,但管理平台Wiki使用纺织品的一个子集。

任何人都知道,转换从纺织品的mediawiki,Word中,XDocs,或HTML的工具吗?



Answer 11:

纺织:

我最近拼凑的HTML到纺织转换器: https://github.com/cmroanirgo/to-textile

对于反向纺织为HTML,我使用和推荐https://github.com/borgar/textile-js ,这是其他答案已经提到。



文章来源: Javascript to convert Markdown/Textile to HTML (and, ideally, back to Markdown/Textile)