标签: trix

我正在尝试在 React 中构建自定义粘贴事件。我有一个问题，如果我使用 React 事件，则会event.preventDefault()在默认操作发生后运行。

这是代码：

render() {
return (
  <div
  className='compositionText'
  onPasteCapture={this.handlePaste}>
  </div>
);
}

我已经成功地对 DOM 事件侦听器执行了相同的操作：

componentDidMount() {
this.getDOMNode().addEventListener('paste', this.handlePaste, true);
},

谁能告诉我为什么第一个解决方案不起作用以及如何以 React 方式实现这一目标？

更新：我想补充一点，我正在该 div 中使用 Trix 编辑器（如果这会改变任何内容）。

我正在尝试为我的角度应用程序使用Trix编辑器。但是，我没有任何资源/ npm软件包来在angular 2应用中安装trix编辑器。您能为我提供所需的资源/步骤吗？

有没有简便的方法可以从Trix工具栏中删除“降低水平”和“升高水平”按钮？

现在，我可以通过使用以下haml简单地渲染自定义工具栏（不包含令人讨厌的按钮）来实现此目的：

%trix-toolbar#trix-toolbar-1
  .trix-button-row
    %span.trix-button-group.trix-button-group--text-tools{"data-trix-button-group" => "text-tools"}
      %button.trix-button.trix-button--icon.trix-button--icon-bold{"data-trix-attribute" => "bold", "data-trix-key" => "b", :tabindex => "-1", :title => "Bold", :type => "button"} Bold
      %button.trix-button.trix-button--icon.trix-button--icon-italic{"data-trix-attribute" => "italic", "data-trix-key" => "i", :tabindex => "-1", :title => "Italic", :type => "button"} Italic
      %button.trix-button.trix-button--icon.trix-button--icon-link.trix-active{"data-trix-action" => "link", "data-trix-active" => "", "data-trix-attribute" => "href", "data-trix-key" => "k", :tabindex => "-1", :title => "Link", :type => "button"} Link
    %span.trix-button-group.trix-button-group--block-tools{"data-trix-button-group" => "block-tools"}
      %button.trix-button.trix-button--icon.trix-button--icon-heading-1{"data-trix-attribute" => "heading1", :tabindex => "-1", :title => "Heading", :type => "button"} Heading
      %button.trix-button.trix-button--icon.trix-button--icon-quote{"data-trix-attribute" => "quote", …

将 Trix 编辑器内容与 Livewire 连接在一起时，我遇到了问题。我认为问题在于当 Livewire 从 Trix 接收内容时，内容会被换出并且 Trix 被禁用。有没有更好的办法？

我所做的，有效的，如下。目前，页面被重定向到自身以重新启动 Trix（击败了 Livewire 的全部要点，但它也被用于其他事情）。

<div>
  <input
      id="newCommentTextTrixContent"
      type="hidden"
      wire:model="newCommentText"
  >

  <trix-editor
      id="newCommentTextTrixEditor"
      input="newCommentTextTrixContent"
  ></trix-editor>


  <button wire:click="addComment(document.getElementById('newCommentTextTrixEditor').innerHTML)">Add Comment</button>
</div>

我试过了

• 隐藏输入上的线：模型 - 没有任何反应
• x-on:trix-change="$set('comment', $event.target.innerHTML) -- 这有效，但 Trix 在第一次按键后变灰并停止工作（重启问题？）

我敢肯定像后者这样的东西更好，但是每次都以某种方式重新启动 Trix。这一切似乎有点混乱 - 所以问题是，这样做的正确方法是什么？

我使用Trix Editor在我的表单中使用WISIWIG.我想用RSpec和Capybara进行测试,但trix-editor将该字段隐藏起来.

<div class="form-group">
  <trix-editor class="formatted_content form-control" placeholder="Description" input="annonce_ad_body_trix_input_annonce_ad"></trix-editor><input type="hidden" name="annonce_ad[body]" id="annonce_ad_body_trix_input_annonce_ad" />
</div>

我需要知道如何用Capybara填充这个隐藏的区域来让我的测试通过.我试过这些尝试:

fill_in "annonce_ad[body]", with: "my value"
find(:css, 'trix-editor').set("New text")
find("trix-editor", visible: false).set("my value")
find(:xpath, "//input[@id='annonce_ad_body_trix_input_annonce_ad']", visible: false).set "my value"
find(:xpath, "//*[@id='annonce_ad_body_trix_input_annonce_ad']", visible: false).set("value")
first('input#annonce_ad_body_trix_input_annonce_ad.class', visible: false).set("your value")

这些都不适合我.在这种情况下,有人知道如何填充我的身体(使用trix)？

如何使我在 Trix (ActionText) 编辑器中添加的链接在新窗口中使用 target="_blank" 打开链接？

class Post < ApplicationRecord
  has_rich_text :rich_text_content
end

我正在使用 trix 编辑器，例如 <%= f.trix_editor :body, class: 'trix-content form-control', rows: 15 %>

目前按钮是黑色的，显然是英文翻译（以及替代文本）。

我应该如何更改按钮的颜色？我尝试过的一切似乎都不起作用。

有没有办法提供德语翻译？我需要我的完整申请完全是德语。

此致

我似乎无法在任何地方找到它 - 控制台显示该字段，nil但实际上操作文本正在存储可能为“空白”的内容。

MyModel.rich_text_field.nil？无论实际内容是否为空，都返回 false。

我正在尝试将富文本编辑器合并到我的应用程序中，但运气不佳。我本来打算使用 CKEditor，但发现 Rails 6 的 actiontext/trix 集成得很好……或者我是这么想的。

我遵循了https://edgeguides.rubyonrails.org/action_text_overview.html 中的标准安装步骤

所以，除非我错过了什么，我现在在这些文件中有以下代码：

应用程序/javascript/packs/actiontext.scss

@import "trix/dist/trix";

.trix-content {
  .attachment-gallery {
    > action-text-attachment,
    > .attachment {
      flex: 1 0 33%;
      padding: 0 0.5em;
      max-width: 33%;
    }

    &.attachment-gallery--2,
    &.attachment-gallery--4 {
      > action-text-attachment,
      > .attachment {
        flex-basis: 50%;
        max-width: 50%;
      }
    }
  }

  action-text-attachment {
    .attachment {
      padding: 0 !important;
      max-width: 100% !important;
    }
  }
}

应用程序/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

import $ from 'jquery';
import 'bootstrap/dist/js/bootstrap';

$(document).on('turbolinks:load', function() {
  $('body').tooltip({
    selector: '[data-toggle="tooltip"]',
    container: …

我正在SimpleForm 5.0.2与 ActionText 一起使用。

我希望表单的主体字段为多行（比如 10 行），但我不知道如何让它工作。

这是我目前的尝试：

<%= f.rich_text_area :body, class: 'form-control', name: "article-text", input_html: { rows: 10 }, placeholder: "Enter your article body here..." %>

这会生成以下 HTML：

<trix-editor class="form-control" input_html="{:rows=>10}" placeholder="Enter your article body here..." id="article_body" input="article_body_trix_input_article" data-direct-upload-url="http://localhost:3000/rails/active_storage/direct_uploads" data-blob-url-template="http://localhost:3000/rails/active_storage/blobs/:signed_id/:filename" contenteditable="" role="textbox" trix-id="1" toolbar="trix-toolbar-1"></trix-editor>

看起来像这样：

请注意，我还尝试了各种迭代input_html:，包括但不限于：

<%= ... input_html: { 'rows': '10' } ... %>

<%= ... input_html: { rows: "10" } ... %>

一切都无济于事。

我怎样才能让它发挥作用？

我正在使用 Ubuntu 18 开发Rails 6 应用程序。

我刚刚为 Trix 编辑器安装了ActionText（所见即所得），这样我就可以将文本保存到可由管理员修改的数据库中，但是，当我使用Trix编辑器添加图像时，如果我不这样做t 指定图像的标题，它将图像的名称和大小显示为标题