inline tinymce document

app/assets/stylesheets/application.css.scss

@@ -146,4 +146,4 @@ background:44F;
 }
 
 @import 'galleries';
-
+@import 'tinymce';

app/assets/stylesheets/layout.css.scss

@@ -204,3 +204,5 @@ form.inline input {
 }
 form.inline {
 float:clear; }
+
+@import 'tinymce';

app/assets/stylesheets/tinymce.css.scss

@@ -16,4 +16,7 @@ i.fa-red { color:red; }
     text-align: center;
 }
 
+div.article {
+    border: thin dotted black;	
+}
 @import 'flatfeticon1'

app/controllers/documents_controller.rb

@@ -20,7 +20,7 @@ class DocumentsController < ApplicationController
     @document = Document.find(params[:id])
     @parent=@document.parent
     respond_to do |format|
-       format.js
+      format.js
       format.html
     end
   end
@@ -28,7 +28,7 @@ class DocumentsController < ApplicationController
     @document = Document.find(params[:id])
     @document.sanitize
     @parent=@document.parent
-    render :write
+    render :edit
   end
   def show
     @document = Document.find(params[:id])

app/views/documents/_form.html.erb

@@ -1,7 +1,6 @@
 <%= semantic_form_for @document, :html=>{:class=>""} do |f| %>
  <%= f.input :text, :as=>:tinymce_text  %>
 <%= f.action :submit, :as => :input_ %>
- 
 <% end %>
 <%= tinymce %>
 

app/views/documents/edit.html.erb

@@ -0,0 +1,17 @@
+<div style="background:white; border: thin #ccc solid; padding: 15px;-webkit-box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.5); -moz-box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.5); box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.5);">
+<div id="toolBar"></div>
+  <h1 class="editable_simple" data-target="#document_name"><%= @document.name %></h1>
+  <div class="editable" data-target="#document_text">
+    <%= raw(@document.text) %>
+  </div>
+</div>
+<%= semantic_form_for @document, :html=>{:class=>""} do |f| %>
+<%= f.input :name , :as=>:hidden %>
+ <%= f.input :text, :as=>:hidden %>
+<%= f.action :submit, :as => :input_ %>
+<% end %>
+<%= tinymce :inline_div %>
+<%= tinymce :inline_simple %>
+
+<%= link_to 'Show', @lva %> |
+<%= link_to 'Back', lvas_path %>

app/views/documents/show.html.erb

@@ -12,10 +12,10 @@
 </div>
 </div>
 <div style="background:white; border: thin #ccc solid; padding: 15px;-webkit-box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.5); -moz-box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.5); box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.5);">
-<h2><%= @document.name %></h2>
-<div id="">
-<%= raw(@document.text) %>
-</div>
+  <h1><%= @document.name %></h1>
+  <div>
+    <%= raw(@document.text) %>
+  </div>
 </div>
 <% if can?(:edit, @document) %>
 <ul class='breadcrumb hidden-print'>

config/tinymce.yml

