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

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

代码语言：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 });.........完整代码请登录后点击上方下载按钮下载查看