JSP頁面引入Ueditor富文本編輯器(1)

最近做項目時,需要用到富文本編輯器,使用了百度的Ueditor編輯器,因此 在這和大家分享下

工具/原料

myeclipse,ueditor

方法/步驟

從官網上 http://ueditor.baidu.com/website/download.html

下載下JSP版

解壓 將ueditor1_4_3_3-utf8-jsp\utf8-jsp\jsp\lib路徑下的jar到自己項目的lib包下;將壓縮包重命名放到WedRoot(Web)下;將<head></head>標籤內,添加如下圖二的四句話

<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

<script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>

<script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"> </script>

<script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>

src為插入文件的相對路徑。

在頁面的需要的位置插入

<div id="editor" style="height:360px">      <script type="text/javascript" charset="utf-8">      UE.getEditor('editor');      </script>   </div>

<div>的id需要和getEditor里的一致;這樣就引進來了。

若覺得富文本默認的標籤,過多可以使用toolbars (UE.getEditor('editor',{toolbars:[['fullscreen', 'source', 'undo']]});)自己添加 ,具體的可以參見 http://fex.baidu.com/ueditor/#start-config 和ueditor的API

此外,自定義富文本還可以修改ueditor.config.js中toolbars的內容,可以在此處根據自己的需求增刪

注意事項

剛開始做,不足之處,還請大家之處!

本文內容整理自網絡, 文中所有觀點看法不代表淘大白的立場