summernote-详细使用

summernote-详细使用

官网网址： http://summernote.org/

初始化 summernote

1	CODE: $("#summernote").summernote();

 高度和焦点设置

1 2 3 4 5 6

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

 编辑器销毁

1	CODE： $('#summernote').summernote('destroy');

获取和设置HTML内容

1、获取编辑器内容

1	CODE： var markupStr = $('#summernote').summernote('code')

2、如果初始化了多个编辑器，可以通过jquery的eq方法获取某个编辑器的HTML内容。eg,获取第二个编辑器的。

1	CODE： var markupStr = $('.summernote').eq(1).summernote('code');

3、给指定的编辑器设置HTML内容

1 2 3 4 5

CODE：   var markupStr = 'hello world';   $('#summernote').summernote('code', markupStr);

isEmpty

返回编辑器中内容是否为空

编辑区域获取焦点时会自动生成

即使并没有实际内容。所以summernote提供了这个方法来判断内容是否真的为空。

 

1	CODE: if ($('#summernote').summernote('isEmpty')) { alert('contents is empty'); }

disable, enable

disable使编辑器处于不可用状态。

1	CODE:　$('#summernote').summernote('disable');

调用enable可以使编辑器从不可以转换到可用状态。

1	$('#summernote').summernote('enable');

onImageUpload

重写图片上传方法

1 2 3 4 5 6 7 8 9

CODE: // onImageUpload callback $('#summernote').summernote({   callbacks: {     onImageUpload: function(files) {       // upload image to server and create imgNode...       $summernote.summernote('insertNode', imgNode);     }   } });

PHP-summernote 使用

页面代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

CODE:   "en">   "UTF-8">      "http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">         //这个css和js请到官网进行下载（点击上面的summernote就可以直达官网）   "http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet">        "{:U(upload/upload)}"  method="post">    "summernote"> Hello Summernote    "submit" value="提交">

 

PHP - 文件上传处理

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

CODE：   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'];             }         }     }

 

 

summernote 编辑内容在前端显示

方法一：　　htmlspecialchars_decode

方法二：　　

1 2 3 4 5 6 7

<code>"text"</code>  <code>name=</code><code>"content"</code> <code>id=</code><code>"summernote"</code><code>> "hidden" id="article_content" value="{$post.content}">   $(function(){          var innerhtml = $("#article_content").val();          $("#summernote").val(innerhtml); });