Etherpadlite tinymce embed

app/models/environment.rb

@@ -283,6 +283,13 @@ def message_for_member_invitation
   # For multiple domains acts as suggested in http://stackoverflow.com/questions/1653308/access-control-allow-origin-multiple-origin-domains
   settings_items :access_control_allow_origin, :type => Array
   settings_items :access_control_allow_methods, :type => String
+
+  # Configuration of the Tinymce Collaborative TextPad plugin. If you don't want to activate the plugin, set padServerUrl as "". For understanding the meanings of the parameters, please look at https://github.com/dtygel/tinymce-etherpadlite-embed/blob/master/README.md
+  # Note 1: The padServerUrl is the url of the pad just before the pad name. Normally it includes a "/p/", as for example: "http://pad.textb.org/p/".
+  # Note 2: Your chosen padServerUrl must be among the "trusted sites" configured by the admin control panel. If not, the embedded iframe will be erased when the article is saved.
+  settings_items :tinymce_plugin_etherpadlite_padServerUrl, :type => String, :default => ""
+  settings_items :tinymce_plugin_etherpadlite_padWidth, :type => String, :default => "100%"
+  settings_items :tinymce_plugin_etherpadlite_padHeight, :type => String, :default => "400px"
 
   def news_amount_by_folder=(amount)
     settings[:news_amount_by_folder] = amount.to_i

app/views/shared/tiny_mce.rhtml

@@ -2,15 +2,15 @@
 <%= javascript_include_tag 'tinymce/jscripts/tiny_mce/tiny_mce.js' %>
 <%= include_macro_js_files %>
 <script type="text/javascript">
-  var myplugins = "searchreplace,print,table,contextmenu,-macrosPlugin";
+  var myplugins = "searchreplace,print,table,contextmenu,-macrosPlugin,etherpadlite";
   var first_line, second_line;
   var mode = '<%= mode ||= false %>'
   <% if mode %>
     first_line = "fontsizeselect,bold,italic,underline,bullist,numlist,justifyleft,justifycenter,justifyright,link,unlink"
     second_line = ""
   <% else %>
     first_line = "print,separator,copy,paste,separator,undo,redo,separator,search,replace,separator,forecolor,fontsizeselect,formatselect"
-    second_line = "bold,italic,underline,strikethrough,separator,bullist,numlist,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,link,unlink,image,table,separator,cleanup,code,macros"
+    second_line = "bold,italic,underline,strikethrough,separator,bullist,numlist,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,link,unlink,image,table,etherpadlite,separator,cleanup,code,macros"
     <% macros_with_buttons.each do |macro| %>
       second_line += ',<%=macro.identifier %>'
     <% end %>
