1.集成前提條件：
????????1. 需要集成百度編輯器到環(huán)境中
????????2.https環(huán)境下才可以導(dǎo)出數(shù)據(jù)到百度編輯器，如果不是https環(huán)境，會(huì)出現(xiàn)錯(cuò)誤
????????
然后我們開始講解如何集成：
2.引入資源：
//百度編輯器需要修改的文件（配置與原始的配置不一樣，后面會(huì)詳細(xì)講）
<script type="text/javascript" src="/static/lib/ueditor1_4_3_3-utf8-php/utf8-php-xiumi/ueditor.config.js?t=1"></script>
<script type="text/javascript" src="/static/lib/ueditor1_4_3_3-utf8-php/utf8-php-xiumi/ueditor.all.min.js"></script>
//秀米編輯器的JS,這個(gè)需要下載(下載可以去xiumi.us下載，也可以參考博主提供的相關(guān)代碼)
<script type="text/javascript" src="/static/lib/ueditor1_4_3_3-utf8-php/utf8-php-xiumi/xiumi-ue-dialog-v5.js"></script>
3.初始化百度編輯器：
<script>
?? ?var ue = UE.getEditor('editor');
</script>
//xiumi-ue-dialog-v5.js可以去官網(wǎng)下載，也可以直接使用博主提供的相關(guān)代碼
UE.registerUI('dialog', function (editor, uiName) {
? ? var btn = new UE.ui.Button({
? ? ? ? name ? : 'xiumi-connect',
? ? ? ? title ?: '秀米',
? ? ? ? onclick: function () {
? ? ? ? ? ? var dialog = new UE.ui.Dialog({
? ? ? ? ? ? ? ? iframeUrl: '相對(duì)地址/XIUMI connect.html',//這個(gè)參數(shù)中的html需要下載或者使用博主提供的代碼（后面會(huì)貼出代碼）
? ? ? ? ? ? ? ? editor ? : editor,
? ? ? ? ? ? ? ? name ? ? : 'xiumi-connect',//打開頁面指定名字
? ? ? ? ? ? ? ? title ? ?: "秀米編輯器",//打開頁面指定標(biāo)題
? ? ? ? ? ? ? ? cssRules : "width: " + (window.innerWidth - 60) + "px;" + "height: " + (window.innerHeight - 60) + "px;",//打開頁面大小配置
? ? ? ? ? ? });
? ? ? ? ? ? dialog.render();
? ? ? ? ? ? dialog.open();
? ? ? ? }
? ? });
? ? return btn;
});
//XIUMI connect.html可以去官網(wǎng)下載，也可以直接使用博主提供的相關(guān)代碼
<!DOCTYPE html>
<html>
<head>
? ? <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
? ? <title>XIUMI connect</title>
? ? <style>
? ? ? ? html, body {padding: 0;margin: 0;}
? ? ? ? #xiumi {position: absolute;width: 100%;height: 100%;border: none;box-sizing: border-box;}
? ? </style>
</head>
<body>
<!--引入秀米頁面-->
<iframe id="xiumi" src="http://xiumi.us/studio/v5#/paper"></iframe>
<!--引入秀米頁面-->
<script type="text/javascript" src="./internal.js"></script>
<script>
? ? var xiumi = document.getElementById('xiumi');
? ? var xiumi_url = window.location.protocol + "http://xiumi.us";
? ? xiumi.onload = function () {xiumi.contentWindow.postMessage('ready', xiumi_url);};
? ? document.addEventListener("mousewheel", function (event) {event.preventDefault();event.stopPropagation();});
? ? window.addEventListener('message', function (event) {
? ? ? ? if (event.origin == xiumi_url) {
? ? ? ? ? ? editor.execCommand('insertHtml', event.data);
? ? ? ? ? ? editor.fireEvent("catchRemoteImage");//這個(gè)配置一定寫，catchRemoteImage表示自定義上傳方法名（注意：秀米編輯器導(dǎo)入百度編輯器的時(shí)候，圖片文件不會(huì)自動(dòng)上傳到我們自己設(shè)置服務(wù)器，所以這一點(diǎn)一定要寫上）
? ? ? ? ? ? dialog.close();
? ? ? ? }
? ? }, false);
</script>
</body>
</html>
4.ueditor.config.js配置修改：
????????//開啟配置（去掉注釋），開啟這個(gè)配置的作用：秀米編輯器數(shù)據(jù)導(dǎo)入百度編輯器圖片樣式會(huì)錯(cuò)亂，所以需要配置：iframeCssUrl: URL + '/themes/iframe.css'
????????//開啟配置（去掉注釋），開啟這個(gè)配置的作用：設(shè)置是否抓取遠(yuǎn)程圖片（Ctrl+c和Ctrl+v會(huì)觸發(fā)遠(yuǎn)程獲取圖片并上傳到自己服務(wù)器事件）：catchRemoteImageEnable: true?
????????//修改配置：section[] 修改為 section:['class', 'style']，(作用是過濾器：秀米編輯器導(dǎo)入百度編輯器的過程中,class和style不被過濾，各種樣式得以保存)
section:['class', 'style'],
????????//iframe.css:添加自己自定義樣式（存放相對(duì)地址：ueditor/themes/iframe.css）,這個(gè)需要自己重寫，代碼參考博主提供的demo
img {
? ? max-width: 100%;
}
body {
? ? overflow-y: scroll !important;
}
.view {
? ? word-break: break-all;
}
.vote_area {
? ? display: block;
}
.vote_iframe {
? ? background-color: transparent;
? ? border: 0 none;
? ? height: 100%;
}
#edui1_imagescale{display:none !important;}
//上傳到自己服務(wù)器的上傳方法（PHP版），主要由兩個(gè)文件(存儲(chǔ)地址：ueditor/php)：Uploader.class.php ?和 ?config.json
????????//先講Uploader.class.php文件（主要是引入OSS上傳方法，集成OSS方法就不贅述了，可以參考阿里云）
<?php
//阿里云OSS上傳自動(dòng)加載文件（注意相對(duì)地址）
require_once realpath(dirname(__FILE__).'/../../../../../applicaction/libraries/aliyun-oss/autoload.php');
use OSS\OssClient;
use OSS\Core\OssException;
class Uploader
{
? ? private $fileField; //文件域名
? ? private $file; //文件上傳對(duì)象
? ? private $base64; //文件上傳對(duì)象
? ? private $config; //配置信息
? ? private $oriName; //原始文件名
? ? private $fileName; //新文件名
? ? private $fullName; //完整文件名,即從當(dāng)前配置目錄開始的URL
? ? private $filePath; //完整文件名,即從當(dāng)前配置目錄開始的URL
? ? private $fileSize; //文件大小
? ? private $fileType; //文件類型
? ? private $stateInfo; //上傳狀態(tài)信息,
? ? private $stateMap = array( //上傳狀態(tài)映射表，國際化用戶需考慮此處數(shù)據(jù)的國際化
? ? ? ? "SUCCESS",
? ? ? ? "文件大小超出 upload_max_filesize 限制",
? ? ? ? "文件大小超出 MAX_FILE_SIZE 限制",
? ? ? ? "文件未被完整上傳",
? ? ? ? "沒有文件被上傳",
? ? ? ? "上傳文件為空",
? ? ? ? "ERROR_TMP_FILE" => "臨時(shí)文件錯(cuò)誤",
? ? ? ? "ERROR_TMP_FILE_NOT_FOUND" => "找不到臨時(shí)文件",
? ? ? ? "ERROR_SIZE_EXCEED" => "文件大小超出網(wǎng)站限制",
? ? ? ? "ERROR_TYPE_NOT_ALLOWED" => "文件類型不允許",
? ? ? ? "ERROR_CREATE_DIR" => "目錄創(chuàng)建失敗",
? ? ? ? "ERROR_DIR_NOT_WRITEABLE" => "目錄沒有寫權(quán)限",
? ? ? ? "ERROR_FILE_MOVE" => "文件保存時(shí)出錯(cuò)",
? ? ? ? "ERROR_FILE_NOT_FOUND" => "找不到上傳文件",
? ? ? ? "ERROR_WRITE_CONTENT" => "寫入文件內(nèi)容錯(cuò)誤",
? ? ? ? "ERROR_UNKNOWN" => "未知錯(cuò)誤",
? ? ? ? "ERROR_DEAD_LINK" => "鏈接不可用",
? ? ? ? "ERROR_HTTP_LINK" => "鏈接不是http鏈接",
? ? ? ? "ERROR_HTTP_CONTENTTYPE" => "鏈接contentType不正確",
? ? ? ? "INVALID_URL" => "非法 URL",
? ? ? ? "INVALID_IP" => "非法 IP"
? ? );
? ? /**
? ? ?* 構(gòu)造函數(shù)
? ? ?*/
? ? public function __construct($fileField, $config, $type = "upload")
? ? {
? ? ? ? $this->fileField = $fileField;
? ? ? ? $this->config = $config;
? ? ? ? $this->type = $type;
? ? ? ? if ($type == "remote") {
? ? ? ? ? ? $this->saveRemote();
? ? ? ? } else if($type == "base64") {
? ? ? ? ? ? $this->upBase64();
? ? ? ? } else {
? ? ? ? ? ? $this->upFile();
? ? ? ? }
? ? ? ? $this->stateMap['ERROR_TYPE_NOT_ALLOWED'] = iconv('unicode', 'utf-8', $this->stateMap['ERROR_TYPE_NOT_ALLOWED']);
?? ??? ??? ??? ?
?? ??? ??? ??? ?//The AccessKeyId from OSS or STS
?? ??? ??? ??? ?$this->accessKeyId="";
?? ??? ??? ??? ?//The AccessKeySecret from OSS or STS
?? ??? ??? ??? ?$this->accessKeySecret="";
?? ??? ??? ??? ?//The domain name of the datacenter,For example: oss-cn-hangzhou.aliyuncs.com
?? ??? ??? ??? ?$this->endpoint="";
? ? }
? ? /**
? ? ?* 上傳文件的主處理方法（這個(gè)需要替換原有的方法）
? ? ?*/
? ? private function upFile()
? ? {
? ? ? ? $file = $this->file = $_FILES[$this->fileField];
? ? ? ? if (!$file) {
? ? ? ? ? ? $this->stateInfo = $this->getStateInfo("ERROR_FILE_NOT_FOUND");
? ? ? ? ? ? return;
? ? ? ? }
? ? ? ? if ($this->file['error']) {
? ? ? ? ? ? $this->stateInfo = $this->getStateInfo($file['error']);
? ? ? ? ? ? return;
? ? ? ? } else if (!file_exists($file['tmp_name'])) {
? ? ? ? ? ? $this->stateInfo = $this->getStateInfo("ERROR_TMP_FILE_NOT_FOUND");
? ? ? ? ? ? return;
? ? ? ? } else if (!is_uploaded_file($file['tmp_name'])) {
? ? ? ? ? ? $this->stateInfo = $this->getStateInfo("ERROR_TMPFILE");
? ? ? ? ? ? return;
? ? ? ? }
? ? ? ? //修改：上傳阿里云OSS(file:表示存儲(chǔ)地址)
? ? ? ? $ossClient=new OssClient($this->accessKeyId,$this->accessKeySecret,$this->endpoint);
? ? ? ? $ossClient->uploadFile('ine', 'file/'.date ('Ym') .'/'.$file['name'], $file['tmp_name']);
? ? ? ? $this->oriName = $file['name'];
? ? ? ? $this->fileSize = $file['size'];
? ? ? ? $this->fileType = $this->getFileExt();
? ? ? ? $this->fullName = $this->getFullName();
? ? ? ? $this->filePath = $this->getFilePath();
? ? ? ? $this->fileName = $this->getFileName();
? ? ? ? $dirname = dirname($this->filePath);
? ? ? ? //檢查文件大小是否超出限制
? ? ? ? if (!$this->checkSize()) {
? ? ? ? ? ? $this->stateInfo = $this->getStateInfo("ERROR_SIZE_EXCEED");
? ? ? ? ? ? return;
? ? ? ? }
? ? ? ? //檢查是否不允許的文件格式
? ? ? ? if (!$this->checkType()) {
? ? ? ? ? ? $this->stateInfo = $this->getStateInfo("ERROR_TYPE_NOT_ALLOWED");
? ? ? ? ? ? return;
? ? ? ? }
? ? ? ? $this->stateInfo = $this->stateMap[0];
? ? }
?
? ? /**
? ? ?* 拉取遠(yuǎn)程圖片（這個(gè)需要替換原有的方法）
? ? ?*/
? ? private function saveRemote()
? ? {
? ? ? ? $imgUrl = htmlspecialchars($this->fileField);
? ? ? ? $imgUrl = str_replace("&", "&", $imgUrl);
? ? ? ? //本段代碼解決的問題：官方圖片資料不能上傳到自己的服務(wù)器
? ? ? ?$pos = strpos($imgUrl, '?'); // 如果找到了問號(hào)，使用 substr() 函數(shù)刪除問號(hào)及其后面的所有內(nèi)容
? ? ? ?if ($pos !== false) {
? ? ? ? ? ? ? $imgUrl = substr($imgUrl, 0, $pos);
? ? ? ? }
? ? ? ? //http開頭驗(yàn)證
? ? ? ? if (strpos($imgUrl, "http") !== 0) {
? ? ? ? ? ? $this->stateInfo = $this->getStateInfo("ERROR_HTTP_LINK");
? ? ? ? ? ? return;
? ? ? ? }
? ? ? ? preg_match('/(^https*:\/\/[^:\/]+)/', $imgUrl, $matches);
? ? ? ? $host_with_protocol = count($matches) > 1 ? $matches[1] : '';
? ? ? ? // 判斷是否是合法 url
? ? ? ? if (!filter_var($host_with_protocol, FILTER_VALIDATE_URL)) {
? ? ? ? ? ? $this->stateInfo = $this->getStateInfo("INVALID_URL");
? ? ? ? ? ? return;
? ? ? ? }
? ? ? ? preg_match('/^https*:\/\/(.+)/', $host_with_protocol, $matches);
? ? ? ? $host_without_protocol = count($matches) > 1 ? $matches[1] : '';
? ? ? ? // 此時(shí)提取出來的可能是 ip 也有可能是域名，先獲取 ip
? ? ? ? $ip = gethostbyname($host_without_protocol);
? ? ? ? // 判斷是否是私有 ip
? ? ? ? if(!filter_var($ip, FILTER_VALIDATE_IP, FILTER_FLAG_NO_PRIV_RANGE)) {
? ? ? ? ? ? $this->stateInfo = $this->getStateInfo("INVALID_IP");
? ? ? ? ? ? return;
? ? ? ? }
? ? ? ? //獲取請(qǐng)求頭并檢測死鏈
? ? ? ? $heads = get_headers($imgUrl, 1);
? ? ? ? if (!(stristr($heads[0], "200") && stristr($heads[0], "OK"))) {
? ? ? ? ? ? $this->stateInfo = $this->getStateInfo("ERROR_DEAD_LINK");
? ? ? ? ? ? return;
? ? ? ? }
? ? ? ? //格式驗(yàn)證(擴(kuò)展名驗(yàn)證和Content-Type驗(yàn)證)
? ? ? ? $fileType = strtolower(strrchr($imgUrl, '.'));
? ? ? ? if (!in_array($fileType, $this->config['allowFiles']) || !isset($heads['Content-Type']) || !stristr($heads['Content-Type'], "image")) {
? ? ? ? ? ? $this->stateInfo = $this->getStateInfo("ERROR_HTTP_CONTENTTYPE");
? ? ? ? ? ? return;
? ? ? ? }
? ? ? ? //打開輸出緩沖區(qū)并獲取遠(yuǎn)程圖片
? ? ? ? ob_start();
? ? ? ? $context = stream_context_create(
? ? ? ? ? ? array('http' => array('follow_location' => false))
? ? ? ? );
? ? ? ? readfile($imgUrl, false, $context);
? ? ? ? $img = ob_get_contents();
? ? ? ? ob_end_clean();
? ? ? ? preg_match("/[\/]([^\/]*)[\.]?[^\.\/]*$/", $imgUrl, $m);
? ? ? ? $this->oriName = $m ? $m[1]:"";
? ? ? ? $this->fileSize = strlen($img);
? ? ? ? $this->fileType = $this->getFileExt();
? ? ? ? $this->fullName = $this->getFullName();
? ? ? ? $this->filePath = $this->getFilePath();
? ? ? ? $this->fileName = $this->getFileName();
? ? ? ? $dirname = dirname($this->filePath);
? ? ? ? //檢查文件大小是否超出限制
? ? ? ? if (!$this->checkSize()) {
? ? ? ? ? ? $this->stateInfo = $this->getStateInfo("ERROR_SIZE_EXCEED");
? ? ? ? ? ? return;
? ? ? ? }
? ? ? ? $this->stateInfo = $this->stateMap[0];
? ? }
?
? ? /**
? ? ?* 獲取文件完整路徑（這個(gè)需要替換原有的方法）
? ? ?*/
? ? private function getFilePath()
? ? {
? ? ? ? $fullname = $this->fullName;
? ? ? ? return $fullname;
? ? }
}
?
5.config.json配置修改： ?? ??? ?
? ? /* 上傳圖片配置項(xiàng) */
? ? "imageActionName": "uploadimage", /* 執(zhí)行上傳圖片的action名稱 */
? ? "imageFieldName": "upfile", /* 提交的圖片表單名稱 */
? ? "imageMaxSize": 2048000, /* 上傳大小限制，單位B */
? ? "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上傳圖片格式顯示 */
? ? "imageCompressEnable": true, /* 是否壓縮圖片,默認(rèn)是true */
? ? "imageCompressBorder": 1600, /* 圖片壓縮最長邊限制 */
? ? "imageInsertAlign": "none", /* 插入的圖片浮動(dòng)方式 */
? ? "imageUrlPrefix": "https://oss-cn-shanghai.aliyuncs.com", /* 這個(gè)需要自己替換 */
? ? "imagePathFormat": "/file/{yyyy}{mm}/{filename}", /* 上傳保存路徑*/
?? ??? ?
?? ??? ?
? ? "catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],
? ? "catcherActionName": "catchimage", /* 執(zhí)行抓取遠(yuǎn)程圖片的action名稱 */
? ? "catcherFieldName": "source", /* 提交的圖片列表表單名稱 */
? ? "catcherPathFormat": "/file/{yyyy}{mm}/{filename}", /* 上傳保存路徑 */
? ? "catcherUrlPrefix": "https://oss-cn-shanghai.aliyuncs.com", /* 這個(gè)需要自己替換 */
? ? "catcherMaxSize": 2048000, /* 上傳大小限制，單位B */
? ? "catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 抓取圖片格式顯示 */
到此為止，前面所提的集成問題和圖片上傳問題就解決完成了
????????秀米編輯器（xiumi）+百度編輯器（Ueditor） 集成 已經(jīng)完成：
????????秀米編輯器導(dǎo)出到百度編輯器格式問題，圖片保存到自己的服務(wù)器（阿里云OSS）
示例截圖
?
文章來源：http://www.zghlxwxcb.cn/news/detail-493351.html
?
?文章來源地址http://www.zghlxwxcb.cn/news/detail-493351.html
到了這里，關(guān)于秀米編輯器（xiumi）+百度編輯器（Ueditor） 集成 ：解決集成問題，秀米編輯器導(dǎo)出到百度編輯器格式問題，圖片保存到自己的服務(wù)器（阿里云OSS）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
