rails4中使用wysihtml5 editor (using wysihtml5 editor in rails4)

2014-01-31 15:41

访问量: 3634

NOTICE: please use tinymce instead. ( 请使用 tinymce), refer to: http://siwei.me/blog/posts/using-tinymce-in-rails

steps:

1. download the source code from official website

2. in your page:

<script src="/path-to-wysihtml5/parser_rules/advanced.js">
<script src="/path-to-wysihtml5/dist/wysihtml5-0.3.0.min.js">

create the tool bar

    <div id="wysihtml5-toolbar" style='display:none;'>
      <header>
        <ul class="commands">
          <li data-wysihtml5-command="bold" title="Make text bold (CTRL + B)" class="command"></li>
          <li data-wysihtml5-command="italic" title="Make text italic (CTRL + I)" class="command"></li>
          <li data-wysihtml5-command="insertUnorderedList" title="Insert an unordered list" class="command"></li>
          <li data-wysihtml5-command="insertOrderedList" title="Insert an ordered list" class="command"></li>
          <li data-wysihtml5-command="createLink" title="Insert a link" class="command"></li>
          <li data-wysihtml5-command="insertImage" title="Insert an image" class="command"></li>
          <li data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h1" title="Insert headline 1" class="command"></li>
          <li data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h2" title="Insert headline 2" class="command"></li>
          <li data-wysihtml5-command-group="foreColor" class="fore-color" title="Color the selected text" class="command">
            <ul>
              <li data-wysihtml5-command="foreColor" data-wysihtml5-command-value="silver"></li>
              <li data-wysihtml5-command="foreColor" data-wysihtml5-command-value="gray"></li>
              <li data-wysihtml5-command="foreColor" data-wysihtml5-command-value="maroon"></li>
              <li data-wysihtml5-command="foreColor" data-wysihtml5-command-value="red"></li>
              <li data-wysihtml5-command="foreColor" data-wysihtml5-command-value="purple"></li>
              <li data-wysihtml5-command="foreColor" data-wysihtml5-command-value="green"></li>
              <li data-wysihtml5-command="foreColor" data-wysihtml5-command-value="olive"></li>
              <li data-wysihtml5-command="foreColor" data-wysihtml5-command-value="navy"></li>
              <li data-wysihtml5-command="foreColor" data-wysihtml5-command-value="blue"></li>
            </ul>
          </li>
          <li data-wysihtml5-command="insertSpeech" title="Insert speech" class="command"></li>
          <li data-wysihtml5-action="change_view" title="Show HTML" class="action"></li>
        </ul>
      </header>
      <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> <a data-wysihtml5-dialog-action="cancel">Cancel</a>
      </div>

      <div data-wysihtml5-dialog="insertImage" style="display: none;">
        <label>
          Image:
          <input data-wysihtml5-dialog-field="src" value="http://">
        </label>
        <a data-wysihtml5-dialog-action="save">OK</a> <a data-wysihtml5-dialog-action="cancel">Cancel</a>
      </div>
    </div>

use this css file: (save as: wysihtml5.css )

#wysihtml5-editor-toolbar {
  position: relative;
}

header {
  display: block;
  border-radius: 4px;
  width: 810px;
  background: #f6f6f6;
  position: relative;
  z-index: 1;
  text-align: center;
  border: 1px solid #ddd\9; /* IE 8 and below */
  background-image: linear-gradient(bottom, rgb(238,238,238) 0%, rgb(255,255,255) 100%);
  background-image: -o-linear-gradient(bottom, rgb(238,238,238) 0%, rgb(255,255,255) 100%);
  background-image: -moz-linear-gradient(bottom, rgb(238,238,238) 0%, rgb(255,255,255) 100%);
  background-image: -webkit-linear-gradient(bottom, rgb(238,238,238) 0%, rgb(255,255,255) 100%);
  background-image: -ms-linear-gradient(bottom, rgb(238,238,238) 0%, rgb(255,255,255) 100%);
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3);
  font-size: 0;
  text-align: center;
}

.commands {
  border-left: 1px solid #ddd;
  display: inline-block;
}

[data-wysihtml5-command],
[data-wysihtml5-action],
.fore-color {
  position: relative;
  border-right: 1px solid #ddd;
  border-left: 1px solid #fff;
  list-style: none;
  font-size: 12px;
  display: inline-block;
  cursor: pointer;
  height: 40px;
  width: 68px;
}

