PHP如何搭建百度Ueditor富文本編輯器

原創

流星雨-123

2020-03-05 15:31

下載UEditor

官網：下載地址

將下載好的文件解壓到thinkphp項目中，本文是解壓到PUBLIC目錄下並改文件夾名稱爲ueditor

轉存失敗重新上傳取消

第一步 引入javascript

在html中如入下面的js語句引入相關文件

1 2	`<script` `type="text/javascript"` `charset="utf-8"` `src="__PUBLIC__/ueditor/ueditor.config.js"></script>` `<script` `type="text/javascript"` `charset="utf-8"` `src="__PUBLIC__/ueditor/ueditor.all.js"></script>`

第二步 添加textare文本域並設置id值

1	`<textarea` `type="text"` `name="content"` `id="EditorId"` `placeholder="請輸入內容"></textarea>`

第三步 初始化UEditor編輯器

在html代碼中添加下面的代碼初始化UEditor編譯器

<script type="text/javascript" charset="utf-8">//初始化編輯器

window.UEDITOR_HOME_URL = "__PUBLIC__/ueditor/";//配置路徑設定爲UEditor所放的位置

window.onload=function(){

window.UEDITOR_CONFIG.initialFrameHeight=600;//編輯器的高度

window.UEDITOR_CONFIG.initialFrameWidth=1200;//編輯器的寬度

var editor = new UE.ui.Editor({

imageUrl : '',

fileUrl : '',

imagePath : '',

filePath : '',

imageManagerUrl:'', //圖片在線管理的處理地址

imageManagerPath:'__ROOT__/'

});

editor.render("EditorId");//此處的EditorId與<textarea name="content" id="EditorId">的id值對應 </textarea>

}

</script>

第四步 設置圖片上傳路徑

UEditor編輯器的默認圖片上傳路徑是根目錄下/ueditor/php/upload/image/目錄，沒有這個目錄會自動創建，如果要自定義圖片上傳路徑，可以在ueditor/php/config.json文件中12行處修改。

最後貼上完整的html代碼：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

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

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

</head>

<body>

<form action="__URL__/receiver" method="post" accept-charset="utf-8">

<textarea type="text" name="content" id="EditorId" placeholder="請輸入內容"></textarea>

<input type="submit" value="提交">

</form>

<script type="text/javascript" charset="utf-8">//初始化編輯器

window.UEDITOR_HOME_URL = "__PUBLIC__/ueditor/";//配置路徑設定爲UEditor所放的位置

window.onload=function(){

window.UEDITOR_CONFIG.initialFrameHeight=600;//編輯器的高度

window.UEDITOR_CONFIG.initialFrameWidth=1200;//編輯器的寬度

var editor = new UE.ui.Editor({

imageUrl : '',

fileUrl : '',

imagePath : '',

filePath : '',

imageManagerUrl:'', //圖片在線管理的處理地址

imageManagerPath:'__ROOT__/'

});

editor.render("EditorId");//此處的EditorId與<textarea name="content" id="EditorId">的id值對應 </textarea>

}

</script>

</body>

</html>

效果圖

轉存失敗重新上傳取消

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.

PHP如何搭建百度Ueditor富文本編輯器

naviact數據打不開

XAMPP配置多個網站項目

安裝apache+php+mysql

xampp 多網站配置

thinkPHP的使用

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結