JavaScript 用 editor.md 当编辑器, 当 @ 一个会员。并在编辑器取的焦点。写了两个 js 函数。都不成功?

yasicn · 2019年12月18日 · 最后由 luikore 回复于 2019年12月21日 · 4187 次阅读

地址:http://editor.md.ipandao.com/examples/simple.html

在 html 这里此用 editor.md

<div id="test-editor">
                <textarea id="id_body" name="body" style="display:none;"></textarea>
              </div>

想实现的功能,点击这里的回复 Ta 把这亿 nickname 里的变量加上 @ 显示在编辑器里并取得焦点。

<span class="reply-jump reply" nickname="{{author}}">回复Ta</span>

js 代码 1 editor.md 里取不到焦点,也没法把 @+ 用户名 加到编辑器里

$(function(){
    $('.reply-jump').on('click', function (e) {
        var nickname = $(this).data('nickname');
        //var parent = $(this).data('parent');

        var $textarea = $('#id_body');
        var mention = '@' + nickname + ' ' + $textarea.val();
        $textarea.focus();
        $textarea.val(mention);
    });
});

js 代码 2 同样都不行

function reply() {
        var content = '@' + $(this).attr('data-nickname') + ' ';
        console.log(content);
        var $textarea = $('#id_body');
        $textarea.val(content).focus();
    }
    $('.reply-jump').on('click', reply);

不知道是哪里出了问题? 请各位朋友指导一下。谢谢。

富文本编辑器不是用 textarea 实现的,这个 textarea 只是一个方便初始化的东西。js 执行后会把它隐藏掉。

真正的实现是 js 生成一个 div 元素并且使它进入 edit mode

你给的这个 md 编辑器是用 codemirror 实现的,你可以搜索一下 codemirror 的文档看看

luikore 回复

看了一会儿。对前端不熟。也没找到什么解决办法。

https://xz.aliyun.com/t/2938

这个网址里。就有我想要实现的功能。 他就可以 点那回复 @ 会员到 editor.md 编辑器里 不知道怎么看她的实现代码? 请指教。谢谢。

你可以网上搜索一下 “如何看网页的源代码”

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册