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> ![](http://www.huzhihao.cn/wp-content/uploads/2018/09/360截图180809258213884.png) ![](http://www.huzhihao.cn/wp-content/uploads/2018/09/360截图16780626538065.png)![](http://www.huzhihao.cn/wp-content/uploads/2018/09/360截图18270619597462.png) ![](http://www.huzhihao.cn/wp-content/uploads/2018/09/360截图17140303181340.png) ![](http://www.huzhihao.cn/wp-content/uploads/2018/09/360截图18720118498352.png)
点赞
收藏

评论区

加载中...

相关推荐

MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1

文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s

Oracle 分组与拼接字符串同时使用

SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(

MySQL部分从库上面因为大量的临时表tmp_table造成慢查询

背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_

皕杰报表之UUID

​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为

手写Java HashMap源码

HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22

2020年前端实用代码段,为你的工作保驾护航

有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )