JSFiddle - React, Tailwind, and code Playground

by yoowordpress

HTML

<script src="http://www.jqueryscript.net/demo/jQuery-Based-WYSIWYG-style-Markdown-Editor-Markdown/js/jquery.scrollto.js"></script>
<script src="http://www.jqueryscript.net/demo/jQuery-Based-WYSIWYG-style-Markdown-Editor-Markdown/js/pagedown.js"></script>
<script src="http://www.jqueryscript.net/demo/jQuery-Based-WYSIWYG-style-Markdown-Editor-Markdown/js/pagedown-extra.js"></script>
<script src="http://www.jqueryscript.net/demo/jQuery-Based-WYSIWYG-style-Markdown-Editor-Markdown/js/diff.js"></script>
<link rel="stylesheet" href="http://www.jqueryscript.net/demo/jQuery-Based-WYSIWYG-style-Markdown-Editor-Markdown/css/style.css">
<textarea style="autocomplete="off" id="text" name="text" class="markdown-textarea"></textarea>

JavaScript

$(document).ready(function () {
    var textarea = $('#text'),
        toolbar = $('<div class="markdown-editor" id="md-button-bar" />').insertBefore(textarea.parent())
        preview = $('<div id="md-preview" class="md-hidetab" />').insertAfter('.markdown-editor');

    var options = {};

    options.strings = {
        bold: '<strong> Ctrl+B',
        boldexample: 'Bold',
            
        italic: '<em> Ctrl+I',
        italicexample: 'Em',

        link: '<a> Ctrl+L',
        linkdescription: 'Link Description',

        quote:  '<blockquote> Ctrl+Q',
        quoteexample: 'Quote',

        code: '<pre><code> Ctrl+K',
        codeexample: 'Code',

        image: '<img> Ctrl+G',
        imagedescription: 'Image Description',

        olist: '<ol> Ctrl+O',
        ulist: '<ul> Ctrl+U',
        litem: 'Item',

        heading: '<h1>/<h2> Ctrl+H',
        headingexample: 'Headling',

        hr: '<hr> Ctrl+R',
        more: '<!--more--> Ctrl+M',

        undo: 'Undo Ctrl+Z',
        redo: 'Redo Ctrl+Y',
        redomac: 'Redo Mac - Ctrl+Shift+Z',

        fullscreen: 'Fullscreen - Ctrl+J',
        exitFullscreen: 'Exit fullscreen - Ctrl+E',
        fullscreenUnsupport: 'Not support.',

        imagedialog: '<p><b>Insert An Image</b></p>',
        linkdialog: '<p><b>Insert A Link</b></p>',

        ok: 'Okey',
        cancel: 'Cancel'
    };

    var converter = new Markdown.Converter(),
        editor = new Markdown.Editor(converter, '', options),
        diffMatch = new diff_match_patch(), last = '', preview = $('#md-preview'),
        mark = '@mark' + Math.ceil(Math.random() * 100000000) + '@',
        span = '<span class="diff" />';
    
    // 设置markdown
    Markdown.Extra.init(converter, {
        extensions  :   ["tables", "fenced_code_gfm", "def_list", "attr_list", "footnotes"]
    });

    // 自动跟随
    converter.hooks.chain('postConversion', function (html) {
        // clear special html tags
        html =...