Ueditor富文本编辑器
生活随笔
收集整理的這篇文章主要介紹了
Ueditor富文本编辑器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Ueditor富文本編輯器
Ueditor富文本編輯器插件應用步驟如下:
1.引入css和js文件
2.設置承載標簽
設置富文本編輯器的承載標簽,必須設置id屬性。一般使用textarea或script標簽,使用script標簽時,必須設置type=”text/plain”
3.實例化富文本編輯器
getEditor的參數為承載標簽的id值,可增加第二個參數進行自定義配置項
4.實例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Ueditor富文本編輯器測試</title><link rel="stylesheet" type="text/css" href="themes/default/css/umeditor.css"><script type="text/javascript" src="third-party/jquery.min.js"></script><script type="text/javascript" src="umeditor.config.js"></script><script type="text/javascript" src="umeditor.min.js"></script><script type="text/javascript" src="lang/zh-cn/zh-cn.js"></script> </head> <body><!-- 設置承載標簽,一般使用兩種標簽(textarea、script,使用script標簽時,必須設置type="text/plain"),必須要設置id屬性 --><textarea id="content"></textarea><script type="text/javascript"> // 實例化富文本編輯器,getEditor第一個參數就是承載標簽的id值var um = UM.getEditor('content',{//自定義配置項會覆蓋配置文件中的配置項initialFrameWidth:600, //初始化編輯器寬度initialFrameHeight:300, //初始化編輯器高度isShow : true, //默認顯示編輯器initialContent:'請編輯內容',//自定義工具欄toolbar:['source | undo redo | bold italic underline strikethrough | superscript subscript | forecolor backcolor | removeformat |','insertorderedlist insertunorderedlist | selectall cleardoc paragraph | fontfamily fontsize' ,'| justifyleft justifycenter justifyright justifyjustify |','link unlink | emotion image video | map','| horizontal print preview fullscreen', 'drafts', 'formula'],// 自定義字體大小fontsize:[10, 11, 12, 14, 16, 18, 20, 24, 36] }) </script></body> </html>效果圖:
代碼及相關文件詳見GitHub主頁 富文本編輯器插件Ueditor
https://github.com/Jianxq12/ITcast/tree/master/Ajax
轉載于:https://www.cnblogs.com/Jianxq12/p/7684306.html
總結
以上是生活随笔為你收集整理的Ueditor富文本编辑器的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 软件工程第四周作业之四则运算-C#实现
- 下一篇: ionic入门教程第一课--环境搭建和新