【微信公众平台开发】公布动态新闻好帮手UEditor富文本

因为微信要做公布动态新闻。那就须要富文本。

上网搜索有非常多这样的插件，比方CKEditor。KindEditor等；最后看到百度一款开源的UEditor。官网打开，风格设计就吸引住了自己。所以就选UEditor了。

第一步：下载源代码：因为是用php开发。所下面载版本号是php版的，为了兼容曾经的IE版本号，选择版本号1.4.2。UEditor

第二步：把下载下来的ueditor1_4_2-utf8-php.zip解压，并复制ueditor1_4_2-utf8-php文件到appacheserver底下(比方我的server文件夹是：D:PHPWorkAppServwww);并把ueditor1_4_2-utf8-php重名为ueditor。

第三步：依据官网文档提示，在ueditor文件夹下创建一个页面demo.html。填入html代码例如以下：

<!DOCTYPE HTML>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <title>ueditor demo</title>
</head>

<body>
    <!-- 载入编辑器的容器 -->
    <script id="container" name="content" type="text/plain">
        这里写你的初始化内容
    </script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="ueditor.config.js"></script>
    <!-- 编辑器源代码文件 -->
    <script type="text/javascript" src="ueditor.all.js"></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('container');
    </script>
</body>

</html>

第四步：保存，点开demo.html。假设出现富文本编辑框，则成功。

第五步：配置ueditor.all.js，在第一行開始找到window.UEDITOR_HOME_URL改动路径为server根文件夹www下的项目文件夹：

window.UEDITOR_HOME_URL = "/ueditor/";

測试上传图片是否成功，假设成功，则在D:PHPWorkAppServwwwueditorphpuploadimage20140630文件夹下会有已上传的图片。

注：假设ueditor文件放到项目TestProject中，成为项目TestProject下的一个文件，则上传图片按上面设置，

就会上传到D:PHPWorkAppServwwwueditorphpuploadimage20140630，

而不会上传到D:PHPWorkAppServwwwTestProjectueditorphpuploadimage20140630;

假设要上传到预想的文件夹下。则应该改动ueditorphp文件夹下的config.json文件两个地方：

"imageUrlPrefix": "http://112.128.122.22", /* 图片訪问路径前缀 */
"imagePathFormat": "/TestProject/ueditor/php/upload/image/{yyyy}{mm}/{time}{rand:6}", /* 上传保存路径,能够自己定义保存路径和文件名称格式 */

第六步：配置富文本工具图标

UE.getEditor('container',{toolbars:[["undo","redo",'|',"bold","italic","underline",'|',
    	                                     'insertorderedlist', 'insertunorderedlist', '|',
    	                                     "superscript","subscript",'|',
    	                                     "justifyleft","justifycenter","justifyright","justifyjustify",
    	                                     '|',"indent","rowspacingbottom","fontfamily","fontsize",
    	                                     '|',"forecolor","backcolor",'|',"insertimage",'music', 'insertvideo','|'
    	                                     ,"link","unlink",'|',"inserttable","deletetable",'|',
    	                                     'searchreplace', 'preview', "fullscreen"]],   
    	initialFrameWidth:900,initialFrameHeight:400});

第七步：读取富文本内容

 var ue = UE.getEditor('container');

第八步：完好功能。总体代码例如以下：

<!DOCTYPE HTML>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <title>ueditor</title>
    <script type="text/javascript">
		function checkForm(obj)
		{
			if( document.getElementsByName("title")[0].value == '')
			{
				alert("标题不能为空！
");
				return false;
			}
	
			var author = document.getElementsByName("author")[0].value;
			if( author == '')
			{
				alert("作者不能为空！");
				return false;
			}
		}
	</script>
</head>

<body>
	<form action="dealcontent.php" method="post" onSubmit="return checkForm()">
	
		<div>
			<span>标题:</span><input type="text" name="title" />
		</div>
		<div>
			<span>作者:</span><input type="text" name="author" />
		</div>
	    <!-- 载入编辑器的容器 -->
	    <script id="container" name="content" type="text/plain">
                           这里写你的初始化内容
    	</script>
	    <input type="submit"  value="保存" onClick="GetText()"/>
    </form>
    
    <!-- 配置文件 -->
    <script type="text/javascript" src="ueditor.config.js"></script>
    <!-- 编辑器源代码文件 -->
    <script type="text/javascript" src="ueditor.all.js"></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
    	UE.getEditor('container',{toolbars:[["undo","redo",'|',"bold","italic","underline",'|',
    	                                     'insertorderedlist', 'insertunorderedlist', '|',
    	                                     "superscript","subscript",'|',
    	                                     "justifyleft","justifycenter","justifyright","justifyjustify",
    	                                     '|',"indent","rowspacingbottom","fontfamily","fontsize",
    	                                     '|',"forecolor","backcolor",'|',"insertimage",'music', 'insertvideo','|'
    	                                     ,"link","unlink",'|',"inserttable","deletetable",'|',
    	                                     'searchreplace', 'preview', "fullscreen"]],   
    	initialFrameWidth:900,initialFrameHeight:400});
    	
        var ue = UE.getEditor('container');
        
        function GetText()
        {
        	alert(ue.getContent());
        }
    </script>
</body>
</html>

注：

dealcontent.php是后台处理提交的数据。这里就不贴了。就是保存内容到数据库而已

效果：