Rails:如何在trix中添加链接时显示Web预览

在trix中添加链接时显示Web预览，可以通过使用trix-editor gem和trix_attachments gem来实现。

首先，确保在Gemfile中添加了以下两个gem的引用：

gem 'trix'
gem 'trix_attachments'

然后运行bundle install来安装这两个gem。

接下来，需要在需要使用trix编辑器的视图文件中添加以下代码：

<%= form.rich_text_area :content, id: 'trix-editor' %>
<%= form.hidden_field :content, id: 'trix-editor-content' %>

这将在表单中创建一个trix编辑器，并将内容保存在隐藏字段中。

接下来，在JavaScript文件中，添加以下代码来初始化trix编辑器和处理链接预览：

document.addEventListener('trix-attachment-add', function(event) {
  if (event.attachment.file) {
    var reader = new FileReader();
    reader.onload = function(event) {
      var imageUrl = event.target.result;
      var href = prompt('Enter the URL:');
      var attachment = new Trix.Attachment({
        content: `<a href="${href}" target="_blank"><img src="${imageUrl}" /></a>`
      });
      event.attachment.setAttributes(attachment);
    };
    reader.readAsDataURL(event.attachment.file);
  }
});

这段代码会在用户添加附件时触发，并通过FileReader读取附件的内容。然后，会弹出一个对话框要求用户输入链接的URL。最后，将链接和附件的内容结合起来，并设置给附件。

至此，当用户在trix编辑器中添加链接时，会显示一个Web预览。

关于Rails中trix的更多信息和用法，可以参考腾讯云的富文本编辑器产品介绍页面：Tencent Cloud 富文本编辑器。