【微信公众平台开发】公布动态新闻好帮手UEditor富文本
2015-12-28 09:54
676 查看
因为微信要做公布动态新闻。那就须要富文本。
上网搜索有非常多这样的插件,比方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:\PHPWork\AppServ\www);并把ueditor1_4_2-utf8-php重名为ueditor。
第三步:依据官网文档提示,在ueditor文件夹下创建一个页面demo.html。填入html代码例如以下:
第四步:保存,点开demo.html。假设出现富文本编辑框,则成功。
第五步:配置ueditor.all.js,在第一行開始找到window.UEDITOR_HOME_URL改动路径为server根文件夹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}", /* 上传保存路径,能够自己定义保存路径和文件名称格式 */
第六步:配置富文本工具图标
第七步:读取富文本内容
第八步:完好功能。总体代码例如以下:
注:
效果:
上网搜索有非常多这样的插件,比方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:\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改动路径为server根文件夹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是后台处理提交的数据。这里就不贴了。就是保存内容到数据库而已
效果:
相关文章推荐
- 数据库序列( SEQUENCE)的使用
- UITableView的常用方法
- UIScrollView常用属性以及代理
- 手势返回控制器
- LeetCode:Unique Binary Search Trees
- php学习日记第十二棒(require、require_once、include、include_once)
- BlockingQueue
- UICollectionView基础
- 把arduino当AVRISP烧写器Arduino给Arduino烧boot
- UISearchDisplayController搜索栏控制器
- [LeetCode] 128. Longest Consecutive Sequence 解题思路
- uinavigationcontrollerdemo
- EasyUI表单内容整理
- Masonry自动计算行高
- juery动态添加删除表格中的行
- iOS UITableView(三) 为tableView添加图片实现电话薄
- 对UIView动画和Core Animation的关系的一点理解
- 《MVC + EasyUI 》——利用Ajax给Action传值
- Ant之build.xml详解
- 解决UNIX环境高级变成中找不到apue.h问题