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