Use text_area instead of cktext_area

We're going to change CKEditor to an inline editor, and the "ckeditor"
gem doesn't provide an option to do so.

Since using `cktext_area` would automatically generate a "classic"
iframe CKEditor, we need to use `text_area` and load the editor using
JavaScript. Personally I prefer this option anyway.

Note in the jQuery selector we need to use `textarea.html-area`; using
just `.html-area` would fail if there's an error message associated to
the textarea, since Rails will add the `.html-area` class to the error
message.
This commit is contained in:
Javi Martín
2019-07-10 15:36:01 +02:00
parent 025923ac4e
commit 6ef07f8a54
17 changed files with 49 additions and 32 deletions

View File

@@ -55,6 +55,7 @@
//= require checkbox_toggle
//= require markdown-it
//= require markdown_editor
//= require html_editor
//= require cocoon
//= require answers
//= require questions
@@ -114,6 +115,7 @@ var initialize_modules = function() {
App.SocialShare.initialize();
App.CheckboxToggle.initialize();
App.MarkdownEditor.initialize();
App.HTMLEditor.initialize();
App.LegislationAdmin.initialize();
App.LegislationAllegations.initialize();
App.Legislation.initialize();

View File

@@ -0,0 +1,14 @@
(function() {
"use strict";
App.HTMLEditor = {
initialize: function() {
$("textarea.html-area").each(function() {
if ($(this).hasClass("admin")) {
CKEDITOR.replace(this.name, { language: $("html").attr("lang"), toolbar: "admin", height: 500 });
} else {
CKEDITOR.replace(this.name, { language: $("html").attr("lang") });
}
});
}
};
}).call(this);

View File

@@ -22,9 +22,9 @@
</div>
<div class="ckeditor small-12 column">
<%= translations_form.cktext_area :description,
<%= translations_form.text_area :description,
maxlength: Budget::Investment.description_max_length,
ckeditor: { language: I18n.locale } %>
class: "html-area" %>
</div>
<% end %>

View File

@@ -23,17 +23,19 @@
<%= f.translatable_fields do |translations_form| %>
<div class="small-12 column">
<div class="ckeditor">
<%= translations_form.cktext_area :description,
maxlength: Budget::Phase::DESCRIPTION_MAX_LENGTH,
hint: t("admin.budget_phases.edit.description_help_text") %>
<%= translations_form.text_area :description,
maxlength: Budget::Phase::DESCRIPTION_MAX_LENGTH,
class: "html-area",
hint: t("admin.budget_phases.edit.description_help_text") %>
</div>
</div>
<div class="small-12 column">
<div class="ckeditor">
<%= translations_form.cktext_area :summary,
maxlength: Budget::Phase::SUMMARY_MAX_LENGTH,
hint: t("admin.budget_phases.edit.summary_help_text") %>
<%= translations_form.text_area :summary,
maxlength: Budget::Phase::SUMMARY_MAX_LENGTH,
class: "html-area",
hint: t("admin.budget_phases.edit.summary_help_text") %>
</div>
</div>
<% end %>

View File

@@ -32,7 +32,7 @@
</div>
<div class="ckeditor">
<%= f.cktext_area :description, ckeditor: { language: I18n.locale } %>
<%= f.text_area :description, class: "html-area" %>
</div>
</div>
</div>

View File

@@ -16,10 +16,10 @@
<%= f.translatable_fields do |translations_form| %>
<div class="small-12 column">
<div class="ckeditor">
<%= translations_form.cktext_area :homepage,
language: I18n.locale,
ckeditor: { height: 500, toolbar: "admin" },
hint: t("admin.legislation.processes.form.homepage_description") %>
<%= translations_form.text_area :homepage,
language: I18n.locale,
class: "html-area admin",
hint: t("admin.legislation.processes.form.homepage_description") %>
</div>
</div>
<% end %>

View File

@@ -7,7 +7,7 @@
<div class="row">
<%= f.translatable_fields do |translations_form| %>
<div class="ckeditor column">
<%= translations_form.cktext_area :milestones_summary, ckeditor: { language: I18n.locale } %>
<%= translations_form.text_area :milestones_summary, class: "html-area" %>
</div>
<% end %>
</div>

View File

@@ -5,7 +5,7 @@
@newsletter[:segment_recipient]) %>
<%= f.text_field :subject %>
<%= f.text_field :from %>
<%= f.cktext_area :body, ckeditor: { language: I18n.locale } %>
<%= f.text_area :body, class: "html-area" %>
<div class="margin-top">
<%= f.submit class: "button success" %>

