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

上网搜索有非常多这样的插件，比方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是后台处理提交的数据。这里就不贴了。就是保存内容到数据库而已

效果：

【微信公众平台开发】公布动态新闻好帮手UEditor富文本的更多相关文章

  1. 第九篇 ：微信公众平台开发实战Java版之如何实现自定义分享内容

    第一部分:微信JS-SDK介绍 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统 ...

  2. Senparc.Weixin.MP SDK 微信公众平台开发教程（十八）：Web代理功能

    在Senparc.Weixin.dll v4.5.7版本开始,我们提供了Web代理功能,以方便在受限制的局域网内的应用可以顺利调用接口. 有关的修改都在Senparc.Weixin/Utilities ...

  3. Senparc.Weixin.MP SDK 微信公众平台开发教程（十七）：个性化菜单接口说明

    前不久微信上线了个性化菜单接口,Senparc.Weixin SDK也已经同步更新. 本次更新升级Senparc.Weixin.MP版本到v13.5.2,依赖Senparc.Weixin版本4.5.4 ...

  4. David Camp 微信公众平台开发官方内容拓展版---PHP版本

    微信公众平台开发(一) 配置接口 微信公众平台开发(二) 微信公众平台示例代码分析 微信公众平台开发(三) 订阅事件(subscribe)处理 微信公众平台开发(四) 简单回复功能开发 微信公众平台开 ...

  5. PHP实现微信公众平台开发 全套视频资源下载

    好久没有在博客园更新东西了,今天给大家分享一份比较不错的视频学习资源吧. 主要是关于PHP实现微信公众平台开发,  不知道大家对于微信平台的开发有多少了解,那么今天就从基础开始吧,资源目录如下(PS ...

  6. 【原创】【2015最新】微信公众平台开发手把手入门之一：缘起微信公众号（PHP，MYSQL, BAE）

    最近因为业务的需要,老板布置做了两个月简单的的微信公众平台开发,从网上搜了一些资料,实话说资料不多. 在参考学习的过程中也遇到了不少难缠的小问题,虽然不难逾越,但是确实浪费了时间. 我发现网上仅有不多 ...

  7. Senparc.Weixin.MP SDK 微信公众平台开发教程（三）：微信公众平台开发验证

    要对接微信公众平台的"开发模式",即对接到自己的网站程序,必须在注册成功之后(见Senparc.Weixin.MP SDK 微信公众平台开发教程(一):微信公众平台注册),等待官方 ...

  8. Senparc.Weixin.MP SDK 微信公众平台开发教程（四）：Hello World

    =============  以下写于2013-07-20 ============= 这一篇文章其实可以写在很前面,不过我还是希望开发者们尽多地了解清楚原理之后再下手. 通过上一篇Senparc.W ...

  9. Senparc.Weixin.MP SDK 微信公众平台开发教程（五）：使用Senparc.Weixin.MP SDK

    Senparc.Weixin.MP SDK已经涵盖了微信6.x的所有公共API. 整个项目的源代码以及已经编译好的程序集可以在这个项目中获取到:https://github.com/JeffreySu ...

随机推荐

  1. haproxy timeout server 46000 后台超时时间

    [root@wx03 ~]# sh ./1.sh Wed Jul 6 19:54:40 CST 2016 <html><body><h1>504 Gateway T ...

  2. 深入浅出Hive企业级架构优化、Hive Sql优化、压缩和分布式缓存(企业Hadoop应用核心产品)

    一.本课程是怎么样的一门课程(全面介绍)    1.1.课程的背景       作为企业Hadoop应用的核心产品,Hive承载着FaceBook.淘宝等大佬 95%以上的离线统计,很多企业里的离线统 ...

  3. 火炬之光模型导出(Unity载入火炬之光的模型)

    先说明几点.导出方案可行,測试通过. python和blender的版本号一定要用下文中所说的.新的Python或者是新的Blender版本号都无法完美导入. 导入导出脚本能够选择 (http://c ...

  4. 【书评】RHCSA/RHCE Red Hat Linux 认证学习指南（第6版）EX200 & EX300

    这次参加 CSDN 举办的读书活动,正赶上项目忙,看得也是断断续续,拖了2周了,才能来写这个书评. ========== 书评的分割线 ========== 首先,我会肯定的告诉你,不论你是一名专业的 ...

  5. linux内核系统调用--sendfile函数

    在apache,nginx,lighttpd等webserver其中,都有一项sendfile相关的配置,在一些网上的资料都有谈到sendfile会提升文件传输性能,那sendfile究竟是什么呢?它 ...

  6. Android触控屏幕Gesture(GestureDetector和SimpleOnGestureListener的使用教程)

    1.当用户触摸屏幕的时候,会产生许多手势,例如down,up,scroll,filing等等,我们知道View类有个View.OnTouchListener内部接口,通过重写他的onTouch(Vie ...

  7. 在命令行获取标准输入序列的反互序列，pep序列和长度信息

    近期对序列文件处理的比較多,时常要看一些核酸序列的反向互补序列,长度.可能的翻译序列. 曾经我常用seqBuider 来查看.假设能在命令行直接查看.想必是极好的. 这是一个perl脚本.只是我把它的 ...

  8. Servlet的学习（一）

    初识Servlet Servlet是一门专门用于开发动态web资源的技术,Sun公司在其API中提供了一个Servlet接口(当然,我们不会去直接实现这个接口,而是去继承其实现类会更好),因此,狭义的 ...

  9. jQuery事件大全

    jQuery事件大全 attribute:  $(" p" ).addclass(css中定义的样式类型) 给某个元素添加样式 $(" img" ).attr( ...

  10. MFC/VC CxImage 简单配置与使用 (完整版)

    如果本篇文章还不能解决你在生成解决方案以及便宜过程中的问题 请参阅: http://blog.csdn.net/afterwards_/article/details/7997385 我个人配置过来成 ...