SummerNote 富文本编辑器 - Rails 集成

Posted 2020-12-31 zhangyanpei

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