Merge pull request #3802 from consul/html_area

Make HTML areas independent of CKEditor
This commit is contained in:
Javier Martín
2019-10-25 17:31:12 +02:00
committed by GitHub
26 changed files with 103 additions and 66 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

@@ -1072,8 +1072,8 @@ form {
margin: $line-height / 2 0 $line-height / 2 $line-height / 4;
}
.ckeditor {
min-height: $line-height * 13;
.cke {
margin-bottom: $line-height;
}
.checkbox,

View File

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

View File

@@ -22,19 +22,17 @@
<div class="row">
<%= 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") %>
</div>
<%= 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 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") %>
</div>
<%= translations_form.text_area :summary,
maxlength: Budget::Phase::SUMMARY_MAX_LENGTH,
class: "html-area",
hint: t("admin.budget_phases.edit.summary_help_text") %>
</div>
<% end %>
</div>

View File

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

View File

@@ -15,12 +15,10 @@
<div class="row">
<%= 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") %>
</div>
<%= translations_form.text_area :homepage,
language: I18n.locale,
class: "html-area admin",
hint: t("admin.legislation.processes.form.homepage_description") %>
</div>
<% end %>
</div>

View File

@@ -6,8 +6,8 @@
<%= translatable_form_for [:admin, @process] do |f| %>
<div class="row">
<%= f.translatable_fields do |translations_form| %>
<div class="ckeditor column">
<%= translations_form.cktext_area :milestones_summary, ckeditor: { language: I18n.locale } %>
<div class="column">
<%= 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

@@ -6,9 +6,9 @@
<div class="row">
<%= f.translatable_fields do |translations_form| %>
<div class="ckeditor column">
<div class="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

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

View File

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

View File

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

View File

@@ -14,11 +14,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 } %>
</div>
<%= f.text_area :description,
maxlength: Poll::Question.description_max_length,
class: "html-area" %>
</div>
</div>
</div>

View File

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

View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="es">
<html lang="<%= I18n.locale %>">
<head>
<%= render "layouts/common_head", default_title: "Admin" %>

View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="es">
<html lang="<%= I18n.locale %>">
<head>
<%= render "layouts/common_head", default_title: "Gobierno abierto" %>
<%= render "layouts/meta_tags" %>

View File

@@ -1,5 +1,5 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="es">
<html lang="<%= I18n.locale %>">
<head>
<title><%= t("mailers.title") %></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="es">
<html lang="<%= I18n.locale %>">
<head>
<%= render "layouts/common_head", default_title: "Management" %>

View File

@@ -15,10 +15,10 @@
hint: t("proposals.form.proposal_summary_note") %>
</div>
<div class="ckeditor small-12 column">
<%= f.cktext_area :description,
<div class="small-12 column">
<%= 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

@@ -21,10 +21,10 @@
hint: t("proposals.form.proposal_summary_note") %>
</div>
<div class="ckeditor small-12 column">
<%= translations_form.cktext_area :description,
maxlength: Proposal.description_max_length,
ckeditor: { language: I18n.locale } %>
<div class="small-12 column">
<%= 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(

View File

@@ -86,10 +86,9 @@ describe "Admin custom pages" do
scenario "Allows images in CKEditor", :js do
visit edit_admin_site_customization_page_path(custom_page)
fill_in_ckeditor "Content", with: "Will add an image"
within(".ckeditor") do
expect(page).to have_css(".cke_toolbar .cke_button__image_icon")
end
expect(page).to have_css(".cke_toolbar .cke_button__image_icon")
end
end

View File

@@ -55,15 +55,15 @@ describe "Admin edit translatable records" do
visit path
within_frame(0) { expect(page).to have_content "Content in English" }
expect(page).to have_ckeditor "Content", with: "Content in English"
select "Español", from: :select_language
within_frame(0) { expect(page).to have_content "Contenido en español" }
expect(page).to have_ckeditor "Content", with: "Contenido en español"
select "Français", from: :select_language
within_frame(0) { expect(page).to have_content "Contenu en Français" }
expect(page).to have_ckeditor "Content", with: "Contenu en Français"
end
end
@@ -155,7 +155,7 @@ describe "Admin edit translatable records" do
select "Français", from: :select_language
within_frame(0) { expect(page.text).to be_empty }
expect(page). to have_ckeditor "Description", with: ""
end
end
@@ -237,7 +237,7 @@ describe "Admin edit translatable records" do
select("Español", from: "locale-switcher")
expect(page).to have_field "Respuesta", with: "Respuesta corregida"
within_frame(0) { expect(page).to have_content "Descripción corregida" }
expect(page).to have_ckeditor "Descripción", with: "Descripción corregida"
end
end

View File

@@ -212,7 +212,7 @@ describe "Public area translatable records" do
select "Español", from: "locale-switcher"
expect(page).to have_field "Título del debate", with: "Título corregido"
within_frame(0) { expect(page).to have_content "Texto corregido" }
expect(page).to have_ckeditor "Texto inicial del debate", with: "Texto corregido"
end
end

View File

@@ -0,0 +1,31 @@
RSpec::Matchers.define :have_ckeditor do |label, with:|
define_method :textarea_id do
find("label", text: label)[:for]
end
define_method :ckeditor_id do
"#cke_#{textarea_id}"
end
define_method :has_ckeditor? do
has_css?("label", text: label) && has_css?(ckeditor_id)
end
match do
return false unless has_ckeditor?
page.within(ckeditor_id) do
within_frame(0) { has_content?(with) }
end
end
failure_message do
if has_ckeditor?
text = page.within(ckeditor_id) { within_frame(0) { page.text } }
"expected to find visible CKEditor '#{label}' with '#{with}', but had '#{text}'"
else
"expected to find visible CKEditor '#{label}' but there were no matches."
end
end
end