summernote富文本编辑器

最新推荐文章于 2025-06-26 12:28:30 发布

猪猪不爱敲代码

最新推荐文章于 2025-06-26 12:28:30 发布

阅读量743

点赞数

文章标签： summernote富文本编辑器

本文详细介绍如何使用summernote富文本编辑器实现图片上传功能，包括通过ajax将图片数据发送至服务器，以及如何在控制器中处理图片上传，将其保存至指定文件夹。同时，文章还提供了将图片路径插入数据库的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.summernote富文本编辑器

summernote是一款基于bootstrap的富文本编辑器，是一款十分好用的文本编辑器，还附带有图片和文件上传功能。

那么在我们网站中想吧这个图片上传到服务器指定文件夹中，就要在选择图片是进行ajax移动图片。

1.1了解summernote本身图片保存方式。

summernote默认保存的是图片的base64数据，并没有存储图片文件。

2.进行summernote图片的保存

Html代码：

复制代码

Summernote

//这个css和js请到官网进行下载（点击上面的summernote就可以直达官网）

Hello Summernote

复制代码

从Html代码中就可以看出怎么使用这个富文本编辑器

直接

Hello Summernote

因为下面代码的缘故，这里的id最好用summernote（你也可以改，如果不嫌麻烦，官方都是这么用的）

JS代码：

复制代码

Controller控制器

复制代码
public function upload_img()
{
if ( $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots if (!$ _FILES[‘file’][‘error’]) {
//生成的文件名（时间戳，精确到毫秒）
list($usec, $sec) = explode(" ", microtime());
$n a m e = ((f l o a t)$ 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'];
        }
    }
}

复制代码
　　以上就是把用富文本编辑器在选择图片的时候，通过ajax传递数据，controller把图片移动到指定服务器文件夹中，并且在编辑器中显示出来图片。

效果：

3.提交图片，将数据插入到数据库中

上面js和controller配合将图片移动到指定的服务器文件夹中，然后ajax返回图片的完整路径以及保存的图片名，以放入编辑文本中，点击提交保存到数据库中。

接下来点击提交按钮，进行文本的提交。

public function upload(){
//将form表单提交的内容存入数据库
}
　　form表单提交的内容都会保存吧！

4.关于java代码

关于使用java的方法，上面的html和js代码基本没啥改动，就是ajax路径不同，其他的很好改的，

这里有篇关于官方的java的demo演示，大家可以参考一下：http://wb-mgrigorov.rhcloud.com/summernote

还有官方的源代码：https://github.com/l0rdn1kk0n/wicket-bootstrap/tree/4f97ca783f7279ca43f9e2ee790703161f59fa40/bootstrap-extensions/src/main/java/de/agilecoders/wicket/extensions/markup/html/bootstrap/editor

以上就是完整的summernote富文本编辑器保存图片到服务器指定文件夹，相当完整，99%会解决你的烦恼，如果解决了你的问题，记得帮我点个赞哦！！这是我到国外网站学习到的，很难得，就跟大家一起分享！！！

记得点赞，帮你解决问题，也是对我的肯定！点赞！谢谢！

文本编辑后，我们得到的是带有html标签的内容，那么怎么把这些带有html标签的内容在文章中显示出来呢，请观看续集：http://www.cnblogs.com/jingmin/p/6602658.html