網頁開發中文本編輯器UEditor的使用


首先看一下效果圖:

首先我們需要來認識下UEditor,它是由百度web前端研發部開發所見即所得富文本web編輯器,並且是基於BSD協議的開源產品,允許自由使用和修改,開源就意味着可以自己來定制這個編輯器。

實現方法:

首先先下載UEditer,官方網址:http://ueditor.baidu.com/website/,根據自己需求下載相應的版本(其實里面都有demo實現調用編輯器)

下面就是一個簡單的調用實例,只需要引入ueditor.config.js,ueditor.all.min.js,lang/zh-cn/zh-cn.js這三個文件即可,還需要其他功能的可以繼續去挖掘

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" charset="utf-8" src="UEditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="UEditor/ueditor.all.min.js"> </script>
<!--建議手動加在語言,避免在ie下有時因為加載語言失敗導致編輯器加載失敗-->
<!--這里加載的語言文件會覆蓋你在配置項目里添加的語言類型,比如你在配置項目里配置的是英文,這里加載的中文,那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="UEditor/lang/zh-cn/zh-cn.js"></script>
</head>
<body>
    <script id="container" name="content" type="text/plain">這里就是編輯器的正文</script>
    <!-- 實例化編輯器 -->
    <script type="text/javascript">
            var ue = UE.getEditor('container');
    </script>
</body>
</html>

當把該編輯器放在一個表單中,提交后即可通過content來讀取編輯器的內容。

在官方提供的demo中可以查看一下提供還有許多提供的方法:

比如:使用editor.getContent()方法可以獲得編輯器的內容

   使用editor.getPlainTxt()方法可以獲得編輯器的帶格式的純文本內容

 需要的話可以參考官方文檔

bbg


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM