當前位置:編程學習大全網 - 源碼下載 - 怎麽用百度編輯器來編寫上傳文本

怎麽用百度編輯器來編寫上傳文本

UEditor是壹個開源免費的編輯器,由百度web前端研發部開發所見即所得富文本web編輯器,具有輕量,可定制,註重用戶體驗等特點,開源基於BSD協議,允許自由使用和修改代碼。

官方下載:

/website/download.html

官網上下載完整源碼包,解壓到任意目錄,解壓後的源碼目錄結構如下所示:

_examples:編輯器完整版的示例頁面

dialogs:彈出對話框對應的資源和JS文件

themes:樣式圖片和樣式文件

php/jsp/.net:涉及到服務器端操作的後臺文件,根據妳選擇的不同後臺版本,這裏也會不同,這裏應該是jsp,php,.net

third-party:第三方插件(包括代碼高亮,源碼編輯等組件)

editor_all.js:_src目錄下所有文件的打包文件

editor_all_min.js:editor_all.js文件的壓縮版,建議在正式部署時才采用

editor_config.js:編輯器的配置文件,建議和編輯器實例化頁面置於同壹目錄

第壹步:在項目的任壹文件夾中建立壹個用於存放UEditor相關資源和文件的目錄,此處在項目根目錄下建立,起名為ueditor(自己喜歡)。

第二步:拷貝源碼包中的dialogs、themes、third-party、editor_all.js和editor_config.js到ueditor文夾中。其中,除了ueditor目錄之外的其余文件均為具體項目文件,此處所列僅供示例。

第三步:為簡單起見,此處將以根目錄下的index.php頁面作為編輯器的實例化頁面,用來展示UEditor的完整版效果。在index.php文件中,首先導入編輯器需要的三個入口文件.

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

<title>編輯器完整版實例</title>

<script type="text/javascript" src="ueditor/editor_config.js"></script>

<script type="text/javascript" src="ueditor/editor_all.js"></script>

第四步:然後在index.php文件中創建編輯器實例及其DOM容器。具體代碼示例如下

<textarea name="後臺取值的key" id="myEditor">這裏寫妳的初始化內容</textarea>

<script type="text/javascript">

var editor = new UE.ui.Editor();

editor.render("myEditor");

//1.2.4以後可以使用壹下代碼實例化編輯器

//UE.getEditor('myEditor')

</script>

最後壹步: 在/UETest/ueditor/ editor_config.js中查找URL變量配置編輯器在妳項目中的路

壹個完整的編輯器實例就已經部署到咱們的項目中了!在瀏覽器中輸入http://localhost/UETest 運行下試試UE強大的功能吧

  • 上一篇:編程是用來幹什麽的
  • 下一篇:金牛化工股票(金牛化工股票最新行情分析)
  • copyright 2024編程學習大全網