百度Ueditor编辑器的使用

Ueditor 编辑器非常强大，是一款几乎能满足任何需求的富文本编辑器，开箱即用，不用繁琐的配置，本人博客中用到，于是将使用的方法总结出来，以供参考。

注：本编辑器用的为php版本下载包，下载地址

##一、精简编辑器工具栏

###原Ueditor工具栏

输入图片说明

###精简Ueditor工具栏由于Ueditor带的功能过多，这里我们精简一下，选一些最常用的即可，如下：

输入图片说明

精简后的编辑器工具栏，是不是变得简洁、清爽多了。

###如何简化？只需要在实例化编辑器的时候，选自己需要的工具即可，详情可以参考Ueditor官方文档

demo.html文件

<!DOCTYPE HTML>
<html lang="en-US">

<head>
    <meta charset="GBK">
    <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">

          // 实例化编辑器，content对应上面的id，与官方例子相比这里定制了工具栏，初始化编辑器高度为500 
    var ue = UE.getEditor('container', {
        toolbars: [
            [
                'fullscreen', 'source', '|',
                'bold', 'italic', 'underline', 'blockquote', '|',
                'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', '|',
                'paragraph', 'fontfamily', 'fontsize', '|',
                'justifyleft', 'justifycenter', 'justifyright', '|',
                'link', 'unlink', '|',
                'simpleupload', 'insertimage', 'attachment', 'insertcode', '|',
                'horizontal', 'inserttable', 'preview', 'searchreplace', '|',
                'help'
            ]
        ],
        initialFrameHeight: 500,
        initialFrameWidth: 700,

    });
    </script>
</body>

</html>

##二、上传图片 ###上传路径配置

上传路径需要在php/config.json文件中配置，路径配置主要相关的配置项是 PathFormat 和 UrlPrefix 的配置项。
图片上传重要的饿两个参数：imagePathFormat、imageUrlPrefix

**imagePathFormat：**为上传后，图片保存的路径，并且可以重新配置文件名，建议路径可以写服务器的根路径，如本测试项目ueditor_web放在本地服务器根目录下，图片上传后保存的地址http://localhost/ueditor_web/upload/images/，建议imagePathFormat该参数可以写根路径/ueditor_web/upload/images/。
**imageUrlPrefix：**图片的前缀，如果你的上边的保存路径为相对路径/ueditor_web/upload/images/，则返回到编辑器的路径也为相对路径/ueditor_web/upload/images/xxx/xxx.jpg，如果我们添加了图片域名前缀后，就为绝对路径：http://localhost/ueditor_web/upload/images/

更详细的上传路径配置，请看官网上传路径配置

config.json文件

 "imageUrlPrefix": "http://localhost", /* 图片访问路径前缀 */
    "imagePathFormat": "/ueditor_web/upload/images/{yyyy}{mm}/{dd}{hh}{ss}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
                                /* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */
                                /* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */
                                /* {time} 会替换成时间戳 */
                                /* {yyyy} 会替换成四位年份 */
                                /* {yy} 会替换成两位年份 */
                                /* {mm} 会替换成两位月份 */
                                /* {dd} 会替换成两位日期 */
                                /* {hh} 会替换成两位小时 */
                                /* {ii} 会替换成两位分钟 */
                                /* {ss} 会替换成两位秒 */
                                /* 非法字符 \ : * ? " < > | */
                                /* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */

###项目文件夹输入图片说明