@@ -73,6 +73,11 @@ tinyMCE.init({
   extended_valid_elements : "applet[style|archive|codebase|code|height|width],comment,iframe[src|style|allowtransparency|frameborder|width|height|scrolling],embed[title|src|type|height|width]",
   content_css: '/stylesheets/tinymce.css,<%= macro_css_files %>',
   language: <%= tinymce_language.inspect %>,
+  // Parameters for etherpadlite Plugin:
+  plugin_etherpadlite_padServerUrl: "<%= environment.tinymce_plugin_etherpadlite_padServerUrl %>", 
+  plugin_etherpadlite_padNamesPrefix : "<%= environment.default_hostname %>",
+  plugin_etherpadlite_padWidth : "<%= environment.tinymce_plugin_etherpadlite_padWidth %>",  
+  plugin_etherpadlite_padHeight : "<%= environment.tinymce_plugin_etherpadlite_padHeight %>",  
   entity_encoding: 'raw',
   setup : function(ed) {
     <% macros_with_buttons.each do |macro| %>

public/javascripts/tinymce/jscripts/tiny_mce/plugins/etherpadlite/README.md

@@ -0,0 +1,50 @@
+TinyMCE Etherpad-lite Plug-in
+=============================
+
+Button to insert a textpad of etherpad-lite into TinyMCE
+
+
+
+Installation
+============
+* Extract the zip to the TinyMCE plug-ins folder.
+* Add etherpad-lite to the plug-ins configuration.
+* Add etherpad-lite to the theme_advanced_buttons_n configuration.
+* Add configuration parameters of the plugin (see the explanations below)
+
+Parameters
+=============
+
+* plugin_etherpadlite_padServerUrl (Default: "")
+The URL of the EtherPad Lite server. The plugin won't work without a defined server
+
+* plugin_etherpadlite_padNamesPrefix (Default: "")
+The prefix that will be added automatically to the pad that will be created. It's important to think of a specific prefix (like for example the url of your website), so that the pads will be unique. The names of the created pads will be numbered like this: padNamesPrefix1, padNamesPrefix2, etc. Each time one user clicks at "insert pad", a new number will be generated, ordered.
+
+* plugin_etherpadlite_padWidth (Default: 100%)
+The width of the pad that will be inserted
+
+* plugin_etherpadlite_padHeight (Default: 400px)
+The height of the pad that will be inserted
+
+Simple usage example
+================
+
+tinyMCE.init({
+	mode : "textareas",
+	theme : "advanced",
+	plugins : "etherpadlite",
+	theme_advanced_buttons2 : "bold,italic,underline,strikethrough,separator,bullist,numlist,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,link,unlink,image,table,etherpadlite,separator,cleanup",
+	content_css : "css/content.css",
+
+	// Parameters for etherpadlite Plugin:
+	plugin_etherpadlite_padServerUrl: "http://pad.textb.org/p/", 
+	plugin_etherpadlite_padNamesPrefix : "mypads-", 
+});
+
+
+NOTE
+========
+
+Here is an example of an existing pad server: 
+http://pad.textb.org/p/

public/javascripts/tinymce/jscripts/tiny_mce/plugins/etherpadlite/css/etherpadlite.css

@@ -0,0 +1,24 @@
+.epinstr{
+	margin:3px 0;
+	padding:0;
+	background-color:#BBBBBB;
+	border:1px solid #BBBBBB;
+	border-radius: 3px 3px 3px 3px;
+	-webkit-border-radius: 3px;
+	-moz-border-radius: 3px;
+	text-align:center;
+	width:220px;
+	display:block;
+	position:relative;
+}
+.epinstr p{
+	margin:0;
+	padding:0;
+	font-size:10px;
+}
+.ep_logo_contener{margin:0;padding:0;float:right;}
+table{margin:0;padding:0;width:100%;border-collapse: collapse;}
+table tr td{vertical-align:top;}
+.etherpadlite-table-child tr td{
+	width:100px;
+}

public/javascripts/tinymce/jscripts/tiny_mce/plugins/etherpadlite/editor_plugin_src.js

@@ -0,0 +1,70 @@
+/**
+ * Etherpad Lite plug-in for TinyMCE version 3.x
+ * @author     Daniel Tygel
+ * @version    $Rev: 1.0 $
+ * @package    etherpadlite
+ * @link https://github.com/dtygel/tinymce-etherpadlite-embed
+ * EtherPad plugin for TinyMCE
+ * AFFERO LICENSE
+ */
+
+(function() {
+	tinymce.PluginManager.requireLangPack('etherpadlite');
+	tinymce.create('tinymce.plugins.EtherPadLitePlugin', {
+		init : function(ed, url) {
+			var t = this;
+
+			t.editor = ed;
+
+			//If the person who activated the plugin didn't put a Pad Server URL, the plugin will be disabled
+			if (!ed.getParam("plugin_etherpadlite_padServerUrl")) {
+				alert(etherpadlite.error);
+				return null;
+			}
+
+			var padUrl = ed.getParam("plugin_etherpadlite_padServerUrl");
+			var padPrefix = (ed.getParam("plugin_etherpadlite_padNamesPrefix"))
+				? ed.getParam("plugin_etherpadlite_padNamesPrefix")
+				: "";
+			var padWidth = (ed.getParam("plugin_etherpadlite_padWidth"))
+				? ed.getParam("plugin_etherpadlite_padWidth")
+				: "100%";
+			var padHeight = (ed.getParam("plugin_etherpadlite_padHeight"))
+				? ed.getParam("plugin_etherpadlite_padHeight")
+				: "400";
+
+			ed.addCommand('mceEtherPadLite', function() {
+    	    	var padName = padPrefix + '.' + randomPadName();
+				var iframe = "<iframe name='embed_readwrite' src='" + padUrl + padName + "?showControls=true&showChat=true&&alwaysShowChat=true&lang=pt&showLineNumbers=true&useMonospaceFont=false' width='" + padWidth + "' height='" + padHeight + "'></iframe>";
+				ed.execCommand('mceInsertContent', false, iframe);
+			});
+
+			ed.addButton('etherpadlite', {title : 'etherpadlite.desc', cmd : 'mceEtherPadLite', image : url + '/img/etherpadlite.gif'});
+		},
+
+		getInfo : function() {
+			return {
+				longname : 'Insert a collaborative text with Etherpad Lite',
+				author : 'Daniel Tygel',
+				authorurl : 'http://cirandas.net/dtygel',
+				infourl : 'https://github.com/dtygel/tinymce-etherpadlite-embed',
+				version : tinymce.majorVersion + "." + tinymce.minorVersion
+			};
+		}
+	});
+
+	function randomPadName() {
+		var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
+		var string_length = 10;
+		var randomstring = '';
+		for (var i = 0; i < string_length; i++) {
+			var rnum = Math.floor(Math.random() * chars.length);
+			randomstring += chars.substring(rnum, rnum + 1);
+		}
+		return randomstring;
+	}
+
+
+	// Register plugin
+	tinymce.PluginManager.add('etherpadlite', tinymce.plugins.EtherPadLitePlugin);
+})();

public/javascripts/tinymce/jscripts/tiny_mce/plugins/etherpadlite/langs/en.js

@@ -0,0 +1,4 @@
+tinyMCE.addI18n('en.etherpadlite',{
+	desc : 'Insert a collaborative text pad', 
+	error : 'The parameters of the Etherpad Lite Plugin are not correct. Please contact the administrator of this website.'
+});

public/javascripts/tinymce/jscripts/tiny_mce/plugins/etherpadlite/langs/en_dlg.js

@@ -0,0 +1,11 @@
+tinyMCE.addI18n('en.etherpadlite_dlg',{
+    title : "Insert a collaborative text pad",
+    instr : "If you already know a pad, put its name. If not, leave the name blank.",
+    epID : "Pad name<br><i>(leave it blank if you're creating a new pad)</i>",
+    chat : "Enable chat?", 
+    alwaysChat : "Always show chat?", 
+    epW : "Width",
+    epH : "Height",
+    yes:"Yes",
+    no:"No"
+});

public/javascripts/tinymce/jscripts/tiny_mce/plugins/etherpadlite/langs/pt.js

@@ -0,0 +1,4 @@
+tinyMCE.addI18n('pt.etherpadlite',{
+	desc : 'Inserir um editor de texto colaborativo', 
+	error : 'Os parâmetros de configuração do Plugin de integração do Etherpad Lite não estão corretos e por isso eu não consegui implementá-lo. Por favor entre em contato com o administrador deste site.'
+});

public/javascripts/tinymce/jscripts/tiny_mce/plugins/etherpadlite/langs/pt_dlg.js

@@ -0,0 +1,11 @@
+tinyMCE.addI18n('pt.etherpadlite_dlg',{
+    title : "Inserir um editor de texto colaborativo",
+    instr : "Se você já conhece um pad existente, coloque o seu nome. Se não, deixe o nome em branco.",
+    epID : "Nome do Pad<br><i>(deixe em branco se você não conhece um pad existente)</i>",
+    chat : "Ativar o bate-papo?", 
+    alwaysChat : "O bate-papo deve estar sempre visível?", 
+    epW : "Largura",
+    epH : "Altura",
+    yes:"Sim",
+    no:"Não"
+});