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

    官网:https://summernote.org/

    它的特点:

    • 开源
    • 使用Bootstrap 3.xx到4.xx
    • 轻量级(js + css:100Kb)
    • 智能用户交互
    • 适用于所有主要浏览器:
      • Safari,Chrome,Firefox,Opera,Edge和Internet Explorer 9+
    • 适用于所有主要操作系统:
      • Windows,MacOS,Linux

    使用方法:

    1.添加引用

    <!-- include libraries(jQuery, bootstrap) -->

    <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>

    <!-- include summernote css/js -->

    <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>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.10/lang/summernote-zh-CN.min.js"></script>

    tips:

    此框架是基于bootstrap的,所以要添加bootstrap引用; 引用了中文语言包。

    2.前端代码:

    <div id="summernote"></div>

    <script>

    $(document).ready(function () {

    $('#summernote').summernote({

    height: '300px',

    lang: 'zh-CN',

    callbacks: {

    onImageUpload: function (files) {//上传图片 sendFile(files); } } });

    $('#summernote').summernote('code', '测试富文本框');

    //赋值

    var content = $('#summernote').summernote('code');

    //取值

    console.log(content); });

    function sendFile(files) {

    $('#summernote').summernote('insertImage', 'https://avatar.csdn.net/C/B/7/3_zero_295813128.jpg');//插入图片 //处理上传图片及诶口并返回路径...

    }

    </script>

  • 相关阅读:
    DB2 for Z/os Statement prepare
    Foreign key (referential) constraints on DB2 LUW v105
    复制Informational constraints on LUW DB2 v105
    DB2 SQL Mixed data in character strings
    DB2 create partitioned table
    MVC中使用EF的技巧集(一)
    Asp.Net MVC 开发技巧(二)
    Linq使用技巧及查询示例(一)
    Asp.Net MVC 开发技巧(一)
    Asp.Net MVC Identity 2.2.1 使用技巧(八)
  • 原文地址:https://www.cnblogs.com/langhaoabcd/p/10446219.html
Copyright © 2011-2022 走看看