首页 > 代码库 > 【微信公众平台开发】发布动态新闻好帮手UEditor富文本

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

2024-07-10 09:40:17   221人阅读

由于微信要做发布动态新闻，那就需要富文本。上网搜索有很多这种插件，比如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=http://www.mamicode.com/"ueditor.config.js"></script>>
第四步：保存，点开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 =http://www.mamicode.com/= '')>
注：
dealcontent.php是后台处理提交的数据，这里就不贴了，就是保存内容到数据库而已
效果：


联系
我们