tinmce update

Gemfile

@@ -45,7 +45,7 @@ gem 'jquery-rails'
 gem 'formtastic', '~>2.2.1'
 gem 'formtastic-bootstrap', '~>2.1.3' #, :git => "git://github.com/mjbellantoni/formtastic-bootstrap.git"
 # TinyMCE
-gem "tinymce-rails" , '~>3.5.8'
+gem "tinymce-rails" , '~>4.1.0'
 
 # Internationalisierung
 #gem "globalize3"  ,'~>3.0.4'

app/assets/stylesheets/application.css.scss

@@ -14,7 +14,7 @@
  *= require 'calendars'
  *= require jquery.fileupload-ui
  * require 'bootstrap'
-
+ *= require 'tinymce'
  
  */
 // Colorshema #0A64A4

app/assets/stylesheets/themes/blue1/application.css.scss

@@ -101,3 +101,4 @@ $box-border-radius:0px;
 $box-background: white;
 @import 'layout';
 @import 'calendars';
+@import 'tinymce';

app/assets/stylesheets/tinymce.css

@@ -0,0 +1,17 @@
+i.mce-i-fa {
+	font: 400 17px/1 FontAwesome;
+	padding: 0;
+	vertical-align: middle;
+	speak: none;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	margin-left: -2px;
+	padding-right: 2px
+}
+i.fa-red { color:red; }
+
+.mc-important {
+    color: red;
+    font-weight:bold;
+    text-align: center;
+}

app/views/fragen/_form.html.erb

@@ -10,5 +10,5 @@
     <%= f.action :submit, :as => :input %>
   <% end %>
 <% end %>
-
- <%= tinymce %>
+<%= tinymce :theme => "simple", :language => "de", :plugins => ["wordcount", "paste"] %>
+ <% tinymce :compact %>

app/views/fragen/_rform.html.erb

@@ -10,4 +10,4 @@
     <%= f.action :submit, :as => :input %>
   <% end %>
 <% end %>
- <%= tinymce %>
+ <%= tinymce :menubar=>false %>

app/views/layouts/application.html.erb

@@ -10,7 +10,7 @@
  
   <%= stylesheet_link_tag "themes/"+theme_name+"/application", :media => "all" unless theme_name.empty?  %>
   <%= stylesheet_link_tag "application", :media=>"all" if theme_name.empty? %>
-  <%= theme_stylesheet_link_tag "test", :media => "all" %>
+  <% theme_stylesheet_link_tag "test", :media => "all" %>
   <% theme_stylesheet_link_tag "mod", :media=>"all" %>
  <!--   <link rel="stylesheet" href="css/bootstrap.css">
 <link rel="stylesheet" href="css/style.css">

app/views/themen/new.html.erb

@@ -1,6 +1,6 @@
 
 <div id="themaview">
 <h1><%= I18n.t("thema.add") %></h1>
-<%= render 'form' %>
+<%= render 'form', :remote=>false %>
 </div>
 <%= link_to 'Back', themen_path %>

config/tinymce.yml

@@ -1,4 +1,3 @@
-
 theme_advanced_toolbar_location: top
 theme_advanced_toolbar_align: left
 theme_advanced_statusbar_location: bottom
@@ -13,23 +12,20 @@ theme_advanced_buttons3_add:
 plugins:
   - table
   - fullscreen
-  - advimage
-  - heading
+  - image
+  - textcolor
+  - link
+  - code
+  - autoresize
+#  - advimage
+#  - heading
 heading_clear_tag: p
 width: "100%"
+content_css: "/assets/tinymce.css"
+toolbar: 
+  - styleselect | bold boldred_btn italic forecolor | list link image table | undo redo | fullscreen code
 formats:
-  boldred: {inline: "b", styles: {color: "red"}}
-setup : function(fn) {
-    // Add a custom button
-    fn.addButton('firstname', {
-        title : 'Member First Name',
-        image : 'resources/scripts/tiny_mce/themes/advanced/img/firstname.gif',
-        onclick : function() {
-            // Add you own code to execute something on click
-            fn.focus();
-            fn.selection.setContent('{firstname}');
+  boldred: {selector: "p",block: "p", classes: "mc-important"}
+setup: function(ed) {
+       ed.addButton('boldred_btn', {title:'Bold-Red',icon:"fa fa-red fa-bold", onclick:function() {ed.focus();ed.formatter.toggle('boldred'); }, onPostRender:function() {var ctrl = this; ed.on('NodeChange', function(e) {ctrl.active(e.element.formatter.match('boldred'));}); }}); 
       }
-    });
-}
-
-