UEditor编辑器保存数据到数据库

最新推荐文章于 2024-01-25 10:54:56 发布

原创最新推荐文章于 2024-01-25 10:54:56 发布 · 2k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#UEditor

其他专栏收录该内容

1 篇文章

订阅专栏

公众号文章微信开放的信息有限，无法进行用户行为分析，我们选用的秀米文章编辑器，由于秀米不支持导出HTML，所以需要借助UEditor编辑器来处理。

1. 秀米编辑器复制图文内容

在这里插入图片描述
文章进入这个表示，即可进行复制到剪切板

2. 黏贴到UEditor编辑器中

在这里插入图片描述

3. 点击保存即可和后台进行数据交互

具体代码实现

下载UEditor jsp版，解压到自己的项目中
springboot项目中新建一个editor.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>UEditor编辑器</title>

    <script type="text/javascript" src="env.js"></script>
    <script type="text/javascript" src="third-party/jquery-1.10.2.js"></script>
</head>
<body>
<br>
标题： <input type="text" id="title">
<input type="button" onclick="sub()" value="保存">
<br><br>
<script>
    function sub() {
        var json = {
            "title": $("#title").val(),
            "content": ue.getContent()//取值文本编辑器
        };
        var url = httpUrl +"editor/save";
        $.ajax({
            type: "POST",
            url: url,
            contentType: "application/json;charset=utf-8",
            data:JSON.stringify(json),
            dataType: "json",
            success: function (data) {
                alert(data.msg);
                //赋值文本编辑器
                ue.setContent(data.content);
            },
        });

    }
</script>


<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain">这里写你的始化内容</script>
<!-- 配置文件 -->
<script type="text/javascript" src="ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="_examples/editor_api.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
    var ue = UE.getEditor('container');
</script>



</body>
</html>

引入js，即可实现简单的demo样式

<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain">这里写你的始化内容</script>
<!-- 配置文件 -->
<script type="text/javascript" src="ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="_examples/editor_api.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
    var ue = UE.getEditor('container');
</script>

自定义提交按钮，获取文本编辑器内容，使用ajax实现数据交互

标题： <input type="text" id="title">
<input type="button" onclick="sub()" value="保存">
<br><br>
<script>
   function sub() {
       var json = {
           "title": $("#title").val(),
           "content": ue.getContent()//取值文本编辑器
       };
       var url = httpUrl +"editor/save";
       $.ajax({
           type: "POST",
           url: url,
           contentType: "application/json;charset=utf-8",
           data:JSON.stringify(json),
           dataType: "json",
           success: function (data) {
               alert(data.msg);
               //赋值文本编辑器
               ue.setContent(data.content);
           },
       });
   }
</script>