[网插]Vditor Markdown 编辑器

读书顶个鸟用

@Ta 2022-01-07发布，2022-06-17修改 34227点击

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

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

特点

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

缺点

与其它涉及编辑的网页插件有冲突，导致他们无法正常运行（例如：表情插件）

代码

网页插件 (hu60.cn)

导入网页插件：vditor markdown 编辑器（当前用户：12，总安装次数：17）

<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>

截图

隐藏样式查看源码

回复列表(68|隐藏机器人聊天)

2

没落的情绪

@Ta / 2022-01-07 / 样 / 源

小米11pro
3

没落的情绪

@Ta / 2022-01-07 / 样 / 源

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

读书顶个鸟用

@Ta / 2022-01-07 / 样 / 源

@没落的情绪

是不是操作的太快了
5

㝶芾厶眵攴䭡

@Ta / 2022-01-07 / 样 / 源

测试测试

~~~
6

没落的情绪

@Ta / 2022-01-07 / 样 / 源

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

没落的情绪

@Ta / 2022-01-07 / 样 / 源

小米11pro
8

没落的情绪

@Ta / 2022-01-07 / 样 / 源

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

读书顶个鸟用

@Ta / 2022-01-07 / 样 / 源

@没落的情绪

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

SKSlience

@Ta / 2022-01-07 / 样 / 源

努力~奋斗~

没落的情绪

@Ta / 2022-01-07 / 样 / 源

@读书顶个鸟用，

<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 / 2022-01-07 / 样 / 源

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

<!--<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>

13

没落的情绪

@Ta / 2022-01-07 / 样 / 源

小米11pro
14

没落的情绪

@Ta / 2022-01-07 / 样 / 源

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

读书顶个鸟用

@Ta / 2022-01-07 / 样 / 源

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

没落的情绪

@Ta / 2022-01-07 / 样 / 源

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

读书顶个鸟用

@Ta / 2022-01-07 / 样 / 源

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

笨蛋海绵

@Ta / 2022-01-07 / 样 / 源

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

没落的情绪

@Ta / 2022-01-08 / 样 / 源

试试

小米11pro
21

嚻

@Ta / 2022-01-08 / 样 / 源

列1 列2 列3

1 2 3

4 5 6

列1	列2	列3
1	2	3
4	5	6

添加新回复

回复需要登录。

whatshot[网插]Vditor Markdown 编辑器

特点

缺点

代码

截图

[网插]Vditor Markdown 编辑器