[data-wysihtml5-command]:after,
[data-wysihtml5-action]:after,
.fore-color:after {
  content: "";
  background-image: url(../img/spr_toolbar_icons_r1.png);
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

[data-wysihtml5-command]:hover,
[data-wysihtml5-action]:hover,
.fore-color:hover {
  background-image: linear-gradient(bottom, rgb(229,240,226) 0%, rgb(255,255,255) 100%);
  background-image: -o-linear-gradient(bottom, rgb(229,240,226) 0%, rgb(255,255,255) 100%);
  background-image: -moz-linear-gradient(bottom, rgb(229,240,226) 0%, rgb(255,255,255) 100%);
  background-image: -webkit-linear-gradient(bottom, rgb(229,240,226) 0%, rgb(255,255,255) 100%);
  background-image: -ms-linear-gradient(bottom, rgb(229,240,226) 0%, rgb(255,255,255) 100%);
}

[data-wysihtml5-command="bold"]:after {
  background-position: 24px center;
}

[data-wysihtml5-command="italic"]:after {
  background-position: -48px center;
}

[data-wysihtml5-command="insertUnorderedList"]:after {
  background-position: -115px center;
}

[data-wysihtml5-command="insertOrderedList"]:after {
  background-position: -197px center;
}

[data-wysihtml5-command="formatBlock"][data-wysihtml5-command-value="h1"]:after {
  background-position: -344px center;
}

[data-wysihtml5-command="formatBlock"][data-wysihtml5-command-value="h2"]:after {
  background-position: -428px center;
}

[data-wysihtml5-command="createLink"]:after {
  background-position: -271px center;
}

[data-wysihtml5-command="insertImage"]:after {
  background-position: -513px center;
}

.fore-color:after {
  background-position: -741px center;
}

[data-wysihtml5-command="insertSpeech"]:after {
  background-position: -596px center;
}

[data-wysihtml5-action="change_view"]:after {
  background-position: -670px center;
}

.fore-color ul {
  display: none;
  position: absolute;
  z-index: 2;
  top: 40px;
  right: -1px;
  left: -2px;
  border: 1px solid #ccc;
  border-top: 0;
  background: #fff;
  overflow: hidden;
}

.fore-color li {
  display: block;
  margin: 3px;
  width: auto;
  border: 0;
  height: 15px;
}

.fore-color li:after {
  display: none;
}

.fore-color:hover ul {
  display: block;
}

.fore-color [data-wysihtml5-command-value="silver"] {
  background: silver !important;
}


.fore-color [data-wysihtml5-command-value="gray"] {
  background: gray !important;
}

.fore-color [data-wysihtml5-command-value="maroon"] {
  background: maroon !important;
}

.fore-color [data-wysihtml5-command-value="red"] {
  background: red !important;
}

.fore-color [data-wysihtml5-command-value="purple"] {
  background: purple !important;
}

.fore-color [data-wysihtml5-command-value="green"] {
  background: green !important;
}

.fore-color [data-wysihtml5-command-value="olive"] {
  background: olive !important;
}

.fore-color [data-wysihtml5-command-value="navy"] {
  background: navy !important;
}

.fore-color [data-wysihtml5-command-value="blue"] {
  background: blue !important;
}

.fore-color .wysihtml5-command-active {
  outline: 1px solid #666;
  outline-offset: 1px;
}

.wysihtml5-commands-disabled .fore-color ul {
  display: none;
}

.wysihtml5-action-active,
.wysihtml5-command-active {
  box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.2);
  background: #eee !important;
}

.wysihtml5-commands-disabled [data-wysihtml5-command],
.wysihtml5-commands-disabled .fore-color {
  opacity: 0.4;
  cursor: default;
  background-image: none !important;
}

[data-wysihtml5-dialog] {
  color: #333;
  font-size: 14px;
  text-align: left;
  border-radius: 4px;
  -ms-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #ccc;
  padding: 5px 10px;
  background: #FFFBE0;
  position: absolute;
  width: 810px;
  text-align: center;
  top: 45px;
}

[data-wysihtml5-dialog] input {
  color: #333;
  border: 1px solid #ccc;
  padding: 3px;
  width: 300px;
}

[data-wysihtml5-dialog] input:focus {
  outline: 0;
  border: 1px solid #666;
}

[data-wysihtml5-dialog-action] {
  padding: 4px;
  color: #fff;
  cursor: pointer;
}

[data-wysihtml5-dialog-action="save"] {
  background: #007200;
}

[data-wysihtml5-dialog-action="cancel"] {
  background: #999;
}

3. init the js script

<script>
var editor = new wysihtml5.Editor("wysihtml5-textarea", { // id of textarea element
  toolbar:      "wysihtml5-toolbar", // id of toolbar element
  parserRules:  wysihtml5ParserRules // defined in parser rules set 
});
</script>

4. $ wget http://xing.github.io/wysihtml5/img/spr_toolbar_icons_r1.png, copy it to /app/assets/images

$ mv spr_toolbar_icons_r1.png /app/assets/images/wysihtml5_toolbar_icons.png

5. edit wysihtml5.css:

change: url(../img/spr_toolbar_icons_r1.png); to: url('/assets/wysihtml5_toolbar_icons.png');

6. another css

html {
  background: transparent;
}

body {
  margin-bottom: 25px;
}

h1, h2 {
  line-height: 1;
  font-family: Rockwell, "Courier New", Courier, Georgia;
  border-bottom: 1px solid #999;
  font-weight: bold;
  margin: 0 5px 25px 0;
  padding: 0 0 8px;
}

h1 {
  font-size: 27px;
}

h2 {
  font-size: 18px;
}

p, li {
  line-height: 1.5;
}

p, ul, ol {
  padding-bottom: 25px;
}

a {
  color: inherit;
}

strong, b {
  font-weight: bold;
}

i, em {
  font-style: italic;
}

li {
  margin-left: 30px;
}

ul li {
  list-style: disc outside;
}

ol li {
  list-style: decimal outside;
}

li img {
  vertical-align: middle;
  margin: 2px 5px 5px 0;
}

.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;
}

7. change the init js code

    <%= render :partial => 'layouts/wysihtml5_toolbar' %>
    <%= f.text_area :content, {:style=>'width:810px; height: 1000px', :id => 'wysihtml5-textarea'} %>

<%= coffee_script_tag do %>
$ ->
  editor = new wysihtml5.Editor "wysihtml5-textarea",
    toolbar:      "wysihtml5-toolbar",
    parserRules:  wysihtml5ParserRules
    stylesheets: ['/assets/wysihtml5', '/assets/wysihtml5-reset-min', '/assets/wysihtml5_editor' ]
<% end %>

订阅/RSS Feed