1.下载summernote插件
再要使用的使用引入这几个文件即可
<link href="<?php echo base_url();?>assets/app/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
<link rel="stylesheet" href="<?php echo base_url();?>assets/summ/dist/summernote-lite.css">
<link rel="stylesheet" href="<?php echo base_url();?>assets/summ/dist/summernote-bs4.css">
<script src="<?php echo base_url();?>assets/app/js/jquery.min.js?v=2.1.4"></script>
<script src="<?php echo base_url();?>assets/app/js/bootstrap.min.js?v=3.3.6"></script>
<script src="<?php echo base_url();?>assets/summ/dist/summernote.min.js"></script>
<script src="<?php echo base_url();?>assets/summ/dist/lang/summernote-zh-CN.min.js"></script>
2.再用编辑器时写下以下代码 HTML代码
<div class="form-group">
<label class="col-sm-2 control-label">新闻内容:</label>
<div class="col-sm-10">
<div id="summernote"></div>
</div>
</div>
效果图
3.图片上传 jq代码
$(document).ready(function() { //实例化编辑器
$('#summernote').summernote({
height: 300, //编辑器高
minHeight: 200, //最小高度
maxHeight: 400, //最大高度
lang:'zh-CN', //设置语言
focus: true,
//调用图片上传
callbacks: { //图片上传方法重写
onImageUpload: function (files) {
sendFile(files[0]);
}
}
});
//ajax上传图片
function sendFile(file) { //图片上传方法
var formData = new FormData();
formData.append("file", file);
$.ajax({
url: "<?php echo base_url();?>admin/C_area/upload",//路径是你控制器中上传图片的方法,
data: formData,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function (data){
if(data == 2){
alert('上传失败');
}else{
$('#summernote').summernote('insertImage', data, function ($image) {
$image.attr('src', data);
});
}
}
});
}
});
4. PHP代码 使用的是cI框架
//上传图片方法
public function upload(){
$month = date('Ymd',time());
$dir = "./uploads/".$month."/";
if(!is_dir($dir))//判断目录是否存在
{
mkdir ($dir,0777,true);//如果目录不存在则创建目录
};
$res = move_uploaded_file($_FILES["file"]["tmp_name"],$dir. $_FILES["file"]["name"]);
if($res){
echo base_url()."uploads/".$month."/".$_FILES["file"]["name"];
}else{
echo 2; //上传失败
}
}