文本编辑器

Question

我目前正在使用内容可编辑和RoR后端构建文本编辑器。由于编辑器是WYSIWYG并试图跟踪used，我只使用了一个文件对3个动作:显示，编辑和新。

编辑和新将基本上是一样的，然而，显示不会是可编辑的，如果它是空的，也不会显示字幕。我是通过JavaScript做的，但我觉得不太对，所以我决定使用rails。

这是最后的结果。0 Javascript，所有rails。它现在起作用了，但还不干。有很多重复的条件。

如何才能使这些代码更加枯燥和可读性更强呢？

%section#text-editor-container
  %article#new-text 
    %section#text-header.new-text-container.row{style: ("background: url('#{@text.text_images.last.photo.url}') center center no-repeat transparent; background-size: cover;" unless @text.text_images.empty?)}
      - if (current_page?(edit_text_url(@text)) || current_page?(new_text_url))
        .picture-icon.hidden-xs.col-sm-1.col-md-1.col-lg-1
          = render 'direct_upload', callback: text_cover_url
      %h1#title.col-xs-12.col-sm-11.col-md-11.col-lg-11.placeholdify{class: ('editable' if current_page?(edit_text_url(@text)) || current_page?(new_text_url)), contenteditable: (true if current_page?(edit_text_url(@text)) || current_page?(new_text_url)), data: {placeholder: t(:title)}}= raw(@text.title) unless @text.title.nil?
      - if (((@text.subtitle.nil? || @text.subtitle.empty?) && (current_page?(edit_text_url(@text)) || current_page?(new_text_url))) || !@text.subtitle.empty?)
        %h2#subtitle.col-xs-12.col-sm-11.col-md-11.col-lg-11.placeholdify{class: ('editable' if current_page?(edit_text_url(@text)) || current_page?(new_text_url)), contenteditable: (true if current_page?(edit_text_url(@text)) || current_page?(new_text_url)), data: {placeholder: t(:sub_title)}}= raw(@text.subtitle) unless @text.subtitle.nil?
    %section#text-commands-bar.new-text-container
      -if @text.is_draft
        %span.pull-left= t(:text_still_draft)
      %ul.pull-right.options
        - if (current_page?(new_text_url) || current_page?(edit_text_url(@text)))
          %li.drop_down_menu#menu_categoria.text-center
            = select("text", "category_id", Category.all.collect { |c| [t(c.locale_key.to_sym), c.id]}, {include_blank: t(:select_cat)})
          %li.drop_down_menu#menu_lingua.text-center
            = select("text", "language_id", Language.all.collect { |l| [l.name, l.id] }, {include_blank: t(:select_lan)})
          %li
            %button#publish= t(:publish)
          %li.drop_down_menu#menu_salvar.text-center
            = link_to t(:save_draft), @text, class: 'btn'
        - elsif (!current_page?(new_text_url) && !current_page?(edit_text_url(@text))) && (!@current_user.nil? && @current_user.id == @text.user_id)
          %li 
            = link_to '', edit_text_path(@text), class: 'btn icon-editor edit-icon'
          %li 
            = link_to '', text_path(@text), method: :delete , data: {confirm: t(:exclusion_confirm)},class: 'btn icon-editor delete-icon'

    %section#text-body.new-text-container
      %p#text.placeholdify{class: ('editable' if current_page?(edit_text_url(@text)) || current_page?(new_text_url)),contenteditable: (true if current_page?(edit_text_url(@text)) || current_page?(new_text_url)), data: {placeholder: t(:new_text)}}= @text.description.html_safe unless @text.description.nil?
= hidden_field_tag 'my_text', @text.id

Answer 1

在这种情况下，我通常会考虑两件事：

使用自定义帮助程序和部分

这里的想法是在小组件中分解视图，并有一个助手来构建每个组件。大多数情况下，这些助理员只会发出一个适当的部分，并提供适当的部分：

def wysiwyg_title(text_object)
  if text_object.persisted?
    render 'components/wysiwyg/title/persisted', text: text_object
  else
    render 'components/wysiwyg/title/new_record', text: text_object
  end
end

有时，你也可以通过使用只影响标签部分的“和平”助手来把它弄干一点：

def wysiwyg_container_classes(text_object)
  classes = ['wysiwyg_container']
  classes << 'wysiwyg_container--draft' unless text_object.persisted?
  classes     
end

(像这样使用它：)

= content_tag :div, class: wysiwyg_container_classes(@text)

诸若此类。你得到了灵魂。

使用演示程序

另一种选择是使用演示者模式。例如，德雷珀宝石使它变得容易。

这里的想法是，与其将模型直接传递到视图，不如用适当的演示者来装饰它。例如，您将拥有一个可编辑视图的演示程序和一个静态视图的演示程序。每个演示者都将拥有诸如title、container等方法，这些方法知道如何呈现视图的组件、格式化值等--您的实际视图将只是排列组件的布局。

由于演示者是对象，您可以自由地使用继承/组合/委托来共享一些逻辑，这通常有助于DRYing代码，同时保持代码的清晰和可读性。