quill结合markdown-it实现输入html实时转换成markdown格式代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：quill结合markdown-it实现输入html实时转换成markdown格式代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/quill.bubble.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/quill.snow.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/sakura.css">

    <style>
        #editor-container {
          height: 200px;
        }
        
        #markdown {
          background-color: #eeffee;
          min-height: 200px;
        }
        
        #html {
          background-color: #ffeeee;
          min-height: 200px;
        }
        
        #output-quill {
          background-color: #ffeeff;
          min-height: 200px;
          
          ol .ql-indent-1 {
          margin-left: 200px;
        }
        }
        
        
        
        #output-markdown {
          background-color: #ffeeff;
          min-height: 200px;
        }
    </style>



</head>

<body>
    <h1>Quill JS Editor</h1>
    <hr>
    <div id="editor-container">
    </div>

    <h1>Rendered Markdown</h1>
    <hr>
    <div id="output-markdown"></div>

    <h1>Rendered HTML</h1>
    <hr>
    <div id="output-quill"></div>

    <h1>RAW HTML</h1>
    <hr>
    <div id="html"></div>

    <h1>Markdown Code</h1>
    <hr>
    <div>
        <pre id="markdown"></pre>
    </div>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/quill.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.2.11.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/to-markdown.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/markdown-it.min.js"></script>
    <script>
        (function () {
          function init(raw_markdown) {
            var quill = new Quill("#editor-container", {
              modules: {
                toolbar: [
                [{ header: [1, 2, false] }],
                ["bold", "italic", "underline"],
                [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                ["image", "code-block"]] },
        
        
              placeholder: "Compose an epic...",
              theme: "snow" // or 'bubble'
            });
        
            var md = window.markdownit();
            md.set({
              html: true });
        
        
            var result = md.render(raw_markdown);
        
            quill.clipboard.dangerouslyPasteHTML(result + "\n");
        
            // Need to do a first pass when we're passing in initial data.
            var html = quill.container.firstChild.innerHTML;
            $("#markdown").text(toMarkdown(html));
            $("#html").text(html);
            $("#output-quill").html(html);
            $("#output-markdown").html(result);
        
            // text-change might not be the right event hook. Works for now though.
            quill.on("text-change", function (delta, source) {
              var html = quill.container.firstChild.innerHTML;
              var markdown = toMarkdown(html);
              var rendered_markdown = md.render(markdown);
              $("#markdown").text(markdown);
              $("#html").text(html);
              $("#output-quill").html(html);
              $("#output-markdown").html(rendered_markdown);
            });
          }
        
          // Just some fake markdown that would come from the server.
        
          var text = "";
          text += "# Dillinger" + "\n";
          text += " " + "\n";
          text += "[![N|Solid](https://cldup.com/dTxpPi9lDf.thumb.png)](https://nodesource.com/products/nsolid)" + "\n";
          text += " " + "\n";
          text += "Dillinger is a cloud-enabled, mobile-ready, offline-storage, AngularJS powered HTML5 Markdown editor." + "\n";
          text += " " + "\n";
          text += "  - Type some Markdown on the left" + "\n";
          text += "  - See HTML in the right" + "\n";
          text += "  - Magic" + "\n";
          text += " " + "\n";
          text += "# New Features!" + "\n";
          text += " " + "\n";
          text += "  - Import a HTML file and watch it magically convert to Markdown" + "\n";
          text += "  - Drag and drop images (requires your Dropbox account be linked)" + "\n";
          text += " " + "\n";
          text += " " + "\n";
          text += "You can also:" + "\n";
          text += "  - Import and save files from GitHub, Dropbox, Google Drive and One Drive" + "\n";
          text += "  - Drag and drop markdown and HTML files into Dillinger" + "\n";
          text += "  - Export documents as Markdown, HTML and PDF" + "\n";
          text += " " + "\n";
          text += "Markdown is a lightweight markup language based on the formatting conventions that people naturally use in email.  As [John Gruber] writes on th.........完整代码请登录后点击上方下载按钮下载查看