用于 Composer 的 JavaScript Hook

开发
1

你好，
我之前发过一篇帖子，但没有任何回复，可能是因为我的需求描述得太具体了。所以我想再试一次：我希望能够挂钩到撰写编辑器，当用户输入特定字符序列（例如 --）后跟一个查询词时，弹出一个显示搜索结果的弹窗。一旦用户点击其中一个结果，就在原来输入查询词的位置插入一个普通链接。请问，访问撰写编辑器组件并在用户撰写帖子时通知我的插件的最佳实践是什么？我查看了插件 API 以及 GitHub 上的一些插件，但没找到好的示例。
此致
Alexander

1 个赞
2

我怀疑您想参考一个现有的示例。

我认为可以查看的地方是：discourse/app/assets/javascripts/discourse/components/d-editor.js.es6 at f62b8990acb9ce4af8bfc67fc80dc0847177e458 · discourse/discourse · GitHub

具体代码如下：

  didInsertElement() {
    this._super(...arguments);

    const $editorInput = $(this.element.querySelector(".d-editor-input"));
    this._applyEmojiAutocomplete($editorInput);
    this._applyCategoryHashtagAutocomplete($editorInput);

另外，也许可以看看：

  _applyCategoryHashtagAutocomplete() {
    const siteSettings = this.siteSettings;

    $(this.element.querySelector(".d-editor-input")).autocomplete({
      template: findRawTemplate("category-tag-autocomplete"),
      key: "#",
      afterComplete: () => this._focusTextArea(),
      transformComplete: obj => {
        return obj.text;
      },
      dataSource: term => {
        if (term.match(/\s/)) {
          return null;
        }
        return searchCategoryTag(term, siteSettings);
      },
      triggerRule: (textarea, opts) => {
        return categoryHashtagTriggerRule(textarea, opts);
      }
    });
  },

注意：我自己尚未实际使用过此功能，但这只是我的猜测。

1 个赞
3

你好 @merefield，
非常感谢，这已经很有帮助了。请问初始化它的最佳位置在哪里？我是否应该在插件的初始化函数中检查 .d-editor-input 元素是否存在，并据此进行挂钩，还是有一个地方可以将插件注册为撰写视图的扩展，这样它只在用户实际打开撰写器时才会加载？
此致
Alexander

4

这是一个组件，因此您需要在初始化器中重写 didInsertElement() 方法。

示例：

withPluginApi('0.8.12', (api) => {

      api.modifyClass('component:load-more'

来源：https://github.com/paviliondev/discourse-topic-previews/blob/master/assets/javascripts/discourse/initializers/preview-edits.js.es6

如果运气好，您只需调用 this._super();，然后在末尾附加您的额外逻辑即可。

3 个赞
5

完美！非常感谢。我想这就解决问题了。

1 个赞