基于bootstrap的编辑器summernote学习一

最新推荐文章于 2021-09-23 17:34:35 发布

HelloWenye

最新推荐文章于 2021-09-23 17:34:35 发布

阅读量1.9k

点赞数

分类专栏：前端框架bootstrap 文章标签：编辑器 bootstrap

本文链接：https://blog.csdn.net/HelloWenye/article/details/49882777

版权

前端框架bootstrap 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近接触到的bootstrap真的是很酷炫，对于我这种不会前端的人来说，就是。好，今天我们来学习一下summernote。

直接放出代码大家看下，如何在网页中创建出summernote编辑器。1、在线引用summernote的css和js。2、网页中定义div显示编辑器。3、初始化编辑器。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>//html5的定义,如果不这么定义编辑器格式会有问题
<html>
<head>
  <span style="color:#3366FF;"><script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
  <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  <link href="http://cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
  <link rel="stylesheet" href="http://cdn.bootcss.com/summernote/0.5.1/summernote.css" />
  <script src="http://cdn.bootcss.com/summernote/0.5.1/summernote.min.js"></script></span>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<span style="color:#CC6600;"><div class="container">
		<div id="summernote">Hello summernote</div>
	</div>
	<script></span>
<span style="color:#990000;">$(document).ready(function() {
  $('#summernote').summernote({
      height:300,
      focus:true,
      maxHeight:null,
      minHeight:null,
  });
});</span>
</script>
</body>
</html>

效果如图：

为大家转一篇文章：http://blog.geekcome.com/bootstrap-online-text-editor-based-on-the-jquery-plugin-summernote-rpm，里面有更加详细的summernote教程和一些基本方法。

HelloWenye

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
基于bootstrap的编辑器summernote学习一

最近接触到的bootstrap真的是很酷炫，对于我这种不会前端的人来说，就是。好，今天我们来学习一下summernote。直接放出代码大家看下，如何在网页中创建出summernote编辑器。蓝色代表在线引用summernote的css和js，黄色用来网页中显示编辑器，红色初始化编辑器。<%@ page language="java" contentType="text/html;
复制链接

扫一扫

专栏目录