zoukankan      html  css  js  c++  java
  • SummerNote 富文本编辑器

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

  • 相关阅读:
    koa学习
    nodejs工作大全
    《程序员周先生之前端开发面试题》
    使用vue技术应当使用的技术和兼容性选择
    IdentityServer4简单入门demo系列 (一)认证服务端
    IdentityServer4客户端获取Token的方法
    wpf 右键菜单的使用
    wpf 在用户控件里,关掉父级窗口
    EntityFramework集成Sqlite的详细步骤
    wpf DataGrid 里的列模版的值绑定
  • 原文地址:https://www.cnblogs.com/zhangyanpei/p/9522865.html
Copyright © 2011-2022 走看看