18720358503 在线客服 人才招聘 返回顶部
企业动态 技术分享 行业动态

summernote,一款根据jQuery的简洁富文字编写器软件

2021-02-11分享 "> 对不起,没有下一图集了!">
js编辑器summernote
summernote是一款jQuery的简洁HTML富文字编写器软件,适用便捷键实际操作,出示很多可订制的选择项。
应用方式 1、引入下列文档
 link rel="stylesheet" type="text/css" href="download/css/bootstrap3.3.4.min.css" 
 link href="dist/summernote.css" rel="stylesheet" / 
 script src="download/jquery/jQuery-1.10.2.min.js" /script 
 script src="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 /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="bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" 
 script src="ajax/libs/jquery/2.1.4/jquery.js" /script 
 script src="bootstrap/3.3.5/js/bootstrap.js" /script 
 //这一css和js请到官方网站开展免费下载(点一下上边的summernote便可以直通官方网站)
 link href="ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet" 
 script src="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);
});

本站內容假如沒有标明出處,全部权均归本网站,出示完全免费免费下载使用,但不可用以商业服务赢利。假如标明出處,则来源于于互连网,本网站不做商业服务主要用途。假如本网站有內容侵害到您的利益,请致函网站站长电子邮箱,本网站当马上删掉。

联络大家
"> 对不起,没有下一图集了!">
在线咨询