tinyMCE - 防止在一个页面上使用原始 id 作为名称/多个实例

Posted

技术标签:

【中文标题】tinyMCE - 防止在一个页面上使用原始 id 作为名称/多个实例【英文标题】:tinyMCE - prevent use of original id as name / multiple instances on one page 【发布时间】:2022-01-04 10:48:34 【问题描述】:

在tinymce的初始化过程中,我可以阻止它使用原始输入id作为它创建的输入中的name吗?

我需要在单个页面上使用多个 tinymce 实例(我在 Ruby on Rails 部署中通过部分加载单独的编辑表单)。我有多个表单,每个表单都有 article[title]article[body] 输入。如果我给出这些唯一的id,那么 tinymce 会按预期工作(即article-title-2,其中 2 是唯一的活动记录 ID)。如果我尝试使用不是 id 的唯一属性来选择元素,那么它无法在第一个字段之后加载 tinymce 输入。

tinyMCE.init(
  selector: '#article-title-<%= @article.id %>',
  ...
  ...

问题在于,在提交时,id 已被用作name 属性,从而阻止了 RoR 将该字段识别为文章的属性。它提交:

"article-title-2" => "title text" 

而不是

"article" =>  "title" => "title text"

感谢大家的帮助。

【问题讨论】:

【参考方案1】:

这是我想出的解决方案,但我宁愿不使用这个解决方法。改进我对tinymce 的初始化将比在需要多种形式的每个模型中手动适应这一点要好得多。我将继续感谢任何输入或更好的答案!谢谢

在控制器中,我手动将标题和正文参数分配给update 进程中的记录:

def update

  ...
  @article.title = params["article-title-" + params[:id]]
  @article.body = params["article-body-" + params[:id]]
  ...

end

在创建新文章时,一个页面上也可以有多个新表单,我在控制器操作new 中创建了一个随机id。然后使用表单中的隐藏字段 ( &lt;%= hidden_field_tag(:random_id, @random_id) %&gt;) 提交,以便可以在 create 函数中再次获取它。这是view代码的形式:

<%= simple_form_for @article, remote: true do |f|  %>
  
    <h6 id="article-title-<%= @article.id.nil? ? @random_id : @article.id %>" class="tinymce-inline no-toolbar"><%= @article.title.nil? ? "Article title" : @article.title %></h6>

    <div class="tinymce-inline" id="article-body-<%= @article.id.nil? ? @random_id : @article.id %>" >
          <%= @article.body? ? @article.body.html_safe : "" %>
    </div>

    <%= hidden_field_tag(:random_id, @random_id) %>

    <%= f.submit "Save", id: "submit" %>

<% end %>

为了确保随机 id 是唯一的,我创建了一个随机的 6 个字符的字符串并附加了一个时间戳

def new

  @random_id = ('a'..'z').to_a.shuffle[0,8].join + "-" + Time.now.to_i.to_s
  ...

end

def create
  
  @article = Article.new(article_params)
  @article.title = params["article-title-" + params[:random_id]]
  @article.body = params["article-body-" + params[:random_id]]
  ...

end

【讨论】:

以上是关于tinyMCE - 防止在一个页面上使用原始 id 作为名称/多个实例的主要内容,如果未能解决你的问题,请参考以下文章

TinyMCE 编辑器防止滚动事件冒泡

插入媒体插件时如何防止tinymce删除url源前缀?

在页面调用wp编辑器 tinyMCE以及遇到的问题

用mvc框架中页面 用的 Jquery,在使用dialog是 使用 TinyMce的 图片上传以及富文本编辑器,

使用 data-id 复制 TinyMCE 的内容

Tinymce 和 j 为 null 使用 tinyMCE.execCommand('mceRemoveControl', false, "textarea_id");