View File

@@ -8,7 +8,7 @@
<%= f.translatable_fields do |translations_form| %>
<div class="ckeditor column">
<span class="help-text"><%= t("admin.active_polls.form.description.help_text") %></span>
<%= translations_form.cktext_area :description,
<%= translations_form.text_area :description, class: "html-area",
maxlength: ActivePoll.description_max_length %>
</div>
<% end %>

View File

@@ -15,7 +15,7 @@
<%= translations_form.text_field :title %>
</div>
<div class="ckeditor column">
<%= translations_form.cktext_area :description, maxlength: Poll::Question.description_max_length %>
<%= translations_form.text_area :description, maxlength: Poll::Question.description_max_length, class: "html-area" %>
</div>
<% end %>
</div>

View File

@@ -47,8 +47,7 @@
<%= translations_form.text_field :subtitle %>
</div>
<div class="ckeditor column">
<%= translations_form.cktext_area :content,
ckeditor: { language: I18n.locale, toolbar: "admin" } %>
<%= translations_form.text_area :content, class: "html-area admin" %>
</div>
<% end %>
</div>

View File

@@ -23,9 +23,9 @@
<div class="js-suggest" data-locale="<%= translations_form.locale %>"></div>
<div class="ckeditor small-12 column">
<%= translations_form.cktext_area :description,
<%= translations_form.text_area :description,
maxlength: Budget::Investment.description_max_length,
ckeditor: { language: I18n.locale } %>
class: "html-area" %>
</div>
<% end %>

View File

@@ -15,9 +15,9 @@
<div class="row expanded">
<div class="small-12 column">
<div class="ckeditor">
<%= f.cktext_area :description,
maxlength: Poll::Question.description_max_length,
ckeditor: { language: I18n.locale } %>
<%= f.text_area :description,
maxlength: Poll::Question.description_max_length,
class: "html-area" %>
</div>
</div>
</div>

View File

@@ -17,9 +17,9 @@
<div class="js-suggest" data-locale="<%= translations_form.locale %>"></div>
<div class="ckeditor small-12 column">
<%= translations_form.cktext_area :description,
<%= translations_form.text_area :description,
maxlength: Debate.description_max_length,
ckeditor: { language: I18n.locale } %>
class: "html-area" %>
</div>
<% end %>

View File

@@ -16,9 +16,9 @@
</div>
<div class="ckeditor small-12 column">
<%= f.cktext_area :description,
<%= f.text_area :description,
maxlength: Legislation::Proposal.description_max_length,
ckeditor: { language: I18n.locale } %>
class: "html-area" %>
</div>
<div class="small-12 column">

View File

@@ -22,9 +22,9 @@
</div>
<div class="ckeditor small-12 column">
<%= translations_form.cktext_area :description,
maxlength: Proposal.description_max_length,
ckeditor: { language: I18n.locale } %>
<%= translations_form.text_area :description,
maxlength: Proposal.description_max_length,
class: "html-area" %>
</div>
<% end %>

View File

@@ -9,7 +9,7 @@ class ConsulFormBuilder < FoundationRailsHelper::FormBuilder
select attribute, choices, options, html_options
end
%i[text_field text_area cktext_area number_field password_field email_field].each do |field|
%i[text_field text_area number_field password_field email_field].each do |field|
define_method field do |attribute, options = {}|
label_with_hint(attribute, options.merge(label_options: label_options_for(options))) +
super(attribute, options.merge(