Permalink
Browse files

Make it (kinda) pretty.

  • Loading branch information...
ejholmes committed May 1, 2012
1 parent c108f6b commit 25eb5bc8663d09db47064f2b28d14f12cc86ab0f
View
@@ -11,6 +11,12 @@ interface using [wysihtml5](https://github.com/xing/wysihtml5).
gem 'active_admin_editor'
```
+Then add the following stylesheet to your application manifest:
+
+```
+//= require active_admin/editor/wysiwyg
+```
+
## Usage
This gem provides you with a custom formtastic input called `:html_editor` to build out an html editor.
All you have to do is specify the `:as` option for your inputs.
Binary file not shown.
@@ -3,17 +3,20 @@
(function($) {
$(function(){
- var active_admin_editor = $('[active-admin-editor=true]')
- var id = active_admin_editor.attr('id');
+ var active_admin_editor, textarea_id, toolbar_id;
+ active_admin_editor = $('.active_admin_editor');
- var toolbar = active_admin_editor.parent().find('.active_admin_editor_toolbar');
- var toolbar_id = toolbar.attr('id');
+ if (active_admin_editor.length > 0) {
+ textarea_id = active_admin_editor.find('textarea').attr('id');
+ toolbar_id = active_admin_editor.find('.active_admin_editor_toolbar').attr('id');
- var editor = new wysihtml5.Editor(id, {
- toolbar: toolbar_id,
- parserRules: wysihtml5ParserRules
- });
+ var editor = new wysihtml5.Editor(textarea_id, {
+ toolbar: toolbar_id,
+ stylesheets: "/assets/active_admin/editor/wysiwyg",
+ parserRules: wysihtml5ParserRules
+ });
- window.editor = editor;
+ window.editor = editor;
+ }
});
})(jQuery);
@@ -4,4 +4,122 @@
}
.active_admin_editor textarea {
width: 100%;
+ font-family: Georgia;
+ font-size: 1.3em;
+ height: 700px;
+}
+
+/* wysihtml5 styles */
+.active_admin_editor .active_admin_editor_toolbar {
+ position: relative;
+}
+
+.active_admin_editor .active_admin_editor_toolbar [data-wysihtml5-command] {
+ width: 16px;
+ height: 16px;
+ display: inline-block;
+ background: url('editor/icons.png') top left no-repeat;
+}
+
+.active_admin_editor .active_admin_editor_toolbar [data-wysihtml5-action="change_view"] {
+ display: inline-block;
+ height: 16px;
+ line-height: 16px;
+ padding-left: 20px;
+ margin-right: 10px;
+ position: relative;
+ top: -4px;
+ background: url('editor/icons.png') top left no-repeat;
+}
+
+.active_admin_editor .active_admin_editor_toolbar [data-wysihtml5-command="bold"] {
+ background-position: 0 -304px;
+}
+
+.active_admin_editor .active_admin_editor_toolbar [data-wysihtml5-command="italic"] {
+ background-position: 0 -320px;
+}
+
+.active_admin_editor .active_admin_editor_toolbar [data-wysihtml5-command="createLink"] {
+ background-position: 0 -528px;
+}
+
+.active_admin_editor .active_admin_editor_toolbar [data-wysihtml5-command="insertImage"] {
+ background-position: 0 -576px;
+}
+
+.active_admin_editor .active_admin_editor_toolbar [data-wysihtml5-command="insertUnorderedList"] {
+ background-position: 0 -416px;
+}
+
+.active_admin_editor .active_admin_editor_toolbar [data-wysihtml5-command="insertOrderedList"] {
+ background-position: 0 -400px;
+}
+
+.active_admin_editor .active_admin_editor_toolbar [data-wysihtml5-command="formatBlock"] {
+ background: none;
+ width: auto;
+ padding-right: 2px;
+ position: relative;
+ top: -3px;
+ text-decoration: none;
+ font-size: 14px;
+ font-family: Georgia;
+ color: #000;
+}
+
+.active_admin_editor .active_admin_editor_toolbar .separator {
+ display: inline-block;
+ height: 1px;
+ width: 10px;
+}
+
+.active_admin_editor .active_admin_editor_toolbar .wysihtml5-command-active {
+ background-color: #ccc;
+}
+
+/* wysihtml5 dialogs */
+.active_admin_editor .active_admin_editor_toolbar [data-wysihtml5-dialog] {
+ position: absolute;
+ top: 30px;
+ left: 10px;
+ width: 600px;
+ background: #fff;
+ padding: 10px;
+ border: 1px solid #c9d0d6;
+
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+ border-radius: 3px;
+
+ -moz-box-shadow: 0 0 5px #ccc;
+ -webkit-box-shadow: 0 0 5px #ccc;
+ box-shadow: 0 0 5px #ccc;
+}
+
+.active_admin_editor .active_admin_editor_toolbar [data-wysihtml5-dialog] label {
+ clear: both;
+ display: block;
+ margin: 10px 0;
+}
+
+.active_admin_editor .active_admin_editor_toolbar [data-wysihtml5-dialog] input {
+ width: 400px;
+ border: 1px solid #c9d0d6;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ font-size: 0.95em;
+ font-family: Helvetica, Arial, sans-serif;
+ outline: none;
+ padding: 8px 10px 7px;
+}
+
+.active_admin_editor .active_admin_editor_toolbar [data-wysihtml5-dialog] .action-group {
+ padding-top: 20px;
+ clear: both;
+}
+
+.active_admin_editor .active_admin_editor_toolbar [data-wysihtml5-dialog-action] {
+ cursor: pointer;
}
@@ -0,0 +1,130 @@
+
+.wysiwyg-font-size-smaller {
+ font-size: smaller;
+}
+
+.wysiwyg-font-size-larger {
+ font-size: larger;
+}
+
+.wysiwyg-font-size-xx-large {
+ font-size: xx-large;
+}
+
+.wysiwyg-font-size-x-large {
+ font-size: x-large;
+}
+
+.wysiwyg-font-size-large {
+ font-size: large;
+}
+
+.wysiwyg-font-size-medium {
+ font-size: medium;
+}
+
+.wysiwyg-font-size-small {
+ font-size: small;
+}
+
+.wysiwyg-font-size-x-small {
+ font-size: x-small;
+}
+
+.wysiwyg-font-size-xx-small {
+ font-size: xx-small;
+}
+
+.wysiwyg-color-black {
+ color: black;
+}
+
+.wysiwyg-color-silver {
+ color: silver;
+}
+
+.wysiwyg-color-gray {
+ color: gray;
+}
+
+.wysiwyg-color-white {
+ color: white;
+}
+
+.wysiwyg-color-maroon {
+ color: maroon;
+}
+
+.wysiwyg-color-red {
+ color: red;
+}
+
+.wysiwyg-color-purple {
+ color: purple;
+}
+
+.wysiwyg-color-fuchsia {
+ color: fuchsia;
+}
+
+.wysiwyg-color-green {
+ color: green;
+}
+
+.wysiwyg-color-lime {
+ color: lime;
+}
+
+.wysiwyg-color-olive {
+ color: olive;
+}
+
+.wysiwyg-color-yellow {
+ color: yellow;
+}
+
+.wysiwyg-color-navy {
+ color: navy;
+}
+
+.wysiwyg-color-blue {
+ color: blue;
+}
+
+.wysiwyg-color-teal {
+ color: teal;
+}
+
+.wysiwyg-color-aqua {
+ color: aqua;
+}
+
+.wysiwyg-text-align-right {
+ text-align: right;
+}
+
+.wysiwyg-text-align-center {
+ text-align: center;
+}
+
+.wysiwyg-text-align-left {
+ text-align: left;
+}
+
+.wysiwyg-float-left {
+ float: left;
+ margin: 0 8px 8px 0;
+}
+
+.wysiwyg-float-right {
+ float: right;
+ margin: 0 0 8px 8px;
+}
+
+.wysiwyg-clear-right {
+ clear: right;
+}
+
+.wysiwyg-clear-left {
+ clear: left;
+}
@@ -2,25 +2,46 @@ class HtmlEditorInput < Formtastic::Inputs::TextInput
def toolbar
<<-HTML
<div id="#{input_html_options[:id]}-toolbar" class="active_admin_editor_toolbar">
- <a data-wysihtml5-command="bold" title="CTRL+B">bold</a>
- <a data-wysihtml5-command="italic" title="CTRL+I">italic</a> |
- <a data-wysihtml5-command="createLink">insert link</a> |
- <a data-wysihtml5-command="insertLibraryImage">insert image</a> |
- <a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h1">h1</a> |
- <a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h2">h2</a> |
- <a data-wysihtml5-command="insertUnorderedList">insertUnorderedList</a> |
- <a data-wysihtml5-command="insertOrderedList">insertOrderedList</a>
- <a data-wysihtml5-action="change_view">switch to html view</a>
+ <a data-wysihtml5-action="change_view">Source</a>
+ #{%Q{<a data-wysihtml5-command="bold" title="CTRL+B"></a>} if input_html_options[:commands][:bold]}
+ #{%Q{<a data-wysihtml5-command="italic" title="CTRL+I"></a>} if input_html_options[:commands][:italic]}
+ #{%Q{<a data-wysihtml5-command="createLink"></a>} if input_html_options[:commands][:link]}
+ #{%Q{<a data-wysihtml5-command="insertImage"></a>} if input_html_options[:commands][:image]}
+ #{%Q{<a data-wysihtml5-command="insertUnorderedList"></a>} if input_html_options[:commands][:ul]}
+ #{%Q{<a data-wysihtml5-command="insertOrderedList"></a>} if input_html_options[:commands][:li]}
+ <div class="separator"></div>
+ #{%Q{<a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h1">h1</a>} if input_html_options[:commands][:h1]}
+ #{%Q{<a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h2">h2</a>} if input_html_options[:commands][:h2]}
+ #{%Q{<a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h3">h3</a>} if input_html_options[:commands][:h3]}
- <div data-wysihtml5-dialog-container="insertLibraryImage" style="display: none;">
- </div>
-
- <div data-wysihtml5-dialog="createLink" style="display: none;">
+ <div data-wysihtml5-dialog="createLink" style="display: none">
<label>
Link:
<input data-wysihtml5-dialog-field="href" value="http://">
</label>
- <a data-wysihtml5-dialog-action="save">OK</a>&nbsp;<a data-wysihtml5-dialog-action="cancel">Cancel</a>
+ <div class="action-group">
+ <a data-wysihtml5-dialog-action="save" class="button">OK</a>
+ <a data-wysihtml5-dialog-action="cancel">Cancel</a>
+ </div>
+ </div>
+
+ <div data-wysihtml5-dialog="insertImage" style="display: none">
+ <label>
+ Image:
+ <input data-wysihtml5-dialog-field="src" value="http://">
+ </label>
+ <label>
+ Align:
+ <select data-wysihtml5-dialog-field="className">
+ <option value="">default</option>
+ <option value="wysiwyg-float-left">left</option>
+ <option value="wysiwyg-float-right">right</option>
+ </select>
+ </label>
+ <div class="action-group">
+ <a data-wysihtml5-dialog-action="save" class="button">OK</a>
+ <a data-wysihtml5-dialog-action="cancel">Cancel</a>
+ </div>
</div>
</div>
@@ -29,7 +50,18 @@ def toolbar
def input_html_options
{
- 'active-admin-editor' => true
+ commands: {
+ bold: true,
+ italic: true,
+ link: true,
+ image: true,
+ ul: true,
+ li: true,
+
+ h1: true,
+ h2: true,
+ h3: true
+ }
}.merge(super)
end
@@ -7,6 +7,7 @@ class Engine < ::Rails::Engine
ActiveAdmin.setup do |config|
config.register_javascript 'active_admin/editor'
config.register_stylesheet 'active_admin/editor'
+ config.register_stylesheet 'active_admin/editor/wysiwyg'
end
end
end
@@ -1,4 +1,10 @@
ActiveAdmin.register Page do
+ show do
+ panel "Content" do
+ raw page.content
+ end
+ end
+
form do |f|
f.inputs do
f.input :content, as: :html_editor
Oops, something went wrong.

0 comments on commit 25eb5bc

Please sign in to comment.