whatshot[网插]Vditor Markdown 编辑器

@Ta 01-07 10:16发布,06-17 13:07修改 18038点击

之前写了一款tui-editor编辑器的网页插件,但后面更新后,存在问题,一直不满意,也没有进行更新,也一直影响自己在虎绿林的发帖回帖体验。然后抽了半天时间,重新使用Vditor编辑器写了一个新的网页插件。


能满足日常在虎绿林基本的Markdown编辑功能。

特点

  • 支持表情(输入一个:号支持自动提示表情),支持全屏编辑
  • 支持直接粘贴图片到编辑器
  • 针对手机端进行工具栏优化(能提升一丝体验)

缺点

  1. 与其它涉及编辑的网页插件有冲突,导致他们无法正常运行(例如:表情插件)

代码

网页插件 (hu60.cn)

导入网页插件:vditor markdown 编辑器(当前用户:5,总安装次数:5)
<link rel="stylesheet" href="/q.php/api.webplug-file.11051_public_vditor_css.css"/>
<script src="/q.php/api.webplug-file.11051_public_vditor_js.js"></script>

截图

image.png

回复列表(67)
  • @Ta / 01-07 10:28 / /
    被锁定
    层主 @没落的情绪 于 2022-01-07 10:29 删除了该楼层。
  • @Ta / 01-07 10:29 / /

    小米11pro

  • @Ta / 01-07 10:30 / /

    @读书顶个鸟用,不行啊,用了之后回复空白啊
    小米11pro

  • @Ta / 01-07 10:31 / /

    @没落的情绪

    是不是操作的太快了

  • @Ta / 01-07 10:49 / /

    测试测试

    ~~~

  • @Ta / 01-07 11:00 / /

    @读书顶个鸟用,没有啊
    小米11pro

  • @Ta / 01-07 11:00 / /

    小米11pro

  • @Ta / 01-07 11:01 / /

    不能和其他插件共用?
    小米11pro

  • @Ta / 01-07 11:07 / /

    @没落的情绪

    你用了那些插件,我测试下是不是冲突。你发下你的网页插件配置

  • @Ta / 01-07 11:16 / /
    努力~奋斗~
  • @Ta / 01-07 11:26 / /

    @读书顶个鸟用

    <script src="/tpl/jhin/js/jquery-3.1.1.min.js"></script>
    <script>
    function insertText(obj, str) {  
        if (document.selection) {  
            var sel = document.selection.createRange();  
            sel.text = str;  
        } else if (typeof obj.selectionStart === 'number' && typeof obj.selectionEnd === 'number') {  
            var startPos = obj.selectionStart,  
                endPos = obj.selectionEnd,  
                cursorPos = startPos,  
                tmpStr = obj.value;  
            obj.value = tmpStr.substring(0, startPos) + str + tmpStr.substring(endPos, tmpStr.length);  
            cursorPos += str.length;  
            obj.selectionStart = obj.selectionEnd = cursorPos;  
        } else {  
            obj.value += str;  
        }  
    }
    $(function(){
      var head = "<!-- markdown -->\n";
      var tail = "\n[span=color:#fff;font-size:10px;background:#33CC99;display:inline-block;padding:2px 5px;border-radius:3px;margin-left:5px;float:right]小米11pro[/span]";
      $('#reply_topic_button,#quick_chat_button,#post_topic_button').click(function(){
        var content = $('#content').val();
        if (head == content.substr(0, head.length)) head = '';
        if (tail == content.substr(-tail.length)) tail = '';
        $('#content').val(head + content + tail);
      })
    });
    $(document).ready(function () {
      $("#content").after('<p id="face"><img title="冷" src="/tpl/classic/img/face/e586b7.gif" /><img title="勉强" src="/tpl/classic/img/face/e58b89e5bcba.gif" /><img title="吐舌" src="/tpl/classic/img/face/e59090e8888c.gif" /><img title="吐" src="/tpl/classic/img/face/e59090.gif" /><img title="呵呵" src="/tpl/classic/img/face/e591b5e591b5.gif" /><img title="呼" src="/tpl/classic/img/face/e591bc.gif" /><img title="咦" src="/tpl/classic/img/face/e592a6.gif" /><img title="哈哈" src="/tpl/classic/img/face/e59388e59388.gif" /><img title="啊" src="/tpl/classic/img/face/e5958a.gif" /><img title="喷" src="/tpl/classic/img/face/e596b7.gif" /><img title="太开心" src="/tpl/classic/img/face/e5a4aae5bc80e5bf83.gif" /><img title="委屈" src="/tpl/classic/img/face/e5a794e5b188.gif" /><img title="开心" src="/tpl/classic/img/face/e5bc80e5bf83.gif" /><img title="怒" src="/tpl/classic/img/face/e68092.gif" /><img title="惊哭" src="/tpl/classic/img/face/e6838ae593ad.gif" /><img title="惊讶" src="/tpl/classic/img/face/e6838ae8aeb6.gif" /><img title="汗" src="/tpl/classic/img/face/e6b197.gif" /><img title="泪" src="/tpl/classic/img/face/e6b3aa.gif" /><img title="滑稽" src="/tpl/classic/img/face/e6bb91e7a8bd.gif" /><img title="狂汗" src="/tpl/classic/img/face/e78b82e6b197.gif" /><img title="疑问" src="/tpl/classic/img/face/e79691e997ae.gif" /><img title="真棒" src="/tpl/classic/img/face/e79c9fe6a392.gif" /><img title="睡觉" src="/tpl/classic/img/face/e79da1e8a789.gif" /><img title="笑眼" src="/tpl/classic/img/face/e7ac91e79cbc.gif" /><img title="花心" src="/tpl/classic/img/face/e88ab1e5bf83.gif" /><img title="鄙视" src="/tpl/classic/img/face/e98499e8a786.gif" /><img title="酷" src="/tpl/classic/img/face/e985b7.gif" /><img title="钱" src="/tpl/classic/img/face/e992b1.gif" /><img title="阴险" src="/tpl/classic/img/face/e998b4e999a9.gif" /><img title="黑线" src="/tpl/classic/img/face/e9bb91e7babf.gif" /><img title="不高兴" src="/tpl/classic/img/face/e4b88de9ab98e585b4.gif" /><img title="乖" src="/tpl/classic/img/face/e4b996.gif" /><img title="勉强" src="/tpl/classic/img/face/e58b89e5bcba.gif" /><img title="吐舌" src="/tpl/classic/img/face/e59090e8888c.gif" /><img title="吐" src="/tpl/classic/img/face/e59090.gif" /><img title="呵呵" src="/tpl/classic/img/face/e591b5e591b5.gif" /><img title="呼" src="/tpl/classic/img/face/e591bc.gif" /><img title="咦" src="/tpl/classic/img/face/e592a6.gif" /><img title="哈哈" src="/tpl/classic/img/face/e59388e59388.gif" /><img title="啊" src="/tpl/classic/img/face/e5958a.gif" /><img title="喷" src="/tpl/classic/img/face/e596b7.gif" /><img title="太开心" src="/tpl/classic/img/face/e5a4aae5bc80e5bf83.gif" /><img title="委屈" src="/tpl/classic/img/face/e5a794e5b188.gif" /><img title="开心" src="/tpl/classic/img/face/e5bc80e5bf83.gif" /><img title="怒" src="/tpl/classic/img/face/e68092.gif" /><img title="惊哭" src="/tpl/classic/img/face/e6838ae593ad.gif" /><img title="惊讶" src="/tpl/classic/img/face/e6838ae8aeb6.gif" /><img title="汗" src="/tpl/classic/img/face/e6b197.gif" /><img title="泪" src="/tpl/classic/img/face/e6b3aa.gif" /><img title="滑稽" src="/tpl/classic/img/face/e6bb91e7a8bd.gif" /><img title="狂汗" src="/tpl/classic/img/face/e78b82e6b197.gif" /><img title="疑问" src="/tpl/classic/img/face/e79691e997ae.gif" /><img title="真棒" src="/tpl/classic/img/face/e79c9fe6a392.gif" /><img title="睡觉" src="/tpl/classic/img/face/e79da1e8a789.gif" /><img title="笑眼" src="/tpl/classic/img/face/e7ac91e79cbc.gif" /><img title="花心" src="/tpl/classic/img/face/e88ab1e5bf83.gif" /><img title="鄙视" src="/tpl/classic/img/face/e98499e8a786.gif" /><img title="酷" src="/tpl/classic/img/face/e985b7.gif" /><img title="钱" src="/tpl/classic/img/face/e992b1.gif" /><img title="阴险" src="/tpl/classic/img/face/e998b4e999a9.gif" /><img title="黑线" src="/tpl/classic/img/face/e9bb91e7babf.gif" /><img title="不高兴" src="/tpl/classic/img/face/e4b88de9ab98e585b4.gif" /><img title="乖" src="/tpl/classic/img/face/e4b996.gif" /><img title="狗头" src="/tpl/classic/img/face/e78b97e5a4b4.gif" /><img title="回头看" src="/tpl/classic/img/face/e59b9ee5a4b4e79c8b.gif" /></p>');
      $('#face img').click(function () {
        var face = "{" +  $(this).attr("title") + "}";
        insertText(document.getElementById("content"), face);
      });
    });
    </script>
    

    小米11pro

  • @Ta / 01-07 11:31 / /

    @没落的情绪 测试使用以下网页插件代码正常

    <!--<link rel="stylesheet" href="//jwj.show/vditor.css"/>
    <script src="//jwj.show/vditor.js"></script>-->
    <script src="/tpl/jhin/js/jquery-3.1.1.min.js"></script>
    <script>
    function insertText(obj, str) {  
        if (document.selection) {  
            var sel = document.selection.createRange();  
            sel.text = str;  
        } else if (typeof obj.selectionStart === 'number' && typeof obj.selectionEnd === 'number') {  
            var startPos = obj.selectionStart,  
                endPos = obj.selectionEnd,  
                cursorPos = startPos,  
                tmpStr = obj.value;  
            obj.value = tmpStr.substring(0, startPos) + str + tmpStr.substring(endPos, tmpStr.length);  
            cursorPos += str.length;  
            obj.selectionStart = obj.selectionEnd = cursorPos;  
        } else {  
            obj.value += str;  
        }  
    }
    $(function(){
      var head = "<!-- markdown -->\n";
      var tail = "\n[span=color:#fff;font-size:10px;background:#33CC99;display:inline-block;padding:2px 5px;border-radius:3px;margin-left:5px;float:right]小米11pro[/span]";
      $('#reply_topic_button,#quick_chat_button,#post_topic_button').click(function(){
        var content = $('#content').val();
        if (head == content.substr(0, head.length)) head = '';
        if (tail == content.substr(-tail.length)) tail = '';
        $('#content').val(head + content + tail);
      })
    });
    $(document).ready(function () {
      $("#content").after('<p id="face"><img title="冷" src="/tpl/classic/img/face/e586b7.gif" /><img title="勉强" src="/tpl/classic/img/face/e58b89e5bcba.gif" /><img title="吐舌" src="/tpl/classic/img/face/e59090e8888c.gif" /><img title="吐" src="/tpl/classic/img/face/e59090.gif" /><img title="呵呵" src="/tpl/classic/img/face/e591b5e591b5.gif" /><img title="呼" src="/tpl/classic/img/face/e591bc.gif" /><img title="咦" src="/tpl/classic/img/face/e592a6.gif" /><img title="哈哈" src="/tpl/classic/img/face/e59388e59388.gif" /><img title="啊" src="/tpl/classic/img/face/e5958a.gif" /><img title="喷" src="/tpl/classic/img/face/e596b7.gif" /><img title="太开心" src="/tpl/classic/img/face/e5a4aae5bc80e5bf83.gif" /><img title="委屈" src="/tpl/classic/img/face/e5a794e5b188.gif" /><img title="开心" src="/tpl/classic/img/face/e5bc80e5bf83.gif" /><img title="怒" src="/tpl/classic/img/face/e68092.gif" /><img title="惊哭" src="/tpl/classic/img/face/e6838ae593ad.gif" /><img title="惊讶" src="/tpl/classic/img/face/e6838ae8aeb6.gif" /><img title="汗" src="/tpl/classic/img/face/e6b197.gif" /><img title="泪" src="/tpl/classic/img/face/e6b3aa.gif" /><img title="滑稽" src="/tpl/classic/img/face/e6bb91e7a8bd.gif" /><img title="狂汗" src="/tpl/classic/img/face/e78b82e6b197.gif" /><img title="疑问" src="/tpl/classic/img/face/e79691e997ae.gif" /><img title="真棒" src="/tpl/classic/img/face/e79c9fe6a392.gif" /><img title="睡觉" src="/tpl/classic/img/face/e79da1e8a789.gif" /><img title="笑眼" src="/tpl/classic/img/face/e7ac91e79cbc.gif" /><img title="花心" src="/tpl/classic/img/face/e88ab1e5bf83.gif" /><img title="鄙视" src="/tpl/classic/img/face/e98499e8a786.gif" /><img title="酷" src="/tpl/classic/img/face/e985b7.gif" /><img title="钱" src="/tpl/classic/img/face/e992b1.gif" /><img title="阴险" src="/tpl/classic/img/face/e998b4e999a9.gif" /><img title="黑线" src="/tpl/classic/img/face/e9bb91e7babf.gif" /><img title="不高兴" src="/tpl/classic/img/face/e4b88de9ab98e585b4.gif" /><img title="乖" src="/tpl/classic/img/face/e4b996.gif" /><img title="勉强" src="/tpl/classic/img/face/e58b89e5bcba.gif" /><img title="吐舌" src="/tpl/classic/img/face/e59090e8888c.gif" /><img title="吐" src="/tpl/classic/img/face/e59090.gif" /><img title="呵呵" src="/tpl/classic/img/face/e591b5e591b5.gif" /><img title="呼" src="/tpl/classic/img/face/e591bc.gif" /><img title="咦" src="/tpl/classic/img/face/e592a6.gif" /><img title="哈哈" src="/tpl/classic/img/face/e59388e59388.gif" /><img title="啊" src="/tpl/classic/img/face/e5958a.gif" /><img title="喷" src="/tpl/classic/img/face/e596b7.gif" /><img title="太开心" src="/tpl/classic/img/face/e5a4aae5bc80e5bf83.gif" /><img title="委屈" src="/tpl/classic/img/face/e5a794e5b188.gif" /><img title="开心" src="/tpl/classic/img/face/e5bc80e5bf83.gif" /><img title="怒" src="/tpl/classic/img/face/e68092.gif" /><img title="惊哭" src="/tpl/classic/img/face/e6838ae593ad.gif" /><img title="惊讶" src="/tpl/classic/img/face/e6838ae8aeb6.gif" /><img title="汗" src="/tpl/classic/img/face/e6b197.gif" /><img title="泪" src="/tpl/classic/img/face/e6b3aa.gif" /><img title="滑稽" src="/tpl/classic/img/face/e6bb91e7a8bd.gif" /><img title="狂汗" src="/tpl/classic/img/face/e78b82e6b197.gif" /><img title="疑问" src="/tpl/classic/img/face/e79691e997ae.gif" /><img title="真棒" src="/tpl/classic/img/face/e79c9fe6a392.gif" /><img title="睡觉" src="/tpl/classic/img/face/e79da1e8a789.gif" /><img title="笑眼" src="/tpl/classic/img/face/e7ac91e79cbc.gif" /><img title="花心" src="/tpl/classic/img/face/e88ab1e5bf83.gif" /><img title="鄙视" src="/tpl/classic/img/face/e98499e8a786.gif" /><img title="酷" src="/tpl/classic/img/face/e985b7.gif" /><img title="钱" src="/tpl/classic/img/face/e992b1.gif" /><img title="阴险" src="/tpl/classic/img/face/e998b4e999a9.gif" /><img title="黑线" src="/tpl/classic/img/face/e9bb91e7babf.gif" /><img title="不高兴" src="/tpl/classic/img/face/e4b88de9ab98e585b4.gif" /><img title="乖" src="/tpl/classic/img/face/e4b996.gif" /><img title="狗头" src="/tpl/classic/img/face/e78b97e5a4b4.gif" /><img title="回头看" src="/tpl/classic/img/face/e59b9ee5a4b4e79c8b.gif" /></p>');
      $('#face img').click(function () {
        var face = "{" +  $(this).attr("title") + "}";
        insertText(document.getElementById("content"), face);
      });
    });
    </script>
    <link rel="stylesheet" href="/q.php/api.webplug-file.11051_public_vditor_css.css"/>
    <script src="/q.php/api.webplug-file.11051_public_vditor_js.js"></script>
    
  • @Ta / 01-07 11:34 / /

    小米11pro

  • @Ta / 01-07 11:35 / /

    @读书顶个鸟用,还是空白啊,就我的有问题吗
    小米11pro

  • @Ta / 01-07 12:00 / /

    @没落的情绪 用的什么设备,什么浏览器

  • @Ta / 01-07 15:32 / /

    @读书顶个鸟用,win10 QQ浏览器
    小米11pro

  • @Ta / 01-07 15:50 / /

    @没落的情绪 QQ浏览器的Chromium版本比较低,不支持string.replaceAll()方法,目前已优化

  • @Ta / 01-07 21:55 / /

    不错,懒人专用,而且还有泡泡表情

  • @Ta / 01-07 22:03 / /
    被锁定
    层主 @笨蛋海绵 于 2022-01-07 22:04 删除了该楼层。
添加新回复
回复需要登录