added 'restricted' mode to tinymce

Signed-off-by: Gabriel Silva <gabriel93.silva@gmail.com> Signed-off-by: Luciano Prestes <lucianopcbr@gmail.com> Signed-off-by: Marcos Ronaldo <marcos.rpj2@gmail.com> See merge request !709 (cherry picked from commit 139ef7fe71f2a59b1236eabbaa8d44e1038a6614)

added 'restricted' mode to tinymce
Signed-off-by: Gabriel Silva <gabriel93.silva@gmail.com> Signed-off-by: Luciano Prestes <lucianopcbr@gmail.com> Signed-off-by: Marcos Ronaldo <marcos.rpj2@gmail.com> See merge request !709 (cherry picked from commit 139ef7fe71f2a59b1236eabbaa8d44e1038a6614)
Marcos Pereira · Thiago Ribeiro
1 parent 915ab720
Showing 7 changed files with 76 additions and 32 deletions Show diff stats
app/helpers/tinymce_helper.rb
features/step_definitions/tiny_mce_steps.rb
features/tiny_mce.feature
plugins/environment_notification/features/message_edition.feature
plugins/environment_notification/public/environment_notification_plugin.js
plugins/environment_notification/views/environment_notification_plugin_admin/_form.html.erb
public/javascripts/tinymce/js/tinymce/tinymce.js
@@ -20,18 +20,9 @@ module TinymceHelper
       :image_advtab => true,
       :language => tinymce_language
-    options[:toolbar1] = "fullscreen | insertfile undo redo | copy paste | bold italic underline | styleselect fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
-    if options[:mode] == 'simple'
-      options[:menubar] = false
-    else
-      options[:menubar] = 'edit insert view tools'
-      options[:toolbar2] = 'print preview code media | table'
-
-      options[:toolbar2] += ' | macros'
-      macros_with_buttons.each do |macro|
-        options[:toolbar2] += " #{macro.identifier}"
-      end
-    end
+    options[:toolbar1] = toolbar1(options[:mode])
+    options[:menubar] = menubar(options[:mode])
+    options[:toolbar2] = toolbar2(options[:mode])
     options[:macros_setup] = macros_with_buttons.map do |macro|
       <<-EOS
@@ -49,4 +40,29 @@ module TinymceHelper
     "noosfero.tinymce.init(#{options.to_json})"
   end
+  def menubar mode
+    if mode =='restricted' || mode == 'simple'
+      return false
+    end
+    return 'edit insert view tools'
+  end
+
+  def toolbar1 mode
+    if mode == 'restricted'
+      return "bold italic underline | link"
+    end
+    return "fullscreen | insertfile undo redo | copy paste | bold italic underline | styleselect fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
+  end
+
+  def toolbar2 mode
+    if mode.blank?
+      toolbar2 = 'print preview code media | table'
+      toolbar2 += ' | macros'
+      macros_with_buttons.each do |macro|
+        toolbar2 += " #{macro.identifier}"
+      end
+      return toolbar2
+    end
+  end
+
 end
@@ -0,0 +1,9 @@
+Then /^The tinymce "(.+)" should be "(.+)"$/ do |item, content|
+  item_value = page.evaluate_script("tinyMCE.activeEditor.getParam('#{item}');")
+  assert_equal item_value.to_s, content
+end
+
+Then /^The tinymce "(.+)" should contain "(.+)"$/ do |item, content|
+  item_value = page.evaluate_script("tinyMCE.activeEditor.getParam('#{item}');")
+  assert_include item_value.to_s, content
+end
@@ -0,0 +1,19 @@
+Feature: Create tinyMCE article
+  As an ordinary user
+  I want to create an tinymce
+
+  Background:
+    Given the following users
+      | login | name |
+      | joaosilva | joao silva |
+    Given I am logged in as "joaosilva"
+
+  @selenium
+  Scenario: mce complete  mode should show on message creation
+    Given I am on joaosilva's control panel
+    And I follow "Manage Content"
+    And I follow "New content"
+    And I follow "Text article with visual editor"
+    Then The tinymce "toolbar1" should be "fullscreen | insertfile undo redo | copy paste | bold italic underline | styleselect fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
+    And The tinymce "menubar" should be "edit insert view tools"
+    And The tinymce "toolbar2" should contain "print preview code media | table"
@@ -0,0 +1,14 @@
+Feature: Create envronment notification message
+  As an admin user
+  I want to create an environment notification
+  In order to notificate users
+
+  @selenium
+  Scenario: mce restricted mode should show on message creation
+    Given I am logged in as admin
+    And I follow "Administration"
+    And I follow "Plugins"
+    And I follow "Configuration"
+    And I follow "New Notification"
+    Then The tinymce "toolbar1" should be "bold italic underline | link"
+    Then The tinymce "menubar" should be "false"
@@ -53,17 +53,6 @@
       }
     },
