使用官方提供的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)

05-04 11:10