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

由于微信要做发布动态新闻,那就需要富文本。上网搜索有很多这种插件,比如CKEditor,KindEditor等;最后看到百度一款开源的UEditor,官网打开,风格设计就吸引住了自己。所以就选UEditor了


第一步:下载源码:由于是用php开发,所以下载版本是php版的,为了兼容以前的IE版本,选择版本1.4.2。UEditor


第二步:把下载下来的ueditor1_4_2-utf8-php.zip解压,并复制ueditor1_4_2-utf8-php文件到appache服务器底下(比如我的服务器目录是:D:\PHPWork\AppServ\www);并把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修改路径为服务器根目录www下的项目目录:

window.UEDITOR_HOME_URL = "/ueditor/";

测试上传图片是否成功,如果成功,则在D:\PHPWork\AppServ\www\ueditor\php\upload\image\20140630目录下会有已上传的图片。


注:如果ueditor文件放到项目TestProject中,成为项目TestProject下的一个文件,则上传图片按上面设置,

就会上传到D:\PHPWork\AppServ\www\ueditor\php\upload\image\20140630,

而不会上传到D:\PHPWork\AppServ\www\TestProject\ueditor\php\upload\image\20140630;

如果要上传到预想的目录下,则应该修改ueditor\php目录下的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是后台处理提交的数据,这里就不贴了,就是保存内容到数据库而已

效果:

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


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

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

上一篇:初涉JavaScript模式 (7) : 原型模式 【三】


下一篇:微信小程序封装请求