想在 Vditor 上实现根据用户输入同容做相应处理

想在 Vditor 上实现根据用户输入同容做相应处理,比如用户在文档任意位置输入 关键字,系统就弹出一个列表框显示 杭州 杭城 之类的可选列表出来。

看了 Vditor 开放的方法,好像实现不了。

请问这个功能是否需要对 Vditor 进行二次开发?还是说要对 Lute 引擎做修改?如果需要,请问 lute 是否有技术文档呢?

谢谢

  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    130 引用 • 944 回帖 • 3 关注

广告 我要投放

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • Vanessa
    订阅者

    目前只能这样使用 https://b3log.org/vditor/demo/advanced-hint.html

    key: '杭',
            hint: (key) => {
            
                return [
                  {
                    value: '杭州',
                    html: '<img src="https://avatars0.githubusercontent.com/u/970828?s=60&v=4"/> 杭州',
                  },
      {
                    value: '杭城',
                    html: '<img src="https://avatars0.githubusercontent.com/u/970828?s=60&v=4"/> 杭城',
                  }]
            },
    
    1 回复
  • mywing
    支持者 订阅者 作者

    请问关键字可以懒加载吗?

    1 回复
  • Vanessa
    订阅者

    可能会比较麻烦,可参考以下代码

    {
    	key: "{{",
    	hint: (key) => {
    		this.send("searchtemplate", {
    			k: key,
                                    url: this.url,
                                });
                                return [];
                            },
    }
    
    this.vditore.vditor.hint.genHTML(dataList, data.k, this.vditore.vditor);
    
    2 回复
  • mywing
    支持者 订阅者 作者

    收到,这样就 OK 啦!感谢感谢!!!

  • mywing 1 评论
    支持者 订阅者 作者

    不知道算不算 bug ,在 ir 模式下通过自定义标签插入 md 代码,编辑器没有实时渲染。移动光标也不会正确渲染,而按下回车或键入字符时,会渲染。如下:

    {
        key: '#',
        hint: (key) => {
            if ('vditor'.indexOf(key.toLocaleLowerCase()) > -1) {
                return [
                    {
                        value: '[链滴](https://ld246.com/)',      /* 这里要插入的为md链接🎉  */
                        html: '#Vditor  一款浏览器端的 Markdown 编辑器',
                    }]
            }
            return []
        },
    }
    

    在编辑器中输入关键字 # 并选择列表中的选项后,编辑器状态如下:

    image.png

    image.png

    此时移动光标不会正确渲染,而按下回车或键入字符时,会渲染。

    image.png

    1 操作
    mywing 在 2021-01-18 13:11:36 更新了该回帖
    Vanessa