-    mceRestrict: function() {
-      tinyMCE.init({
-        menubar : false,
-        selector: "textarea",
-        plugins: [
-            "autolink link"
-        ],
-        toolbar: "bold italic underline | link"
-      });
-    },
-
     showPopup: function() {
       if($('.action-home-index').length > 0) {
         jQuery(function($){
@@ -83,10 +72,6 @@
     $(".environment-notification-plugin-notification-bar .notification-close").on("click", environment_notification_plugin.closeNotification);
     $(".environment-notification-plugin-notification-bar .notification-hide").on("click", environment_notification_plugin.hideNotification);
-    if($('.environment-notification-plugin-message').length > 0){
-      environment_notification_plugin.mceRestrict();
-    }
-
     if($('.environment-notification-plugin-notification-bar').length > 0){
       environment_notification_plugin.hideUserNotification();
     }
@@ -96,4 +81,4 @@
     }
   });
-})($);
 \ No newline at end of file
+})($);
 <div class="environment-notification-plugin-form">
-  <% abstract_options = {:value => @notification.message, :style => 'width: 100%; height: 200px;', :class => "environment-notification-plugin-message" } %>
+
+  <% abstract_options = {:value => @notification.message, :style => 'width: 100%; height: 200px;', :class => 'mceEditor'} %>
   <%= button :back, _('Back'), :controller => 'environment_notification_plugin_admin' %>
   <%= form_for :notifications do |f| %>
-    <%= render :file => 'shared/tiny_mce' %>
+    <%= render :file => 'shared/tiny_mce', :locals => {:mode => 'restricted'} %>
     <%= labelled_form_field(_("Optional Title:"), f.text_field(:title, value: @notification.title)) %>
@@ -82,7 +82,7 @@
 			target[fragments[fragments.length - 1]] = modules[id];
 		}
-		
+
 		// Expose private modules for unit tests
 		if (exports.AMDLC_TESTS) {
 			privateModules = exports.privateModules || {};
@@ -40368,4 +40368,4 @@ define(&quot;tinymce/ui/Throbber&quot;, [
 });
 expose(["tinymce/dom/EventUtils","tinymce/dom/Sizzle","tinymce/Env","tinymce/util/Tools","tinymce/dom/DomQuery","tinymce/html/Styles","tinymce/dom/TreeWalker","tinymce/html/Entities","tinymce/dom/DOMUtils","tinymce/dom/ScriptLoader","tinymce/AddOnManager","tinymce/dom/RangeUtils","tinymce/html/Node","tinymce/html/Schema","tinymce/html/SaxParser","tinymce/html/DomParser","tinymce/html/Writer","tinymce/html/Serializer","tinymce/dom/Serializer","tinymce/util/VK","tinymce/dom/ControlSelection","tinymce/dom/BookmarkManager","tinymce/dom/Selection","tinymce/Formatter","tinymce/UndoManager","tinymce/EditorCommands","tinymce/util/URI","tinymce/util/Class","tinymce/util/EventDispatcher","tinymce/util/Observable","tinymce/ui/Selector","tinymce/ui/Collection","tinymce/ui/ReflowQueue","tinymce/ui/Control","tinymce/ui/Factory","tinymce/ui/KeyboardNavigation","tinymce/ui/Container","tinymce/ui/DragHelper","tinymce/ui/Scrollable","tinymce/ui/Panel","tinymce/ui/Movable","tinymce/ui/Resizable","tinymce/ui/FloatPanel","tinymce/ui/Window","tinymce/ui/MessageBox","tinymce/WindowManager","tinymce/EditorObservable","tinymce/Shortcuts","tinymce/util/Promise","tinymce/Editor","tinymce/util/I18n","tinymce/FocusManager","tinymce/EditorManager","tinymce/util/XHR","tinymce/util/JSON","tinymce/util/JSONRequest","tinymce/util/JSONP","tinymce/util/LocalStorage","tinymce/Compat","tinymce/ui/Layout","tinymce/ui/AbsoluteLayout","tinymce/ui/Tooltip","tinymce/ui/Widget","tinymce/ui/Button","tinymce/ui/ButtonGroup","tinymce/ui/Checkbox","tinymce/ui/ComboBox","tinymce/ui/ColorBox","tinymce/ui/PanelButton","tinymce/ui/ColorButton","tinymce/util/Color","tinymce/ui/ColorPicker","tinymce/ui/Path","tinymce/ui/ElementPath","tinymce/ui/FormItem","tinymce/ui/Form","tinymce/ui/FieldSet","tinymce/ui/FilePicker","tinymce/ui/FitLayout","tinymce/ui/FlexLayout","tinymce/ui/FlowLayout","tinymce/ui/FormatControls","tinymce/ui/GridLayout","tinymce/ui/Iframe","tinymce/ui/Label","tinymce/ui/Toolbar","tinymce/ui/MenuBar","tinymce/ui/MenuButton","tinymce/ui/MenuItem","tinymce/ui/Menu","tinymce/ui/ListBox","tinymce/ui/Radio","tinymce/ui/Rect","tinymce/ui/ResizeHandle","tinymce/ui/Slider","tinymce/ui/Spacer","tinymce/ui/SplitButton","tinymce/ui/StackLayout","tinymce/ui/TabPanel","tinymce/ui/TextBox","tinymce/ui/Throbber"]);
-})(this);
 \ No newline at end of file