@@ -1,32 +1,112 @@
-theme_advanced_toolbar_location: top
-theme_advanced_toolbar_align: left
-theme_advanced_statusbar_location: bottom
-theme_advanced_buttons1_add_before: 
-  - h2
-  - h3
-  - h4
-  - separator
-theme_advanced_buttons3_add:
-  - tablecontrols
-  - fullscreen
-plugins:
-  - table
-  - fullscreen
-  - image
-  - textcolor
-  - link
-  - code
-  - autoresize
-#  - advimage
-#  - heading
-heading_clear_tag: p
-width: "100%"
-content_css: "/assets/tinymce.css"
-toolbar: 
-  - styleselect removeformat | bold boldred_btn italic forecolor | list link image table | bullist numlist | alignleft aligncenter alignright alignjustify | undo redo | fullscreen code
-formats:
-  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'); }}); 
-      }
-relative_urls: false
+default:
+  theme_advanced_toolbar_location: top
+  theme_advanced_toolbar_align: left
+  theme_advanced_statusbar_location: bottom
+  theme_advanced_buttons1_add_before: 
+    - h2
+    - h3
+    - h4
+    - separator
+  theme_advanced_buttons3_add:
+    - tablecontrols
+    - fullscreen
+  plugins:
+    - table
+    - fullscreen
+    - image
+    - textcolor
+    - link
+    - code
+    - autoresize
+ #  - advimage
+ #  - heading
+  heading_clear_tag: p
+  image_list: [ {title: "logo", value: "/logo2014_64.png"} 
+  ]
+  width: "100%"
+  content_css: "/assets/tinymce.css"
+  toolbar: 
+    - styleselect removeformat | bold boldred_btn italic forecolor | list link image table | bullist numlist | alignleft aligncenter alignright alignjustify | undo redo | fullscreen code
+  formats:
+    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'); }}); 
+        }
+  relative_urls: false
+inline_simple:
+  selector: ".editable_simple"
+  inline: true
+  fixed_toolbar_container: "#toolBar"
+  toolbar:
+    - undo redo
+  menubar: false
+inline_div:
+  selector: "div.editable"
+  inline: true
+  fixed_toolbar_container: "#toolBar"
+  theme_advanced_toolbar_location: bottom
+  theme_advanced_toolbar_align: left
+  theme_advanced_statusbar_location: bottom
+  theme_advanced_buttons1_add_before: 
+    - h2
+    - h3
+    - h4
+    - separator
+  theme_advanced_buttons3_add:
+    - tablecontrols
+    - fullscreen
+  plugins:
+    - table
+    - fullscreen
+    - image
+    - textcolor
+    - link
+    - code
+    - autoresize
+    - visualblocks
+    - template
+ #  - advimage
+ #  - heading
+  heading_clear_tag: p
+  image_list: [ {title: "logo", value: "/logo2014_64.png"} 
+  ]
+  style_formats: 
+    - {title: "Headers", items: [ {title: "Header 2", format: "h2"}, {title: "Header 3", format: "h3"}, {title: "Header 4", format: "h4"},  {title: "Header 5", format: "h5"}, {title: "Header 6", format: "h6"}]}
+    - {title: "Important", format: "boldred"}    
+    - title: "Inline"
+      items: 
+        - {title: "Bold", icon: "bold", format: "bold"}
+        - {title: "Italic", icon: "italic", format: "italic"}
+        - {title: "Underline", icon: "underline", format: "underline"}
+        - {title: "Strikethrough", icon: "strikethrough", format: "strikethrough"}
+        - {title: "Superscript", icon: "superscript", format: "superscript"}
+        - {title: "Subscript", icon: "subscript", format: "subscript"}
+        - {title: "Code", icon: "code", format: "code"}
+    - title: "Blocks"
+      items: 
+        - {title: "Paragraph", format: "p"}
+        - {title: "Blockquote", format: "blockquote"}
+        - {title: "Div", format: "div"}
+        - {title: "Pre", format: "pre"}
+    - title: "Alignment"
+      items: 
+        - {title: "Left", icon: "alignleft", format: "alignleft"}
+        - {title: "Center", icon: "aligncenter", format: "aligncenter"}
+        - {title: "Right", icon: "alignright", format: "alignright"}
+        - {title: "Justify", icon: "alignjustify", format: "alignjustify"}
+  formats:
+    boldred: {selector: "p",block: "p", classes: "mc-important"}
+  content_css: "/assets/tinymce.css"
+  toolbar: 
+    - template styleselect removeformat | bold boldred_btn italic forecolor | list link image table | bullist numlist | alignleft aligncenter alignright alignjustify | undo redo | fullscreen code
+  setup: function(ed) {
+         ed.addButton('boldred_btn', {title:'Bold-Red',icon:"fa fa-red fa-bold", onclick:function() {ed.focus();ed.formatter.toggle('boldred'); }}); 
+        ed.on('NodeChange',function(){$($("#"+ed.id).attr("data-target")).val(this.getContent())})
+         }
+  relative_urls: false
+  menubar: "edit insert view format table tools"
+  templates:
+    - title: "Test"
+      content: '<span id="sdf">sdf</span>'
+    - title: 'ooo'
+      content: '<div class="article"><p>Article</p></div>'