特效介绍
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); });
部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!