+})(this);
	@@ -20,18 +20,9 @@ module TinymceHelper		@@ -20,18 +20,9 @@ module TinymceHelper
20	:image_advtab => true,	20	:image_advtab => true,
21	:language => tinymce_language	21	:language => tinymce_language
22		22
23	- options[:toolbar1] = "fullscreen \| insertfile undo redo \| copy paste \| bold italic underline \| styleselect fontsizeselect \| forecolor backcolor \| alignleft aligncenter alignright alignjustify \| bullist numlist outdent indent \| link image"
24	- if options[:mode] == 'simple'
25	- options[:menubar] = false
26	- else
27	- options[:menubar] = 'edit insert view tools'
28	- options[:toolbar2] = 'print preview code media \| table'
29	-
30	- options[:toolbar2] += ' \| macros'
31	- macros_with_buttons.each do \|macro\|
32	- options[:toolbar2] += " #{macro.identifier}"
33	- end
34	- end	23	+ options[:toolbar1] = toolbar1(options[:mode])
		24	+ options[:menubar] = menubar(options[:mode])
		25	+ options[:toolbar2] = toolbar2(options[:mode])
35		26
36	options[:macros_setup] = macros_with_buttons.map do \|macro\|	27	options[:macros_setup] = macros_with_buttons.map do \|macro\|
37	<<-EOS	28	<<-EOS
	@@ -49,4 +40,29 @@ module TinymceHelper		@@ -49,4 +40,29 @@ module TinymceHelper
49	"noosfero.tinymce.init(#{options.to_json})"	40	"noosfero.tinymce.init(#{options.to_json})"
50	end	41	end
51		42
		43	+ def menubar mode
		44	+ if mode =='restricted' \|\| mode == 'simple'
		45	+ return false
		46	+ end
		47	+ return 'edit insert view tools'
		48	+ end
		49	+
		50	+ def toolbar1 mode
		51	+ if mode == 'restricted'
		52	+ return "bold italic underline \| link"
		53	+ end
		54	+ return "fullscreen \| insertfile undo redo \| copy paste \| bold italic underline \| styleselect fontsizeselect \| forecolor backcolor \| alignleft aligncenter alignright alignjustify \| bullist numlist outdent indent \| link image"
		55	+ end
		56	+
		57	+ def toolbar2 mode
		58	+ if mode.blank?
		59	+ toolbar2 = 'print preview code media \| table'
		60	+ toolbar2 += ' \| macros'
		61	+ macros_with_buttons.each do \|macro\|
		62	+ toolbar2 += " #{macro.identifier}"
		63	+ end
		64	+ return toolbar2
		65	+ end
		66	+ end
		67	+
52	end	68	end
@@ -0,0 +1,9 @@		@@ -0,0 +1,9 @@
	1	+Then /^The tinymce "(.+)" should be "(.+)"$/ do \|item, content\|
	2	+ item_value = page.evaluate_script("tinyMCE.activeEditor.getParam('#{item}');")
	3	+ assert_equal item_value.to_s, content
	4	+end
	5	+
	6	+Then /^The tinymce "(.+)" should contain "(.+)"$/ do \|item, content\|
	7	+ item_value = page.evaluate_script("tinyMCE.activeEditor.getParam('#{item}');")
	8	+ assert_include item_value.to_s, content
	9	+end
