1. 程式人生 > >富文字編輯器(php)

富文字編輯器(php)

首先去ueditor的官網下載PHP版本的檔案,網站地址:http://ueditor.baidu.com/website/download.html

然後解壓出來 改名為ueditor 並放到專案檔案中。

前端程式碼:

1、引入ueditor的相關檔案

<script src="ueditor/ueditor.config.js"></script>
<script src="ueditor/ueditor.all.min.js"></script>
<script src="ueditor/lang/zh-cn/zh-cn.js"></script>

2、在body標籤中放進該標籤

<script type="text/plain" id="editor" name="Detail"></script>

name屬性是為了php檔案獲取值,用$_POST['Detail']就可以了

3、配置一下該編輯器的屬性,在script標籤中

首先要獲取id,自己設定 的id,在這裡我自己弄了寬和高 ,有個滾動效果,並減少了工具欄的很多功能,因為我主要是圖片上傳

<script>

UE.getEditor('editor', {
   initialFrameWidth: 500, initialFrameHeight: 300, autoHeightEnabled: false,
   toolbars: [['fullscreen', 'source', 'undo', 'redo', 'simpleupload', 'insertimage']]
});

</script>

 

ueditor的配置檔案更改:

ueditor/php/config.json檔案的imagePathFormat需要改為你自己專案儲存圖片的資料夾,比如我的就是"imagePathFormat": "/back/image/{filename}"

至於imageUrlPrefix這個配置項,php一般是不需要更改的

 

最後就是php檔案了,就是form表單提交一樣接受name屬性就好了,$_POST['Detail'],然後就插入資料庫。