百度Ueditor编辑器的使用

时间 2019-11-17

标签百度 ueditor 编辑器使用繁體版

原文原文链接

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

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

##1、精简编辑器工具栏html

###原Ueditor工具栏java

###精简Ueditor工具栏因为Ueditor带的功能过多，这里咱们精简一下，选一些最经常使用的便可，以下：laravel

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

###如何简化？只须要在实例化编辑器的时候，选本身须要的工具便可，详情能够参考Ueditor官方文档github

demo.html文件web

<!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>

##2、上传图片 ###上传路径配置json

上传路径须要在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 */

###项目文件夹

###上传图片后，保存的路径

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