生活随笔
收集整理的這篇文章主要介紹了
java富文本编辑器wangEditor-3.1.1的使用流程
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
wangEditor-3.1.1官方: http://www.wangeditor.com/
使用文檔：https://www.kancloud.cn/wangfupeng/wangeditor3/332599
特別簡單：只需要引入js就可以了(wangEditor.min.js)官網有
這個是界面，一般功能是夠用了
上傳圖片的返回連接：https://blog.csdn.net/qq_35349982/article/details/103288618
前臺Html
<!DOCTYPE html
>
<html
>
<head
><meta charset
="UTF-8"><title
>上傳頁面
</title
><link href
="${base}/css/bootstrap.min.css" rel
="stylesheet" type
="text/css"><link href
="${base}/css/style.css" rel
="stylesheet" type
="text/css">
</head
>
<body
><div id
="div1" class
="toolbar"></div
><div id
="div2" class
="text"> <!--可使用 min-height 實現編輯區域自動增加高度--
><p
></p
></div
><button id
="btn1">獲取html
</button
><button id
="btn2">獲取text
</button
><script src
="${base}/js/jquery-3.3.1.min.js"></script
>
<script src
="${base}/js/bootstrap.min.js"></script
>
<script type
="text/javascript" src
="${base}/js/wangEditor.min.js"></script
>
<script type
="text/javascript">var E
= window.wangEditorvar editor1
= new E
('#div1',
'#div2') // 兩個參數也可以傳入 elem 對象，class 選擇器// 將圖片大小限制為 2Meditor1.customConfig.uploadImgMaxSize
= 2 * 1024 * 1024// 限制一次最多上傳 3 張圖片editor1.customConfig.uploadImgMaxLength
= 1// 將
timeout 時間改為 3seditor1.customConfig.uploadImgTimeout
= 3000editor1.customConfig.uploadFileName
= 'file'; //設置文件上傳的參數名稱// 配置服務器端地址editor1.customConfig.uploadImgServer
= '/uploadImg'editor1.customConfig.uploadImgHooks
= {before:
function (xhr, editor, files
) {// 圖片上傳之前觸發// xhr 是 XMLHttpRequst 對象，editor 是編輯器對象，files 是選擇的圖片文件console.log
(xhr
)console.log
(editor
)console.log
(files
)//如果返回的結果是
{prevent: true, msg:
'xxxx'} 則表示用戶放棄上傳//
return {// prevent: true,// msg:
'放棄上傳'//
}},success:
function (xhr, editor, result
) {// 圖片上傳并返回結果，圖片插入成功之后觸發// xhr 是 XMLHttpRequst 對象，editor 是編輯器對象，result 是服務器端返回的結果// var url
= result.url// insert
(imgUrl
)},fail:
function (xhr, editor, result
) {// 圖片上傳并返回結果，但圖片插入錯誤時觸發// xhr 是 XMLHttpRequst 對象，editor 是編輯器對象，result 是服務器端返回的結果
},error:
function (xhr, editor
) {// 圖片上傳出錯時觸發// xhr 是 XMLHttpRequst 對象，editor 是編輯器對象
},timeout:
function (xhr, editor
) {// 圖片上傳超時時觸發// xhr 是 XMLHttpRequst 對象，editor 是編輯器對象
},// 如果服務器端返回的不是
{errno:0, data:
[...
]} 這種格式，可使用該配置// （但是，服務器端返回的必須是一個 JSON 格式字符串！！！否則會報錯）customInsert:
function (insertImg, result, editor
) {// 圖片上傳并返回結果，自定義插入圖片的事件（而不是編輯器自動插入圖片！！！）// insertImg 是插入圖片的函數，editor 是編輯器對象，result 是服務器端返回的結果// 舉例：假如上傳圖片成功后，服務器端返回的是
{url:
'....'} 這種格式，即可這樣插入圖片：var url
= result.data
[0
]insertImg
(url
)// result 必須是一個 JSON 格式字符串！！！否則報錯
}}// // 自定義菜單配置// editor1.customConfig.menus
= [//
'head', // 標題//
'bold', // 粗體//
'fontSize', // 字號//
'fontName', // 字體//
'strikeThrough', // 刪除線//
'foreColor', // 文字顏色//
'backColor', // 背景顏色//
'link', // 插入鏈接//
'list', // 列表//
'justify', // 對齊方式//
'emoticon', // 表情//
'image', // 插入圖片//
'table', // 表格//
'video', // 插入視頻//
],editor1.create
()document.getElementById
('btn1').addEventListener
('click',
function () {// 讀取 htmlalert
(editor1.txt.html
())}, false
)document.getElementById
('btn2').addEventListener
('click',
function () {// 讀取 textalert
(editor1.txt.text
())}, false
)</script
>
</body
>
</html
>
與50位技術專家面對面20年技術見證，附贈技術全景圖
總結
以上是生活随笔為你收集整理的java富文本编辑器wangEditor-3.1.1的使用流程的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