@@ -0,0 +1,19 @@		@@ -0,0 +1,19 @@
	1	+Feature: Create tinyMCE article
	2	+ As an ordinary user
	3	+ I want to create an tinymce
	4	+
	5	+ Background:
	6	+ Given the following users
	7	+ \| login \| name \|
	8	+ \| joaosilva \| joao silva \|
	9	+ Given I am logged in as "joaosilva"
	10	+
	11	+ @selenium
	12	+ Scenario: mce complete mode should show on message creation
	13	+ Given I am on joaosilva's control panel
	14	+ And I follow "Manage Content"
	15	+ And I follow "New content"
	16	+ And I follow "Text article with visual editor"
	17	+ Then The tinymce "toolbar1" should be "fullscreen \| insertfile undo redo \| copy paste \| bold italic underline \| styleselect fontsizeselect \| forecolor backcolor \| alignleft aligncenter alignright alignjustify \| bullist numlist outdent indent \| link image"
	18	+ And The tinymce "menubar" should be "edit insert view tools"
	19	+ And The tinymce "toolbar2" should contain "print preview code media \| table"
@@ -0,0 +1,14 @@		@@ -0,0 +1,14 @@
	1	+Feature: Create envronment notification message
	2	+ As an admin user
	3	+ I want to create an environment notification
	4	+ In order to notificate users
	5	+
	6	+ @selenium
	7	+ Scenario: mce restricted mode should show on message creation
	8	+ Given I am logged in as admin
	9	+ And I follow "Administration"
	10	+ And I follow "Plugins"
	11	+ And I follow "Configuration"
	12	+ And I follow "New Notification"
	13	+ Then The tinymce "toolbar1" should be "bold italic underline \| link"
	14	+ Then The tinymce "menubar" should be "false"
	@@ -53,17 +53,6 @@		@@ -53,17 +53,6 @@
53	}	53	}
54	},	54	},
55		55
56	- mceRestrict: function() {
57	- tinyMCE.init({
58	- menubar : false,
59	- selector: "textarea",
60	- plugins: [
61	- "autolink link"
62	- ],
63	- toolbar: "bold italic underline \| link"
64	- });
65	- },
66	-
67	showPopup: function() {	56	showPopup: function() {
68	if($('.action-home-index').length > 0) {	57	if($('.action-home-index').length > 0) {
69	jQuery(function($){	58	jQuery(function($){
	@@ -83,10 +72,6 @@		@@ -83,10 +72,6 @@
83	$(".environment-notification-plugin-notification-bar .notification-close").on("click", environment_notification_plugin.closeNotification);	72	$(".environment-notification-plugin-notification-bar .notification-close").on("click", environment_notification_plugin.closeNotification);
84	$(".environment-notification-plugin-notification-bar .notification-hide").on("click", environment_notification_plugin.hideNotification);	73	$(".environment-notification-plugin-notification-bar .notification-hide").on("click", environment_notification_plugin.hideNotification);
85		74
86	- if($('.environment-notification-plugin-message').length > 0){
87	- environment_notification_plugin.mceRestrict();
88	- }
89	-
90	if($('.environment-notification-plugin-notification-bar').length > 0){	75	if($('.environment-notification-plugin-notification-bar').length > 0){
91	environment_notification_plugin.hideUserNotification();	76	environment_notification_plugin.hideUserNotification();
92	}	77	}
	@@ -96,4 +81,4 @@		@@ -96,4 +81,4 @@
96	}	81	}
97	});	82	});
98		83
99	-})($);
100	\ No newline at end of file	84	\ No newline at end of file
		85	+})($);
1	<div class="environment-notification-plugin-form">	1	<div class="environment-notification-plugin-form">
2	- <% abstract_options = {:value => @notification.message, :style => 'width: 100%; height: 200px;', :class => "environment-notification-plugin-message" } %>	2	+
		3	+ <% abstract_options = {:value => @notification.message, :style => 'width: 100%; height: 200px;', :class => 'mceEditor'} %>
3		4
4	<%= button :back, _('Back'), :controller => 'environment_notification_plugin_admin' %>	5	<%= button :back, _('Back'), :controller => 'environment_notification_plugin_admin' %>
5		6
6	<%= form_for :notifications do \|f\| %>	7	<%= form_for :notifications do \|f\| %>
7		8
8	- <%= render :file => 'shared/tiny_mce' %>	9	+ <%= render :file => 'shared/tiny_mce', :locals => {:mode => 'restricted'} %>
9		10
10	<%= labelled_form_field(_("Optional Title:"), f.text_field(:title, value: @notification.title)) %>	11	<%= labelled_form_field(_("Optional Title:"), f.text_field(:title, value: @notification.title)) %>
11		12