首页 > 特效插件 > 编辑器、计算器 >  summernote，一款基于jQuery的简约富文本编辑器插件正文

summernote，一款基于jQuery的简约富文本编辑器插件

特效介绍
js编辑器summernote

summernote是一款jQuery的简约HTML富文本编辑器插件，支持快捷键操作，提供大量可定制的选项。
使用方法
1、引用以下文件 
<link rel="stylesheet" type="text/css" href="http://www.5imoban.net/download/css/bootstrap3.3.4.min.css">
<link href="dist/summernote.css" rel="stylesheet" />
<script src="http://www.5imoban.net/download/jquery/jQuery-1.10.2.min.js"></script>
<script src="http://www.5imoban.net/download/js/bootstrap3.3.4.min.js"></script>
<script src="dist/summernote.min.js"></script>
<script src="dist/lang/summernote-zh-CN.min.js"></script>
2、在需要使用的地方加入下面的html 
<div class="summernote"></div>
3、调用插件 
$(function(){
 $('.summernote').summernote({
        height: 800,
        tabsize: 2,
        lang: 'zh-CN'
    });
})
4、获取summernote的内容： 
alert($('.summernote').summernote('code'));
下面是扩展：
1、自定义工具栏
Summernote允许您自定义的工具栏。 
$('#summernote').summernote({toolbar:[// [groupName, ]['style',['bold','italic','underline','clear']],['font',['strikethrough','superscript','subscript']],['fontsize',['fontsize']],['color',['color']],['para',['ul','ol','paragraph']],['height',['height']],]});
2、高度和焦点设置 
$('#summernote').summernote({
    height: 300,                 // set editor height
    minHeight: null,             // set minimum height of editor
    maxHeight: null,             // set maximum height of editor
    focus: true                  // set focus to editable area after initializing summernote
});
3、编辑器销毁 
$('#summernote').summernote('destroy');
4、获取和设置HTML内容

    获取编辑器内容 
var markupStr = $('#summernote').summernote('code')
    如果初始化了多个编辑器，可以通过jquery的eq方法获取某个编辑器的HTML内容。eg,获取第二个编辑器的。 
var markupStr = $('.summernote').eq(1).summernote('code');
    给指定的编辑器设置HTML内容 
var markupStr = 'hello world';
$('#summernote').summernote('code', markupStr);
5、isEmpty 返回编辑器中内容是否为空
    编辑区域获取焦点时会自动生成
    即使并没有实际内容。所以summernote提供了这个方法来判断内容是否真的为空。 
if ($('#summernote').summernote('isEmpty')) { alert('contents is empty'); }
6、disable使编辑器处于不可用状态。 
$('#summernote').summernote('disable');
7、调用enable可以使编辑器从不可以转换到可用状态。 
$('#summernote').summernote('enable');
8、onImageUpload 重写图片上传方法 
// onImageUpload callback
$('#summernote').summernote({
  callbacks: {
    onImageUpload: function(files) {
      // upload image to server and create imgNode...
      $summernote.summernote('insertNode', imgNode);
    }
  }
});
9、PHP-summernote 使用 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Summernote</title>
  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
    //这个css和js请到官网进行下载（点击上面的summernote就可以直达官网）
  <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script>
</head>
<body>
<form action="{:U(upload/upload)}"  method="post">
  <div id="summernote"><p>Hello Summernote</p></div>
   <input type="submit" value="提交">
</form>
</body>
</html>
<script type="text/javascript">
    //调用富文本编辑
    $(document).ready(function() {
        var $summernote = $('#summernote').summernote({
            height: 300,
            minHeight: null,
            maxHeight: null,
            focus: true,
            //调用图片上传
            callbacks: {
                onImageUpload: function (files) {
                    sendFile($summernote, files[0]);
                }
            }
        });
        //ajax上传图片
        function sendFile($summernote, file) {
            var formData = new FormData();
            formData.append("file", file);
            $.ajax({
                url: "{:U('Upload/upload_img')}",//路径是你控制器中上传图片的方法，下面controller里面我会写到
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                type: 'POST',
                success: function (data) {
                    $summernote.summernote('insertImage', data, function ($image) {
                        $image.attr('src', data);
                    });
                }
            });
        }
    });
</script>
10、PHP - 文件上传处理 
public function upload_img(){
    if ($_FILES) {
        if (!$_FILES['file']['error']) {
            //生成的文件名（时间戳，精确到毫秒）
            list($usec, $sec) = explode(" ", microtime());
            $name = ((float)$usec + (float)$sec) * 1000;
            $ext = explode('.', $_FILES['file']['name']);
            $filename = $name . '.' . $ext[1];
            $folder = date("Ymd");
            $targetDir = C('UPLOAD_PICTURE_URL') . $folder;
            //如果上传的文件夹不存在，则创建之
            if ($targetDir) {
                @mkdir($targetDir);
            }
            //文件目录
            $targetDir_url = $targetDir . '/article';
            //如果上传的文件夹不存在，则创建之
            if ($targetDir_url) {
                @mkdir($targetDir_url);
            }
            //图片上传的具体路径就出来了
            $destination = $targetDir_url . DIRECTORY_SEPARATOR . $filename; //change this directory
            $location = $_FILES["file"]["tmp_name"];
            //将图片移动到指定的文件夹****核心代码
            move_uploaded_file($location, $destination);
            echo C('UPLOAD_PICTURE') . $folder . '/article' . DIRECTORY_SEPARATOR . $filename;//change this URL
        } else {
            echo $message = 'Ooops!  Your upload triggered the following error:  ' . $_FILES['file']['error'];
        }
    }
}
11、summernote 编辑内容在前端显示
    方法一：htmlspecialchars_decode
    方法二： 
<textarea type="text"  name="content" id="summernote"></textarea>
<input type="hidden" id="article_content" value="{$post.content}">
$(function(){
    var innerhtml = $("#article_content").val();
    $("#summernote").val(innerhtml);
});
TAGS: js编辑器  summernote 
下载 提取码/密码：h2ue(点击复制密码) 预览