rails 集成wangEditor编辑器

最新推荐文章于 2018-11-21 11:32:28 发布

原创最新推荐文章于 2018-11-21 11:32:28 发布 · 335 阅读

1 ·

CC 4.0 BY-SA版权

ruby on rails 专栏收录该内容

59 篇文章

订阅专栏

本文介绍了一种在Ruby on Rails应用中集成WangEditor富文本编辑器的方法。通过定义自定义表单构建器，实现了编辑器的无缝集成，并利用JavaScript进行实时内容同步。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

rails集成

class JxcatFormBuilder < SimpleForm::FormBuilder
  delegate :content_tag, :link_to, :icon, :safe_join, :raw, to: :@template


  def wangeditor_picker(attribute_name, options = {})
    input(attribute_name, options) do
      content_tag :div, class: 'wangeditor-picker', data: options[:data] do
        value = object.send(attribute_name)
        input_tag = content_tag :div,
                      raw(value),
                      id: 'editor',
                      class: 'wangeditor-picker-box'

        
        hidden = hidden_field attribute_name, class: 'wangeditor-picker-field', id: 'editor_field', value: value
        
        [input_tag, hidden].join&.html_safe
      end
    end
  end
end

js集成

if ($('#editor').length > 0) {
    const wangEditor = window.wangEditor
    const editor = new wangEditor(document.getElementById('editor'))
    editor.config.zIndex = 50
    editor.config.customUpload = true
    editor.config.uploadImgServer = '/api/detail_uploads'
    // $('#editor_field').val(html)
    editor.create()
    editor.onchange = () => {
      $('#editor_field').val(editor.$txt.html())
    }
  }

使用：

<%= f.wangeditor_picker :content, label: "内容"%>