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)
SummerNote 富文本编辑器 - Rails 集成的更多相关文章
- summernote富文本编辑器
下载summernote官方demo,解压,把文件夹中的summernote.js,summernote.css和font整个文件夹都放到服务器对应的项目目录里 引入summernote 所需要的bo ...
- summernote富文本编辑器的使用
最近在开发一个微信公众号的后台,微信公众号编辑的文章一直没有得到很好地适应,大多数人也是在其他的编辑软件中编辑好之后直接去复制到微信公众平台中,考虑到复制后会排版出现问题,所以给大家推荐一款很不错的W ...
- summernote富文本编辑器配合validate表单验证无法进行表单提交的问题
1.使用summernote富文本编辑器提交图片到服务器 在使用bootstrap中,我们用到了summernote富文本编辑器,使用summernote将图片上传到服务器中,参考我的上篇文章http ...
- django之百度Ueditor富文本编辑器后台集成
Python3 + Django2.0 百度Ueditor 富文本编辑器的集成 百度富文本编辑器官网地址:http://fex.baidu.com/ueditor/ 疑问:为什么要二次集成? 答案:因 ...
- summernote 富文本编辑器限制输入字符长度
项目中需要一个比较简单的富文本编辑器,于是选中了summernote .虽然比较轻量,但是在开发中也遇到了几个问题,在此记录一下. 1:样式和bootstrap冲突,初始化之后显示为: .note-e ...
- summernote(富文本编辑器)将附件与图片上传到自己的服务器(vue项目)
1.上传图片至自己的服务器(这个官方都有例子,重点介绍附件上传)图片上传官方网址 // onChange callback $('#summernote').summernote({ callback ...
- 【实践】简洁大方的summernote 富文本编辑器插件的用发——小技巧
前面说到summernote 的上传,可是我要知道怎么获取内容呀,很简单调用一下函数便可: 获取内容: $("#user-work-content").summernote(&qu ...
- yii2集成富文本编辑器redactor
作者:白狼 出处:http://www.manks.top/article/yii2_redactor本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保 ...
- vue集成百度UEditor富文本编辑器
在前端开发的项目中.难免会遇到需要在页面上集成一个富文本编辑器.那么.如果你有这个需求.希望可以帮助到你 vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简.于是 ...
随机推荐
- CVTE前端一面
1.如果不设置cookie失效时间: 关闭浏览器自动关闭. 有没有手写过cookie HttpOnly 2.跨域的几种方式 如何实现cors 2.web安全: xss,csrf 如何防范 3. ...
- redis过期机制(官网文档总结)
官网地址:https://redis.io/commands/expire redis过期定义如下: Set a timeout on key. After the timeout has expir ...
- 001.[python学习]写在前面的
0.多动手写写也许你所说的问题就不是问题: 1.最好的帮助文档是dir和help,如下图: 2.如果为了快速完成任务可以选择IDE,否则尽量不要依赖它,因为它的智能导致自己的无能: 3.也许有其他语言 ...
- Open CDN 2.0管控端和节点端安装
原文:http://www.safecdn.cn/cdn/2018/12/opencdn-2-0/1076.html OpenCDN是一套快速部署CDN加速的工具,针对专门提供CDN加速服务的企业或对 ...
- 《python编程快速上手》
第一部分 编程基础 @表达式 ** % // @ >>> int(3.4) 3 >>>round(3.555,2)3.56 @判断条件时:0和0.0和‘’都是Fal ...
- Vue初接触 stage1
开始学Vue辣!哈哈哈哈哈真的好好玩啊Vue!这个写法我真的太爱了! stage1 4-27 先写一下安装Vue devtools时遇到的问题(说来神奇,我是写第一个实例的时候试着在控制台打印了这个空 ...
- ssh 使用技巧
参考:https://deepzz.com/post/how-to-setup-ssh-config.html SSH Config 那些你所知道和不知道的事 预览目录 配置项说明 相关技巧 管理多组 ...
- Java开发体系
蓦然回首自己做开发已经十年了,这十年中我获得了很多,技术能力.培训.出国.大公司的经历,还有很多很好的朋友.但再仔细一想,这十年中我至少浪费了五年时间,这五年可以足够让自己成长为一个优秀的程序员,可惜 ...
- RocketMQ入门(消费者)_3
消费者角色: 1. 推式(一般建议用推式) 2. 拉式 消费模式: 1. 集群(cluster) --均衡负载消费 2. 广播(broadcasting) --发布和订阅 ...
- mybatis中两种取值方式?谈谈Spring框架理解?
1.mybatis中两种取值方式? 回答:Mybatis中取值方式有几种?各自区别是什么? Mybatis取值方式就是说在Mapper文件中获取service传过来的值的方法,总共有两种方式,通过 $ ...