首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

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

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

代码语言:txt
复制
gem 'trix'
gem 'trix_attachments'

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

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

代码语言:txt
复制
<%= form.rich_text_area :content, id: 'trix-editor' %>
<%= form.hidden_field :content, id: 'trix-editor-content' %>

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

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

代码语言:txt
复制
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 富文本编辑器

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

13个顶级免费所见即所得文本编辑器工具

它有很多功能,添加链接,图像,视频或添加代码片段的内容…关于Quill,我最喜欢的一点是它的简单设置和显示,可以在多设备屏幕上的所有现代的、响应迅速的web浏览器上显示,还有使用它的常见问题的详细说明...[https://quilljs.com/] Trix Trix是一个开源的编辑器,可以让你在Web轻松地撰写消息、写评论、写帖子......,并被良好编程的平板电脑使用。...有很多工具我很喜欢它是自动转换不合适的HTML标签率,自动分析内容从Word, PDF,显示内容为HTML… [http://wysihtml.com/] ContentTools ContentTools...我还发现了如何设置,添加或删除程序的函数的文章…都是非常细致的。...另外它对程序员在使用程序的过程遇到的每一个常见问题都有极其详细的实例。但是,它也有一个缺点,当你将其用于商业目的必须购买许可证。 [https://imperavi.com/redactor/]

5.9K00
  • Web 开发的新标杆!7 个 JavaScript One-Liners 改变您的编程方式

    我记得第一次看到 Ruby on Rails 的演示的情景。演示者花费很少的精力就创建了一个可用于实际业务目的的全栈 Web 应用程序。...接下来,我选择了一个身份验证源:添加描述登录后,我使用仪表板的“创建小程序”按钮创建一个新小程序:添加描述系统会生成一个唯一的名称,但可以更改该名称以更好地识别您的用例。...添加描述我从 CRUD 模板开始,因为它提供了一个可靠的示例,说明常见的创建、查看、更新和删除流程如何在 Zipper 平台上工作。...创建代码后,屏幕显示如下:添加描述有了功能齐全的小程序,我们现在可以更新代码以满足 HOA 选票的使用要求。...单击该链接将运行该main.ts文件并传入电子邮件参数,从而避免注册选民必须输入其电子邮件地址。 选票如下图所示:添加描述我决定投票给候选人 B。

    14140

    何在CentOS 6.5上使用 Nginx+Passenger 部署Railes应用程序

    本文的主题是Rails,以及如何在线获取基于Ruby On Rail的 Web应用程序 - 这是最简单,最快捷的方式。...使用Ruby编程语言和Rails Web应用程序开发框架开始使用您的应用程序之后,当需要与世界其他地方共享您的应用程序时,可能会出现无数可能的组合。...注意:部署过程,建议您查看并阅读所提供链接的内容。它们将帮助您提高性能、安全性等。 目录 1....准备部署应用程序 创建示例应用程序/上传源代码 创建Nginx管理脚本 配置Nginx Web应用程序部署,服务器及其角色 在部署Web应用程序或将其置于联机状态,通常会有多层应用程序用于此目的。...注意:本节是我们专门的文章如何在CentOS 6.5上安装Ruby 2.1.0的摘要。

    5K20

    何在Ubuntu 14.04上使用MySQL和Ruby on Rails应用程序

    本教程将向您展示如何在Ubuntu 14.04服务器上设置开发Ruby on Rails环境,以允许您的应用程序使用MySQL数据库。首先,我们将介绍如何安装MySQL和MySQL适配器gem。...创建新的Rails应用程序 在主目录创建一个新的Rails应用程序。...在您喜欢的文本编辑器打开应用程序的数据库配置文件。我们将使用vi: vi config/database.yml 在该default部分下,找到显示“password:”的行,并将密码添加到其末尾。...如果您的Rails应用程序位于远程服务器上,并且您希望通过Web浏览器访问它,则一种简单的方法是将其绑定到服务器的公共IP地址。...IP地址在Web浏览器访问您的Rails应用程序: http://server_public_IP:3000 如果您看到“欢迎登陆”Ruby on Rails页面,您的应用程序已正确配置,并连接到MySQL

    4.9K00

    编程必备,程序员应该都知道的7款文本编辑器

    ,曾经是 Ruby on Rails 开发人员默认使用的,原因就在于他们主要都在使用 Mac OS 系统。...由于加载项可以使用 Web 技术构建,很多人都把自定义插件添加到 Atom.io 文本编辑器上。这也实属正常,毕竟是在 Github 上写的,本身就具有很强的 Git 整合性。...Atom 在最后提交之前的所有更改都会以不同的颜色显示在导航窗格。...如下图左侧橙色部分显示: Atom 还有基本上你可以想象的任何东西的插件,它确实很优秀,但由于基于 web 技术开发的原因,它通常需要几秒钟来启动。...Notepad ++ 内置多种语法高亮显示,支持自定义语言; 可自动检测文件类型,根据关键字显示节点。同时,还提供数个特色功能,邻行互换位置、宏功能等等。

    2.3K10

    使用SSH隧道保护三层Rails应用程序的通信

    在Ruby on Rails应用程序,它可以轻易地映射到表示层的Web服务器,应用程序层的Rails服务器和数据层的数据库。...想要了解如何配置Nginx的同学,可以参考这篇教程《如何在Ubuntu 16.04安装Linux,Nginx,MySQL,PHP(LNMP堆栈)》。...使用Puma部署Rails应用程序。请注意,在安装rbenv-vars插件部分,必须设置数据库用户和密码以反映在 数据库服务器 上安装PostgreSQL使用的值。...在完成此步骤,请考虑三层结构,金字塔结构,底部是 数据库服务器 ,中间是 app-server ,顶部是 Web服务器 。...@web-server$ cd /etc/nginx/sites-enabled 在sites-enabled目录创建您刚刚在sites-available目录创建的文件的符号链接: sammy@web-server

    5.7K30

    用selenium自动化验收测试

    测试用例实例 执行 清单 2 的测试脚本,它将执行以下操作: 通过进入 /change_address_form.html 打开变更地址页面。...回页首 现实的需求 在接下来的两节(现实的需求 和 现实的用例),我将描述如何在现实场景中使用 Selenium,并针对用 Ruby on Rails 和一点儿 Ajax 技术编写的一个简单的股票报价查看器应用程序编写...在 J2EE Web 应用程序,可以将 selenium 文件夹放在 Web 应用程序的根目录或 WAR 归档文件。 最后一步是下载示例应用程序。从 下载 小节获得这个包。...应该看到 Rails 成功启动了, 图 1 所示。 图 1. 从命令提示符下运行 Ruby on Rails 回页首 现实的用例 在本节,我将列出示例应用程序的用例。...退出用例 所有测试都被添加到 图 6 左侧显示的缺省测试套件。 图 6.

    6.2K30

    如何部署Mina:入门教程

    RAKE - Ruby Make Web开发人员,程序员以及任何与科学或计算机打交道的人都应该很好地理解他们使用的工具。在Mina的案例,RAKE最为关键。 但是,什么是RAKE?...获取Mina 使用Mina,您需要确保拥有一个稳定的Ruby环境,并且安装了必要的依赖项并且运行正常 - 例如gem。 在本节,我们将首先在CentOS 6系统上创建Ruby环境。...在官方CentOS存储库找不到一些方便的库和软件包(例如libyaml-devel,nginx等)。 为简化操作而不处理手动安装,我们将为YUM包管理器添加EPEL软件存储库以供使用。...运行以下命令下载并安装Mina: gem install mina 使用Mina 在将mina引入项目,首先需要在项目目录启动mina。...应用程序 关于Rails应用程序部署示例,请参考:“如何在CentOS 6.5上使用Unicorn和Nginx部署Rails应用程序”。

    4.5K40

    何在Ubuntu 18.04上使用rbenv安装Ruby on Rails

    介绍 Ruby on Rails是创建网站和Web应用程序的开发人员最受欢迎的应用程序堆栈之一。Ruby编程语言与Rails开发框架相结合,使应用程序开发变得简单。...将rbenv存储库从GitHub克隆到目录~/.rbenv: git clone https://github.com/rbenv/rbenv.git ~/.rbenv 接下来,添加~/.rbenv/...每当你安装新版本的Ruby或提供命令的gem(Rails,你应该运行: rbenv rehash 使用以下命令打印其版本,验证是否已正确安装Railsrails -v 如果安装正确,您将看到已安装的...Rails版本: Rails 5.2.0 此时,您可以开始测试Ruby on Rails安装并开始开发Web应用程序。...第六步 - 卸载Ruby版本 当您下载其他版本的Ruby,您可能会累积比~/.rbenv/versions目录更多的版本。

    6.3K50

    COS控制台进阶 - 文件预览和在线编辑

    前不久,微软发布了 vscode for web 的公告,是基于web的在线代码编辑器,无需下载安装可以直接在web浏览器运行,同时支持断点调试、版本管理、团队开发等功能。...在腾讯云 COS 控制台,选择存储桶进入文件列表页,点击右上角“在线编辑器”链接,即可跳转到 COSBrowser Web版编辑当前文件夹的文件。...快捷方式一:按键盘快捷键进入编辑 如果你觉得这样的方式太过于平庸,不适合Geek的你,我们还准备了更炫酷的功能给你,当你浏览COS控制台文件列表,只需要点击键盘上的 ....键,即可进入在线编辑器,如下图: 快捷方式二:修改url地址进入编辑 你也可以通过修改文件列表的url来达到这个目的,将 url 的 /bucket 改为 /dev, https://console.cloud.tencent.com...三、如何在自己的网站实现 (一)文档预览 除了浏览器自身显示的文件,COS 针对 docx、xlsx、pptx 等复杂文档文件,推出了文档预览功能,开发者只要在控制台开启文档预览功能,在对象的访问URL

    2.2K20

    CDN 适合您的 Rails 应用程序吗?适合大规模应用吗?

    当用户从您的应用程序请求网页,CDN 将从距离用户最近的服务器提供资产,从而减少交付内容所需的时间。 ---- 为什么要使用 CDN?...---- 如何在 Rails 中使用 CDN 如果您决定在 Rails 7 应用程序中使用 CDN,您可以通过将 Web 服务器配置为从 CDN 服务器提供静态资产来实现。...配置资产主机 在您的config/application.rb文件,您可以将 设置config.asset_host variable为 CDN 的 URL。...配置 Rails 为资产提供服务 如果您使用默认的 Rails 资产管道,则需要修改 Web 服务器的配置以从 CDN 的服务器为您的资产提供服务。...如果您使用的是 Nginx 或 Apache 之类的 Web 服务器,则可以通过添加以下配置将其配置为从 CDN 提供资源: location ~ ^/assets/ { expires 1y;

    17330

    在CVM上使用rbenv安装RoR

    简介 Ruby on Rails(官方简称为Rails,亦被简称为RoR),是一个使用Ruby语言写的开源Web应用框架,它是严格按照MVC结构开发的。...它努力使自身保持简单,来使实际的应用开发的代码更少,使用最少的配置。 其通过使用Ruby编程语言结合Rails开发框架,可以简化应用程序开发。...然后我们可以安装特定版本,4.2.7: gem search '^rails$' --all gem install rails -v 4.2.7 rbenv的工作原理是创建一个shims目录,它指向当前启用的...完成后,使用apt-get安装Node.Js: sudo apt-get install -y nodejs 您可以开始测试Ruby on Rails并开始开发Web应用程序。...卸载Ruby版本 当您下载更多版本的Ruby,~/.rbenv/versions目录可能会有很多残留文件。 使用ruby-build插件子命令自动执行删除。

    3.7K80

    gitlab配置邮箱服务器

    GitLab是一个非常流行的基于Web的Git仓库管理工具,可以用于团队协作和版本控制。在GitLab,可以使用电子邮件来进行通知、邀请等操作。...为了使用这些功能,您需要在GitLab配置一个可用的邮箱服务器。在本文中,我将介绍如何在GitLab配置电子邮件服务器。...例如,如果您的SMTP服务器地址是smtp.example.com,端口号是465,协议是SMTPS,则应该将以下行添加到配置文件:gitlab_rails['smtp_address'] = "smtp.example.com"gitlab_rails...例如,如果您的电子邮件地址是yourname@example.com,则应该将以下行添加到配置文件:gitlab_rails['gitlab_email_from'] = "yourname@example.com...您还可以尝试使用其他电子邮件客户端,Outlook或Thunderbird,来测试您的SMTP服务器是否可用。

    7K31

    何在Ubuntu上使用Passenger安装Rails和nginx

    介绍 Ruby on RailsWeb开发人员提供了一个快速创建各种Web应用程序的框架,而nginx是一个轻量级的高性能Web服务器软件。...通过Phusion Passenger安装,可以轻松配置这两个程序,以便在服务器上协同工作。 您可以作为具有sudo权限的用户在Ubuntu服务器上运行本教程。...您可以看到这些内容: rvm requirements 在RVM向您显示的文本,请查找此段落。...在这个例子,我们将运行nginx安装。 安装Ruby on Rails后,继续安装passenger。...完成后,它将告诉您有关对nginx配置文件所做的更改以及如何在虚拟服务器上部署Ruby on Rails应用程序。 最后一步是启动nginx,因为它不会自动执行。

    3.6K40

    Compilify——让你在浏览器编译.NET代码

    我也喜欢学习其他语言,对Ruby on Rails、node.js、以及F#都略懂一二。 InfoQ:你最近启动了Compilify项目——请解释一下其用途何在?...Web服务器使用SignalR连接ID将接收到的代码打包成对象,然后将其添加到位于我的Redis服务器上的处理队列。从而释放Web服务器,以便继续处理来自其他用户的请求。...任何错误都会返回给客户端,并显示给用户。 InfoQ:粗算一下,你花了多少时间或精力来构建此项目? Justin: 在推出Compilify之前,我在此项目上工作了一周半的时间。...直到用户为了运行代码点击链接以前,我都无需推送消息到客户端。而且一旦执行结果被推送到客户端,也就无需保持连接的开启状态。自从我按需开启连接之后,服务的负载便随之急剧下降。...通过微软的“Roslyn”CTP(即Community Technology Preview,社区技术预览版)版可预览新的语言对象模型,该模型用于代码生成、分析和重构,还有即将到来的脚本支持、及C#与VB

    1.3K80

    使用 Docker 和 Traefik 搭建 GitLab (前篇)

    ${DOMAIN} 使用浏览器访问一些仓库的预览页面(类似 GitHub Page) 那么我们可以这样配置: labels: - "traefik.enable=true" # GitLab Web...前文提到,如果我们不想使用 Traefik 进行响应头的修改,那么该如何在 GitLab 中进行配置呢,也很简单,多添加一个 proxy_set_headers 的配置即可: nginx['proxy_set_headers...前端提到了,我们要同时提供 Web 访问、容器仓库、页面预览三个功能,所以配置还需要加上其他两项。...仓库访问地址显得更美观了,避免了用户使用软件过程需要解决的额外问题。 使用编排文件,将 GitLab 端口映射到宿主机。...完整的配置文件 比较重要的细节都讲完了,这里给出完整的配置参考(容器仓库和页面预览服务的响应头有删减,有需求可以自行添加): version: '3' services: gitlab:

    1.3K20
    领券