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

上网搜索有非常多这样的插件，比方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. Eclipse用法和技巧九：自动添加try/catch块2

    上一篇介绍了如何给未检查异常快速增加try/catch语句,这里在补充一点其他相关操作.有时候我们增加了try/catch之后还需要在加一个finally块,比如android上每次分配一个curso ...

  2. 基于visual Studio2013解决C语言竞赛题之1083人机博弈

        题目 解决代码及点评 /************************************************************************/ /* ...

  3. Linux内核驱动将多个C文件编译成一个ko文件的方法——每一个C文件中都有module_init与module_exit

    以两个C文件为例: 将本该被分别编译成adc_device.ko和adc_driver.ko的adc_device.c.adc_driver.c编译成一个ko文件! 採用方法: 第一步.改动C文件 1 ...

  4. Incompatible namespaceIDs或连接被对端重置异常的解决

    Workaround 1: Start from scratch I can testify that the following steps solve this error, but the si ...

  5. LLBL Gen Pro 5.0

    LLBL Gen Pro 5.0 企业应用开发入门 Solutions Design 公司于2016年5月发布了LLBL Gen Pro 5.0,这个新版本的发布出乎于我的意料.我的猜想是从4.2升级 ...

  6. 查看内存数据的函数（ByteToHex和ByteToBin，最终都变成String）

    unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...

  7. 【ASP.NET Web API教程】2.4 创建Web API的帮助页面

    原文:[ASP.NET Web API教程]2.4 创建Web API的帮助页面 注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本博客文章,请先看前面的内容. 2.4 ...

  8. MapReduce调度与执行原理之作业初始化

    前言 :本文旨在理清在Hadoop中一个MapReduce作业(Job)在提交到框架后的整个生命周期过程,权作总结和日后参考,如有问题,请不吝赐教.本文不涉及Hadoop的架构设计,如有兴趣请参考相关 ...

  9. RTSP 消息拼装实例代码

    整理了下之前文章提到的RTSP实例的代码,主要是拼装各类消息字段. 首先,抽取一个公共函数,用来根据消息类型,生成不同的format,供sprintf试用. char * GetRTSPCmd( co ...

  10. ecshop 微信支付插件

    眼下已完毕支付測试,可以支付成功,支付逻辑自己实现.后台通知.发货通知.订单查询未測. 当中用到了redis 下载