wangEdite使用小例子

最新推荐文章于 2024-05-07 11:22:36 发布

余情淡漠

最新推荐文章于 2024-05-07 11:22:36 发布

阅读量1.3k

点赞数

分类专栏：富文本编辑器富文本上传图片到服务器文章标签： wangEdite富文本编辑器

富文本编辑器同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

富文本上传图片到服务器

1 篇文章 0 订阅

订阅专栏

1，为什么要学

研究一段事件富文本，富文本在写博客，填写详细信息等非常实用。必然是有大用之处，学了不为过。

2，wangedite的api

https://www.kancloud.cn/wangfupeng/wangeditor3/335769 收下地址吧。十分钟看完不为过。

3，下载 js插件地址在下面，引入`wangEditor.js`或者`wangEditor.min.js都可以`

https://github.com/wangfupeng1988/wangEditor/releases

4，创建什么的都很简单，难点就是上传图片的配置

默认是没有本地上传的，

加入这句代码就有了---今天的主题就是用base64上传图片（因为这个简单，哈哈）

editor.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存图片

5，下面来实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
   <!--不要忘了引入富文本的js文件  你需要换一下路径-->
   <script src="static/wangEditor.min.js"></script>
</head>
<body>
  <div id="container">
      <div class="row">
              <!--将整个视图区分为两个部分左9右-->
          <div class="col-md-9">
                          <div class="row">
                              <div class="col-md-12">
                             <!---这里使用wangedite   存储图片使用的base64-->
                                  <div id="WangEdite">
                                      <p>欢迎使用 wangEditor 富文本编辑器</p>
                                  </div>
                              </div>
                          </div>
          </div>
                    <div class="col-md-3">        
                          <!--提交按钮-->
                          <div class="row">
                              <div class="col-md-6 col-md-offset-4">
                                  <button id="submit" class="btn btn-default">发布博客</button>
                              </div>
                          </div>
                    </div>
      </div>
  </div>
<script>
    var E = window.wangEditor
    var editor = new E('#WangEdite')
    editor.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存图片
    editor.create();     //创建富文本编辑器

    //点击提交命令，将数据提交到后台
    $('#submit').click(function (){
        var content = editor.txt.html();     //获取富文本数据
            $.post("/saveController",{content:content},function(data){
               Alert(data);
            },'text');
    

    });

</script>
</body>
</html>

6，后台代码（一个controller搞定）

    @GetMapping("/saveController")
    public String success(String content){
       //插入到数据库
        blogService.insertBlog(blog);
        return "views/success";
    }

7，数据库对应字段数据类型（需要注意的地方）

longtext

8,最后结果是这种

欢迎使用 wangEditor 富文本编辑器<img src="https://img-blog.csdnimg.cn/2022010612212835182.png" style="max-width:100%;"> </body>

由此会发现数据量好大，建议将这样的数据保存到文件中，或者使用图片存服务器的方法。但是这个简单，没办法（哈哈）。占时先用着，因为图片需求并不是很大。

我把结果显示

数据库中

vscode中

浏览器中

余情淡漠

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
wangEdite使用小例子

1，为什么要学研究一段事件富文本，富文本在写博客，填写详细信息等非常实用。必然是有大用之处，学了不为过。2，wangedite的api https://www.kancloud.cn/wangfupeng/wangeditor3/335769 收下地址吧。十分钟看完不为过。3，下载 js插件地址在下面，引入wangEditor.js或者wangEditor.min.j...
复制链接

扫一扫