2. IT
    3. 基于jQuery和bootstrap的富文本编辑插件—summernote

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

    xiaoxiao2021-03-25  71

    1、使用HTML5 doctype

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

    <!-- 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/2.1.4/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.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

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>summernote</title> <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

    转载请注明原文地址: https://ju.6miu.com/read-34300.html

    技术

    最新回复(0)