"PHP" thinkphp build Baidu Ueditor Rich Text editor ____php

Brief Introduction

Ueditor is developed by the Baidu Web front-end research and development of the Rich Text Web editor, with lightweight, customizable, user experience and other characteristics, open source based on the MIT protocol, allowing the free use and modification of code.

Download Ueditor

Website Download: http://ueditor.baidu.com/website/download.html

Extract the downloaded files into the thinkphp project, this article is extracted to the public directory and change the folder name to Ueditor

The first step is to introduce JavaScript in HTML, as in the following JS statement into the relevant files

<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>

Step two to add the Textare text field and set the ID value

<textarea  type= "text"  name= "content" id= "Editorid" placeholder= "Please enter" ></textarea>

Step Three initializes the Ueditor editor Add the following code to the HTML code to initialize the Ueditor compiler

<script type= "Text/javascript" charset= "Utf-8" >//initialization editor      window. Ueditor_home_url = "__public__/ueditor/";//configuration Path set to Ueditor position      window.onload=function () {  & nbsp     window. ueditor_config.initialframeheight=600;//Editor's height         window. ueditor_config.initialframewidth=1200;//Editor width         var editor = new UE.ui.Editor ({    & nbsp       IMAGEURL: ',             FILEURL: ',         &N Bsp   ImagePath: '             FilePath: ',             Imagemanagerurl: ',//Picture online management address             Imagemanagerpath: ' __root__/'     &N Bsp
 });         Editor.render ("Editorid")//Here Editorid and <textarea name= "content" id= "Editorid" > ID value corresponds to </textarea>    } </script>

fourth step to set up the picture upload pathUeditor Editor's default image upload path is the root directory under the/ueditor/php/upload/image/directory, no this directory will automatically create, if you want to customize the image upload path, you can in ueditor/php/ The Config.json file is modified at 12 lines.

Finally, paste the complete HTML code:

 <! DOCTYPE html>  

 
Effect Chart 

 

 
reference Documentationhttp://blog.csdn.net/lshake/article/details/52554992

Http://www.jb51.net/article/94848.htm