SummerNote 富文本編輯器 - Rails 集成

使用官方提供的CDN服務

將下面一段加入layout文件中

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>

使用本地靜態文件

當使用CDN的時候，summernote.css會自動從雲端加載summernote的字體配置文件，而當下載summernote.css到本地時，rails只會在本地查找字體，因此會致使富文本編輯器的工具欄顯示異常，解決方式就是手動下載字體文件，並修改 summernote.css 裏面加載字體的配置。

# 進入 Rails 應用根目錄
mkdir -p app/assets/fonts
curl -o app/assets/fonts/summernote.eot http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/font/summernote.eot
curl -o app/assets/fonts/summernote.woff http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/font/summernote.woff
curl -o app/assets/fonts/summernote.ttf http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/font/summernote.ttf

# 按下面的方式修改 summernote.css （注意：後面字符串有可能不同）
url("./font/summernote.eot?e557617934c52ea068954af79ed7c221")  => asset_url("summernote.eot")
url("./font/summernote.woff?e557617934c52ea068954af79ed7c221") => asset_url("summernote.woff")
url("./font/summernote.ttf?e557617934c52ea068954af79ed7c221")  => asset_url("summernote.ttf")　　

建立富文本編輯框（以上配置好了，如今使用 summernote 來建立富文本編輯器 HTML+JS）

// html
……
<div id="editor"></div>
……

// js
$(document).ready(function(){
  $("#editor").summernote({height: 500});
});

注意： 若是想要一個頁面建立多個富文本編輯框，只須要經過 $(".note-editable") 就能夠獲取每一個富文本編輯框的內容，而後根據需求分別處理便可。

問題1： 配置以後依然沒法正常顯示工具欄？

有可能沒有將字體加入預編譯中，修改 config/initializers/assets.rb，而後給 Rails.application.config.assets.precompile 增長 （*.eot, *.ttf, *.woff）