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 the [Markdown site][df1]" + "\n";
          text += " " + "\n";
          text += "> The overriding design goal for Markdown's" + "\n";
          text += "> formatting syntax is to make it as readable" + "\n";
          text += "> as possible. The idea is that a" + "\n";
          text += "> Markdown-formatted document should be" + "\n";
          text += "> publishable as-is, as plain text, without" + "\n";
          text += "> looking like it's been marked up with tags" + "\n";
          text += "> or formatting instructions." + "\n";
          text += " " + "\n";
          text += "This text you see here is *actually* written in Markdown! To get a feel for Markdown's syntax, type some text into the left window and watch the results in the right." + "\n";
          text += " " + "\n";
          text += "### Tech" + "\n";
          text += " " + "\n";
          text += "Dillinger uses a number of open source projects to work properly:" + "\n";
          text += " " + "\n";
          text += "* [AngularJS] - HTML enhanced for web apps!" + "\n";
          text += "* [Ace Editor] - awesome web-based text editor" + "\n";
          text += "* [markdown-it] - Markdown parser done right. Fast and easy to extend." + "\n";
          text += "* [Twitter Bootstrap] - great UI boilerplate for modern web apps" + "\n";
          text += "* [node.js] - evented I/O for the backend" + "\n";
          text += "* [Express] - fast node.js network app framework [@tjholowaychuk]" + "\n";
          text += "* [Gulp] - the streaming build system" + "\n";
          text += "* [Breakdance](http://breakdance.io) - HTML to Markdown converter" + "\n";
          text += "* [jQuery] - duh" + "\n";
          text += " " + "\n";
          text += "And of course Dillinger itself is open source with a [public repository][dill]" + "\n";
          text += " on GitHub." + "\n";
          text += " " + "\n";
          text += "### Installation" + "\n";
          text += " " + "\n";
          text += "Dillinger requires [Node.js](https://nodejs.org/) v4+ to run." + "\n";
          text += " " + "\n";
          text += "Install the dependencies and devDependencies and start the server." + "\n";
          text += " " + "\n";
          text += "```sh" + "\n";
          text += "$ cd dillinger" + "\.........完整代码请登录后点击上方下载按钮下载查看