@mentions for Users with ActionText; 使用Tribute.js库

git clone从https://github.com/chentianwei411/at-mentions-with-action-text

 

先fork下来，然后拷贝https连接，最后在terminal上：

git clone https://github.com/chenwei/at-mentions-with-action-text.git

然后因为ruby 和 rails版本。使用命令：

rvm 2.6.1@railsXXX版本 
#简单的集合命令，详细看之前的相关博客。

根据提示安装bundler和yarn更新。

10821  gem install bundler:2.0.1
10822  bundle update
10828  yarn install --check-files

 

最后rails db:migrate并rails s启动服务器localhost:3000

 

---

rails6.1后: Module#parent_name帮助方法被替换：

    # config.application_name = Rails.application.class.parent_name
    config.application_name = Rails.application.class.module_parent_name

 

---

 

 

实做@mention功能

使用tribute库来实现@mention功能，支持Vue。

参考https://zurb.github.io/tribute/example/案例，在输入框输入@可以显示人名的下拉列表。

 

trix文本编辑器已经被集成到新版本。

使用stimulus.js增加JavaScript脚本。

rails webpacker:install:stimulus

 

然后下载ZURB tribute javascript library。这里使用yarn,也可以用gem 'tribute'

https://github.com/zurb/tribute

这是用ES6写的@mention引擎。无需依赖dependencies。跨浏览器。

yarn add tributejs

 

按照路径->controller->view思路：

routes.rb内添加：

resources :mentions, only: [:index]

目的是点击这个url来自动获取users。然后就可以动态地load. json格式的user数据。👇

 

创建 controllers mentions controller

class MentionsController < ApplicationController
  def index
    @users = User.all

    respond_to do |format|
      format.json
    end
  end
end

⚠️，演示是取全部的user，实际上线版本只取一般前10个用户名字。

 

创建views/mentions/index.json.jbuilder

json.array! @users, partial: "users/users", as: :user

 

得到一个array of users, 然后返回partial, 数据名字是user。

 

创建app/views/users/_user.json.jbuilder

#从user提取它们的id , name
json.extract! user, :id, :name

json.sgid user.attachable_sgid
json.content render(partial: "users/user", locals: {user: user}, format: [:html])

 

解释：

1. json.sgid user.attachable_sgid

需要在modles/User.rb内include一个模块,以便使用方便的方法, 👆的user.attachable_sgid。

include ActionText::Attachable

2. json.conent。 渲染views/users/_user.html.erb，传入数据user，格式是html。

 

创建views/users/_user.html.erb

<span class="mention">
  <%= image_tag gravatar_image_url(user.email, size: 40), height: 20, width: 20, class: "rounded" %>
  <%= user.name %>
</span> 

1. 启动服务器
2. localhost:3000/mentions.json可以看到从数据库取得的用户数据和渲染的视图代码。

 

下一步：修改post表格，在rich text area增加一个controller和target。

即使用Stimulus的data-target来取这个元素。

  <div class="form-group">
    <%= form.label :body %>
    <%= form.rich_text_area :body, class: 'form-control', data: { controller: "mentions", target: "mentions.field" } %>
  </div>

 

创建app/javascript/controllers/mentions_controller.js

import { Controller } from 'stimulus'

export default class extends Controller {
  static targets = ["field"]  #定位到post视图的元素上。

  contect() {
　　this.editor = this.fieldTarget.editor
　　this.initializeTribute()   #初始化tribute
  }
 
  initializeTribute() {
　　...
　}
}

 

为了使用Tribute需要import

...
import Tribute from 'tributejs'
import Trix from 'trix'
... 

 

initializeTribute() {
  this.tribute = new Tribute({
    allowSpaces: true,            #集合中的方法，可以在mentions中有空格
    lookup: 'name',               #集合中的方法，在对象中搜索对应的column(函数或字符串)
    values: this.fetchUsers,      #必须的(required)通过异步函数获得一个数组对象，用于匹配。
  })
  this.tribute.attach(this.fieldTarget)  #把tribute实例连接到元素上。
  ...
}

 

异步函数：fetchUsers

fetchUsers(text, callback) {
   fetch(`/mentions.json?query=${text}`) 
   .then(response => response.json())
   .then(users => callback(users))
   .catch(error => callback([])) 
}    

 

当不需要监听事件了用disconnect来从元素上移除Tribute实例：

  disconnect() {
    this.tribute.detach(this.fieldTarget)
  }

 

 

此时如果在http://localhost:3000/posts/1/edit上尝试，会出现@undefined, 这是因为没有实际 插入value。改用使用事件tribute-replaced。

在initializeTribute()函数内添加

    // 点击后回退一个字符，即去掉@：
    this.tribute.range.pasteHtml = this._pasteHtml.bind(this)
    // 给目标元素添加事件，当完成
    this.fieldTarget.addEventListener("tribute-replaced", this.replaced)

 

添加函数replaced：

这里要参考Trix api文档：https://github.com/basecamp/trix

  replaced(e) {
    console.log(e)
    // 得到事件中的数据
    let mention = e.detail.item.original
    // 创建Trix.Attachment，然后调用insertAttachment方法来插入HTML
    let attachment = new Trix.Attachment({
      sgid: mention.sgid,
      content: mention.content
    })
    this.editor.insertAttachment(attachment)
    // 再插入一个空格，具体见Trix Api.
    this.editor.insertString(" ")
  }

 

添加_pasteHtml函数：

  _pasteHtml(html, startPos, endPos) {
    let position = this.editor.getPosition()
    //2个Trix方法
    this.editor.setSelectedRange([position - endPos, position])
    this.editor.deleteInDirection("backward")
  }

 

一个bug: post更新后，再次编辑，@mention内容不可见。当前解决方法是在user.rb添加：

  def to_trix_content_attachment_partial_path
    to_partial_path
  end 

 

如何使用Tributejs库(见git)

1. 初始化new Tribute({ ... })
2. 把Tribute附加到元素。如input, textarea。 例如：tribute.attach(元素的位置)
3. lookup column。必填项，可以是一个函数。
4. 函数selectTemplate和menuItemTemplate用于存取item object，即当点击选中的项目后，的显示。
5. 事件tribute-replaced。 可以给目标元素绑定这个事件，用于知道何时完成更新目标tribute元素
6. 最后，不需要了，就detach Tribute实例，从元素上分开移除Tribute。使用tribute.detach(元素位置)。这会移除所有的实际监听