Wangeditor website Address: http://wangeditor.github.io/
Today, I suddenly remembered to engage in the use of Rich text editor, originally wanted to use Baidu's Ueditor, but seemingly campus network to the wall. And then found this editor from the knowledge, the advantage is the interface is concise, the document is clear. Shortcomings are obvious, relatively simple, the requirements are not very high, or can be:)
After the download is complete, only dist this file is used.
Author's view on the cloud published on the manual address:
http://www.kancloud.cn/wangfupeng/wangeditor2/113994
Front page code:
<! DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Editor Test</title> <!--introduction of wangeditor.css--> <link rel="stylesheet" type="text/css" href=". /dist/css/wangeditor.min.css "> <style type="Text/css"> .container {width : 800 px ; height : auto ; margin : px Auto ; .container TextArea {height : 400 px ; </style></head><body><div class="container"> <div><H1></H1></div> <div> <form Action="function.php" method="POST"> <p> <strong>Article title:</Strong> </P> <p> <input type="text" name="title"> </P> <p> <strong>Article content:</Strong> </P> <p> <textarea id="textarea1" name="Content"></textarea> </P> <p> <input type="Submit" value="Submit"> </P> </form> </div></div><!--The introduction of jquery and Wangeditor.js--> <!--Note: JavaScript must be placed at the end of the body, otherwise there may be problems--<script type="text/javascript" src="... /dist/js/lib/jquery-1.10.2.min.js "></script><script type="text/javascript" src="... /dist/js/wangeditor.min.js "></script><!--here to cite jquery and wangeditor.js--><script type="Text/javascript"> var editor = new wangeditor (' textarea1 '); //Upload image (for example) editor.config.uploadImgUrl = '/upload.php '; Editor.config.uploadImgFileName = ' myFileName '; Editor.create (); </script></body></html>For the sake of simplicity, I used the form submission method, the action corresponding to the function.php file code is as follows:
<?php/** * Created by PhpStorm. * User: koastal * Date: 2016/5/8 * Time: 17:06 */echo $_REQUEST[‘content‘];
Function.php's role is to look at the Rich Text editor to submit past data, in practical applications $_request[' content ' contents will be saved to the database.
In the previous section of the code we can see editor.config.uploadImgUrl = ‘/upload.php‘;
Configure the Image Upload action page, upload.php
<?php/** * Created by Phpstorm. * User:koastal * DATE:2016/5/8 * time:16:38 * *$imgInfo=$_files[' myFileName '];$oldname=$imgInfo[' name '];$tmp _name=$imgInfo[' Tmp_name '];$temp= Explode (".",$oldname);$newname= Time ().".".$temp[Count ($temp)-1];move_uploaded_file ($tmp _name,' upload/'.$newname);Echo $dir="http //". getenv (' Http_host ')."/upload/".$newname;The role of upload.php is to implement the image rollover in the background, and then return the actual address of the picture.
Using the Wangeditor Rich Text editor
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
