生活随笔
收集整理的這篇文章主要介紹了
UEditor编辑器保存数据到数据库
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
公眾號文章微信開放的信息有限，無法進行用戶行為分析，我們選用的秀米文章編輯器，由于秀米不支持導出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
>
總結
以上是生活随笔為你收集整理的UEditor编辑器保存数据到数据库的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
