百度Ueditor编辑器的使用


只谈情不闲聊 提交于 2019-11-30 03:56:57

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 */

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

###上传图片后,保存的路径 输入图片说明

##三、UEditor for Laravel5 在Laravel5中应用Ueditor编辑器,请看安装方法:
PhpHub: https://phphub.org/topics/890
Github: https://github.com/argb/laravel-ueditor

工具导航Map