百度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