由于微信要做发布动态新闻,那就需要富文本。上网搜索有很多这种插件,比如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>
第五步:配置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富文本,布布扣,bubuko.com
原文:http://blog.csdn.net/qivan/article/details/36175445