rails 集成wangEditor编辑器

来源：互联网发布：互盾数据恢复软件安卓编辑：程序博客网时间：2024/06/06 07:18

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  endend

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: "内容"%>

阅读全文

'); })();