基于jQuery和bootstrap的富文本编辑插件—summernote

1、使用HTML5 doctype

2、引入jQuery、bootstrap、font-awesome文件


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


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

3、添加div到body,设置ID=”summernote”; 此目标元素将稍后呈现为summernote编辑工具。

<div id="summernote">div>

4、文档准备就绪后运行以下脚本!

// 初始化插件
$(function () {
    $("#summernote").summernote();
})

5、基本设置

高度和焦点

$('#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
});

语言

lang:'zh-CN',

自定义工具栏

toolbar: [
    // [groupName, [list of button]]
    ['style', ['bold', 'italic', 'underline', 'clear']],
    ['font', ['strikethrough', 'superscript', 'subscript']],
    ['fontsize', ['fontsize']],
    ['color', ['color']],
    ['para', ['ul', 'ol', 'paragraph']],
    ['height', ['height']]
  ]

6、图片上传

多图上传demo


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>summernotetitle>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/summernote.css">
    <script type="text/javascript" src="js/jquery-3.1.1.min.js">script>
    <script type="text/javascript" src="js/bootstrap.min.js">script>
    <script type="text/javascript" src="js/summernote.min.js">script>
    <script type="text/javascript" src="js/summernote-zh-CN.js">script>
head>
<body>

    <div class="summernote">div>
    <div class="summernote">div>
    <div class="summernote">div>

    <script type="text/javascript"> 
        // 初始化插件
        $(function () {
            $(".summernote").summernote();
        })

        var $s = $(".summernote")
        $s.summernote({
            // 语言
            lang:'zh-CN',
            // 高度与焦点
            height:200,
            width:200,
            // 对话框显示在body而非summernote
            dialogsInBody: true,
            dialogsFade:true,
            // 自定义工具栏
            toolbar:[
                ['picture',['picture']]
            ],
            // 图片上传
            callbacks: {
                // summernote提供的API:onImageUpload
                onImageUpload:function (files) {
                    img = sendFile(files[0])
                }
            }
        })

        function sendFile(file) {
                var formData = new FormData()
                formData.append('file',file[0])
                $.ajax({
                    url:'upload',   //后台文件上传接口
                    type:'POST',
                    data:formData,
                    processData:false,//告诉jQuery不要加工数据
                    contentType:false,//告诉jQuery,在request head里不要设置Content-Type
                    success:function (data) {
                        $("#summernote").summernote('insertImage',data,function ($image) {
                            $image.css('width','200px')
                            $image.css('height','200px')
                        })  //调用内部api——insertImage以路径的形式插入图片到文本编辑区
                            // 传递回调函数来修改图像——没用!!
                    },
                    error:function () {
                        alert("上传失败")
                    }
                })
            }


    script>
body>
html>

官方文档猛戳这里呀 U•ェ•*U

你可能感兴趣的:(插件123)