zoukankan      html  css  js  c++  java
  • 【微信公众平台开发】公布动态新闻好帮手UEditor富文本

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

    上网搜索有非常多这样的插件,比方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:PHPWorkAppServwww);并把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:PHPWorkAppServwwwueditorphpuploadimage20140630文件夹下会有已上传的图片。


    注:假设ueditor文件放到项目TestProject中,成为项目TestProject下的一个文件,则上传图片按上面设置,

    就会上传到D:PHPWorkAppServwwwueditorphpuploadimage20140630,

    而不会上传到D:PHPWorkAppServwwwTestProjectueditorphpuploadimage20140630;

    假设要上传到预想的文件夹下。则应该改动ueditorphp文件夹下的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是后台处理提交的数据。这里就不贴了。就是保存内容到数据库而已

    效果:



  • 相关阅读:
    Delphi高手突破第二章(1),堆与栈,构造与析构函数
    终于懂了:TWinControl与TCustomControl真正区别之处(TWinControl系统自绘,TCustomControl是Delphi自绘)
    Delphi高手突破第二章(3),封装,继承,多态
    不浪费自己一点一滴精力和体力在与自己目标不相干的事情上
    Delphi高手突破第二章(2),对象大小,类方法与类引用,错误的面向对象设计
    推荐微软Windows 8 Metro应用开发虚拟实验室
    利用TCP传输协议实现基于Socket的聊天程序
    持续集成
    Android 4.1 Surface系统变化说明
    自动化测试整理 STAF/STAX & Robot Framework
  • 原文地址:https://www.cnblogs.com/zfyouxi/p/5081633.html
Copyright © 2011-2022 走看看