摘要：由于我們的富文本輸入框比較簡單，所以只需要處理兩類數據即可，其一是普通的文本類型數據，包括表情其二則是圖片類型數據。

最近折騰 Websocket，打算開發(fā)一個聊天室應用練練手。在應用開發(fā)的過程中發(fā)現可以插入 emoji ，粘貼圖片的富文本輸入框其實蘊含著許多有趣的知識，于是便打算記錄下來和大家分享。

倉庫地址：chat-input-box
預覽地址：https://codepen.io/jrainlau/p...

首先來看看 demo 效果：

是不是覺得很神奇？接下來我會一步步講解這里面的功能都是如何實現的。

傳統的輸入框都是使用 </b> 來制作的，它的優(yōu)勢是非常簡單，但最大的缺陷卻是無法展示圖片。為了能夠讓輸入框能夠展示圖片（富文本化），我們可以采用設置了 <b>contenteditable="true"</b> 屬性的 <b><div></b> 來實現這里面的功能。</p> <p>簡單創(chuàng)建一個 <b>index.html</b> 文件，然后寫入如下內容：</p> <pre><div id="qoyqs8suu2u" class="editor" contenteditable="true"> <img src="https://static.easyicon.net/preview/121/1214124.gif" alt=""> </div></pre> <p>打開瀏覽器，就能看到一個默認已經帶了一張圖片的輸入框：</p> <p><script type="text/javascript">showImg("https://segmentfault.com/img/bVbpcse?w=973&h=242");</script></p> <p>光標可以在圖片前后移動，同時也可以輸入內容，甚至通過退格鍵刪除這張圖片——換句話說，圖片也是可編輯內容的一部分，也意味著輸入框的富文本化已經體現出來了。</p> <p>接下來的任務，就是思考如何直接通過 <b>control + v</b> 把圖片粘貼進去了。</p> <b>處理粘貼事件</b> <p>任何通過“復制”或者 <b>control + c</b> 所復制的內容（包括屏幕截圖）都會儲存在剪貼板，在粘貼的時候可以在輸入框的 <b>onpaste</b> 事件里面監(jiān)聽到。</p> <pre>document.querySelector(".editor").addEventListener("paste", (e) => { console.log(e.clipboardData.items) })</pre> <p>而剪貼板的的內容則存放在 <b>DataTransferItemList</b> 對象中，可以通過 <b>e.clipboardData.items</b> 訪問到：</p> <p><script type="text/javascript">showImg("https://segmentfault.com/img/bVbpcuQ?w=410&h=30");</script></p> <p>細心的讀者會發(fā)現，如果直接在控制臺點開 <b>DataTransferItemList</b> 前的小箭頭，會發(fā)現對象的 <b>length</b> 屬性為0。說好的剪貼板內容呢？其實這是 Chrome 調試的一個小坑。在開發(fā)者工具里面，<b>console.log</b> 出來的對象是一個引用，會隨著原始數據的改變而改變。由于剪貼板的數據已經被“粘貼”進輸入框了，所以展開小箭頭以后看到的 <b>DataTransferItemList</b> 就變成空的了。為此，我們可以改用 <b>console.table</b> 來展示實時的結果。</p> <p><script type="text/javascript">showImg("https://segmentfault.com/img/bVbpcwl?w=556&h=101");</script></p> <p>在明白了剪貼板數據的存放位置以后，就可以編寫代碼來處理它們了。由于我們的富文本輸入框比較簡單，所以只需要處理兩類數據即可，其一是普通的文本類型數據，包括 emoji 表情；其二則是圖片類型數據。</p> <p>新建 <b>paste.js</b> 文件：</p> <pre>const onPaste = (e) => { // 如果剪貼板沒有數據則直接返回 if (!(e.clipboardData && e.clipboardData.items)) { return } // 用Promise封裝便于將來使用 return new Promise((resolve, reject) => { // 復制的內容在剪貼板里位置不確定，所以通過遍歷來保證數據準確 for (let i = 0, len = e.clipboardData.items.length; i < len; i++) { const item = e.clipboardData.items[i] // 文本格式內容處理 if (item.kind === "string") { item.getAsString((str) => { resolve(str) }) // 圖片格式內容處理 } else if (item.kind === "file") { const pasteFile = item.getAsFile() // 處理pasteFile // TODO(pasteFile) } else { reject(new Error("Not allow to paste this type!")) } } }) } export default onPaste</pre> <p>然后就可以在 <b>onPaste</b> 事件里面直接使用了：</p> <pre>document.querySelector(".editor").addEventListener("paste", async (e) => { const result = await onPaste(e) console.log(result) })</pre> <p>上面的代碼支持文本格式，接下來就要對圖片格式進行處理了。玩過 <b><input type="file"></b> 的同學會知道，包括圖片在內的所有文件格式內容都會儲存在 <b>File</b> 對象里面，這在剪貼板里面也是一樣的。于是我們可以編寫一套通用的函數，專門來讀取 <b>File</b> 對象里的圖片內容，并把它轉化成 <b>base64</b> 字符串。</p> <b>粘貼圖片</b> <p>為了更好地在輸入框里展示圖片，必須限制圖片的大小，所以這個圖片處理函數不僅能夠讀取 <b>File</b> 對象里面的圖片，還能夠對其進行壓縮。</p> <p>新建一個 <b>chooseImg.js</b> 文件：</p> <pre>/** * 預覽函數 * * @param {*} dataUrl base64字符串 * @param {*} cb 回調函數 */ function toPreviewer (dataUrl, cb) { cb && cb(dataUrl) } /** * 圖片壓縮函數 * * @param {*} img 圖片對象 * @param {*} fileType 圖片類型 * @param {*} maxWidth 圖片最大寬度 * @returns base64字符串 */ function compress (img, fileType, maxWidth) { let canvas = document.createElement("canvas") let ctx = canvas.getContext("2d") const proportion = img.width / img.height const width = maxWidth const height = maxWidth / proportion canvas.width = width canvas.height = height ctx.fillStyle = "#fff" ctx.fillRect(0, 0, canvas.width, canvas.height) ctx.drawImage(img, 0, 0, width, height) const base64data = canvas.toDataURL(fileType, 0.75) canvas = ctx = null return base64data } /** * 選擇圖片函數 * * @param {*} e input.onchange事件對象 * @param {*} cb 回調函數 * @param {number} [maxsize=200 * 1024] 圖片最大體積 */ function chooseImg (e, cb, maxsize = 200 * 1024) { const file = e.target.files[0] if (!file || !//(?:jpeg|jpg|png)/i.test(file.type)) { return } const reader = new FileReader() reader.onload = function () { const result = this.result let img = new Image() if (result.length <= maxsize) { toPreviewer(result, cb) return } img.onload = function () { const compressedDataUrl = compress(img, file.type, maxsize / 1024) toPreviewer(compressedDataUrl, cb) img = null } img.src = result } reader.readAsDataURL(file) } export default chooseImg </pre> <pre>關于使用 <b>canvas</b> 壓縮圖片和使用 <b>FileReader</b> 讀取文件的內容在這里就不贅述了，感興趣的讀者可以自行查閱。</pre> <p>回到上一步的 <b>paste.js</b> 函數，把其中的 <b>TODO()</b> 改寫成 <b>chooseImg()</b> 即可：</p> <pre>const imgEvent = { target: { files: [pasteFile] } } chooseImg(imgEvent, (url) => { resolve(url) })</pre> <p>回到瀏覽器，如果我們復制一張圖片并在輸入框中執(zhí)行粘貼的動作，將可以在控制臺看到打印出了以 <b>data:image/png;base64</b> 開頭的圖片地址。</p> <b>輸入框中插入內容</b> <p>經過前面兩個步驟，我們后已經可以讀取剪貼板中的文本內容和圖片內容了，接下來就是把它們正確的插入輸入框的光標位置當中。</p> <p>對于插入內容，我們可以直接通過 <b>document.execCommand</b> 方法進行。關于這個方法詳細用法可以在MDN文檔里面找到，在這里我們只需要使用 <b>insertText</b> 和 <b>insertImage</b> 即可。</p> <pre>document.querySelector(".editor").addEventListener("paste", async (e) => { const result = await onPaste(e) const imgRegx = /^data:image/png;base64,/ const command = imgRegx.test(result) ? "insertImage": "insertText" document.execCommand(command, false, result) })</pre> <p>但是在某些版本的 Chrome 瀏覽器下，<b>insertImage</b> 方法可能會失效，這時候便可以采用另外一種方法，利用 <b>Selection</b> 來實現。而之后選擇并插入 emoji 的操作也會用到它，因此不妨先來了解一下。</p> <p>當我們在代碼中調用 <b>window.getSelection()</b> 后會獲得一個 <b>Selection</b> 對象。如果在頁面中選中一些文字，然后在控制臺執(zhí)行 <b>window.getSelection().toString()</b>，就會看到輸出是你所選擇的那部分文字。</p> <p>與這部分區(qū)域文字相對應的，是一個 <b>range</b> 對象，使用 <b>window.getSelection().getRangeAt(0)</b> 即可以訪問它。<b>range</b> 不僅包含了選中區(qū)域文字的內容，還包括了區(qū)域的起點位置 <b>startOffset</b> 和終點位置 <b>endOffset</b>。</p> <p>我們也可以通過 <b>document.createRange()</b> 的辦法手動創(chuàng)建一個 <b>range</b>，往它里面寫入內容并展示在輸入框中。</p> <p>對于插入圖片來說，要先從 <b>window.getSelection()</b> 獲取<b> range</b> ，然后往里面插入圖片。</p> <pre>document.querySelector(".editor").addEventListener("paste", async (e) => { // 讀取剪貼板的內容 const result = await onPaste(e) const imgRegx = /^data:image/png;base64,/ // 如果是圖片格式（base64），則通過構造range的辦法把<img>標簽插入正確的位置 // 如果是文本格式，則通過document.execCommand("insertText")方法把文本插入 if (imgRegx.test(result)) { const sel = window.getSelection() if (sel && sel.rangeCount === 1 && sel.isCollapsed) { const range = sel.getRangeAt(0) const img = new Image() img.src = result range.insertNode(img) range.collapse(false) sel.removeAllRanges() sel.addRange(range) } } else { document.execCommand("insertText", false, result) } })</pre> <p>這種辦法也能很好地完成粘貼圖片的功能，并且通用性會更好。接下來我們還會利用 <b>Selection</b>，來完成 emoji 的插入。</p> <b>插入 emoji</b> <p>不管是粘貼文本也好，還是圖片也好，我們的輸入框始終是處于聚焦（focus）狀態(tài)。而當我們從表情面板里選擇 emoji 表情的時候，輸入框會先失焦(blur），然后再重新聚焦。由于 <b>document.execCommand</b> 方法必須在輸入框聚焦狀態(tài)下才能觸發(fā)，所以對于處理 emoji 插入來說就無法使用了。</p> <p>上一小節(jié)講過，<b>Selection</b> 可以讓我們拿到聚焦狀態(tài)下所選文本的起點位置 <b>startOffset</b> 和終點位置 <b>endOffset</b>，如果沒有選擇文本而僅僅處于聚焦狀態(tài)，那么這兩個位置的值相等（相當于選擇文本為空），也就是光標的位置。只要我們能夠在失焦前記錄下這個位置，那么就能夠通過 <b>range</b> 把 emoji 插入正確的地方了。</p> <p>首先編寫兩個工具方法。新建一個 <b>cursorPosition.js</b> 文件：</p> <pre> /** * 獲取光標位置 * @param {DOMElement} element 輸入框的dom節(jié)點 * @return {Number} 光標位置 */ export const getCursorPosition = (element) => { let caretOffset = 0 const doc = element.ownerDocument || element.document const win = doc.defaultView || doc.parentWindow const sel = win.getSelection() if (sel.rangeCount > 0) { const range = win.getSelection().getRangeAt(0) const preCaretRange = range.cloneRange() preCaretRange.selectNodeContents(element) preCaretRange.setEnd(range.endContainer, range.endOffset) caretOffset = preCaretRange.toString().length } return caretOffset } /** * 設置光標位置 * @param {DOMElement} element 輸入框的dom節(jié)點 * @param {Number} cursorPosition 光標位置的值 */ export const setCursorPosition = (element, cursorPosition) => { const range = document.createRange() range.setStart(element.firstChild, cursorPosition) range.setEnd(element.firstChild, cursorPosition) const sel = window.getSelection() sel.removeAllRanges() sel.addRange(range) } </pre> <p>有了這兩個方法以后，就可以放入 editor 節(jié)點里面使用了。首先在節(jié)點的 <b>keyup</b> 和 <b>click</b> 事件里記錄光標位置：</p> <pre>let cursorPosition = 0 const editor = document.querySelector(".editor") editor.addEventListener("click", async (e) => { cursorPosition = getCursorPosition(editor) }) editor.addEventListener("keyup", async (e) => { cursorPosition = getCursorPosition(editor) })</pre> <p>記錄下光標位置后，便可通過調用 <b>insertEmoji()</b> 方法插入 emoji 字符了。</p> <pre>insertEmoji (emoji) { const text = editor.innerHTML // 插入 emoji editor.innerHTML = text.slice(0, cursorPosition) + emoji + text.slice(cursorPosition, text.length) // 光標位置后挪一位，以保證在剛插入的 emoji 后面 setCursorPosition(editor, this.cursorPosition + 1) // 更新本地保存的光標位置變量（注意 emoji 占兩個字節(jié)大小，所以要加1） cursorPosition = getCursorPosition(editor) + 1 // emoji 占兩位 }</pre> <b>尾聲</b> <p>文章涉及的代碼已經上傳到倉庫，為了簡便起見采用 <b>VueJS</b> 處理了一下，不影響閱讀。最后想說的是，這個 Demo 僅僅完成了輸入框最基礎的部分，關于復制粘貼還有很多細節(jié)要處理（比如把別處的行內樣式也復制了進來等等），在這里就不一一展開了，感興趣的讀者可以自行研究，更歡迎和我留言交流~</p> </div> <div id="qoyqs8suu2u" class="mt-64 tags-seach" > <div id="qoyqs8suu2u" class="tags-info"> <a style="width:120px;" title="GPU云服務器" href="http://systransis.cn/site/product/gpu.html">GPU云服務器</a> <a style="width:120px;" title="云服務器" href="http://systransis.cn/site/active/kuaijiesale.html?ytag=seo">云服務器</a> <a style="width:120px;" title="文本輸入框" href="http://systransis.cn/yun/tag/wenbenshurukuang/">文本輸入框</a> <a style="width:120px;" title="文本框輸入數字" href="http://systransis.cn/yun/tag/wenbenkuangshurushuzi/">文本框輸入數字</a> <a style="width:120px;" title="文本框輸入限制" href="http://systransis.cn/yun/tag/wenbenkuangshuruxianzhi/">文本框輸入限制</a> <a style="width:120px;" title="手機文本輸入框設計" href="http://systransis.cn/yun/tag/shoujiwenbenshurukuangsheji/">手機文本輸入框設計</a> </div> </div> <div id="qoyqs8suu2u" class="entry-copyright mb-30"> <p class="mb-15"> 文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。</p> <p>轉載請注明本文地址：http://systransis.cn/yun/102311.html</p> </div> <ul class="pre-next-page"> <li id="qoyqs8suu2u" class="ellipsis"><a class="hpf" href="http://systransis.cn/yun/102310.html">上一篇：衣食父母-瀏覽器</a></li> <li id="qoyqs8suu2u" class="ellipsis"><a class="hpf" href="http://systransis.cn/yun/102312.html">下一篇：設計模式——觀察者模式</a></li> </ul> </div> <div id="qoyqs8suu2u" class="about_topicone-mid"> <h3 class="top-com-title mb-0"><span data-id="0">相關文章</span></h3> <ul class="com_white-left-mid atricle-list-box"> <li> <div id="qoyqs8suu2u" class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="http://systransis.cn/yun/41986.html"><b>selenuim操作基于REACT實現<em>的富</em><em>文本</em>編輯器1</b></a></h2> <p class="ellipsis2 good">摘要：中大多數的輸入框都是標簽，但是由于業(yè)務中前端有使用到基于實現的富文本編輯器，在實現自動化測試編寫時自然會涉及到對富文本器進行操作處理檢查該編輯器的元素，可以看到和正常的不同，該結構為一個里面裹了個而在其中輸入文字，則是在改變中的如果有換行的 web中大多數的輸入框都是標簽，但是由于業(yè)務中前端有使用到基于REACT實現的富文本編輯器，在實現自動化測試編寫時自然會涉及到對富文本器進行操作處...</p> <div id="qoyqs8suu2u" class="com_white-left-info"> <div id="qoyqs8suu2u" class="com_white-left-infol"> <a href="http://systransis.cn/yun/u-337.html"><img src="http://systransis.cn/yun/data/avatar/000/00/03/small_000000337.jpg" alt=""><span id="qoyqs8suu2u" class="layui-hide64">since1986</span></a> <time datetime="">2019-07-30 17:03</time> <span><i class="fa fa-commenting"></i>評論0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div id="qoyqs8suu2u" class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="http://systransis.cn/yun/98577.html"><b>javascript功能插件大集合 前端常用插件 js常用插件</b></a></h2> <p class="ellipsis2 good">摘要：轉載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構建更好應用的客戶端包管理器。一個整合和的最佳思想，使開發(fā)者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數據。 轉載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...</p> <div id="qoyqs8suu2u" class="com_white-left-info"> <div id="qoyqs8suu2u" class="com_white-left-infol"> <a href="http://systransis.cn/yun/u-529.html"><img src="http://systransis.cn/yun/data/avatar/000/00/05/small_000000529.jpg" alt=""><span id="qoyqs8suu2u" class="layui-hide64">netmou</span></a> <time datetime="">2019-08-23 12:28</time> <span><i class="fa fa-commenting"></i>評論0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div id="qoyqs8suu2u" class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="http://systransis.cn/yun/53105.html"><b>javascript功能插件大集合 前端常用插件 js常用插件</b></a></h2> <p class="ellipsis2 good">摘要：轉載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構建更好應用的客戶端包管理器。一個整合和的最佳思想，使開發(fā)者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數據。 轉載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...</p> <div id="qoyqs8suu2u" class="com_white-left-info"> <div id="qoyqs8suu2u" class="com_white-left-infol"> <a href="http://systransis.cn/yun/u-906.html"><img src="http://systransis.cn/yun/data/avatar/000/00/09/small_000000906.jpg" alt=""><span id="qoyqs8suu2u" class="layui-hide64">Hydrogen</span></a> <time datetime="">2019-08-02 11:46</time> <span><i class="fa fa-commenting"></i>評論0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div id="qoyqs8suu2u" class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="http://systransis.cn/yun/80211.html"><b>javascript功能插件大集合，寫前端的親們記得收藏</b></a></h2> <p class="ellipsis2 good">摘要：一個專注于瀏覽器端和兼容的包管理器。一個整合和的最佳思想，使開發(fā)者能快速方便地組織和編寫前端代碼的下一代包管理器。完全插件化的工具，能在中識別和記錄模式。健壯的優(yōu)雅且功能豐富的模板引擎。完整的經過充分測試和記錄數據結構的庫。 【導讀】：GitHub 上有一個 Awesome – XXX 系列的資源整理。awesome-javascript 是 sorrycc 發(fā)起維護的 JS 資源列表...</p> <div id="qoyqs8suu2u" class="com_white-left-info"> <div id="qoyqs8suu2u" class="com_white-left-infol"> <a href="http://systransis.cn/yun/u-1306.html"><img src="http://systransis.cn/yun/data/avatar/000/00/13/small_000001306.jpg" alt=""><span id="qoyqs8suu2u" class="layui-hide64">cfanr</span></a> <time datetime="">2019-08-20 10:34</time> <span><i class="fa fa-commenting"></i>評論0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div id="qoyqs8suu2u" class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="http://systransis.cn/yun/104130.html"><b>JavaScript 資源大全中文版</b></a></h2> <p class="ellipsis2 good">摘要：官網全新的靜態(tài)包管理器。官網一個整合和官網的最佳思想，使開發(fā)者能快速方便地組織和編寫前端代碼的下一代包管理器。官網小巧的兼容的所見即所得的富文本編輯器。官網富文本編輯器。官網由制作，適用于每天寫作的富文本編輯器。 1. 包管理器 管理著 javascript 庫，并提供讀取和打包它們的工具。 npm：npm 是 javascript 的包管理器。官網 cnpm：cnpm 是 由于國...</p> <div id="qoyqs8suu2u" class="com_white-left-info"> <div id="qoyqs8suu2u" class="com_white-left-infol"> <a href="http://systransis.cn/yun/u-1077.html"><img src="http://systransis.cn/yun/data/avatar/000/00/10/small_000001077.jpg" alt=""><span id="qoyqs8suu2u" class="layui-hide64">jzman</span></a> <time datetime="">2019-08-23 17:18</time> <span><i class="fa fa-commenting"></i>評論0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> </ul> </div> <div id="qoyqs8suu2u" class="topicone-box-wangeditor"> <h3 class="top-com-title mb-64"><span>發(fā)表評論</span></h3> <div id="qoyqs8suu2u" class="xcp-publish-main flex_box_zd"> <div id="qoyqs8suu2u" class="unlogin-pinglun-box"> <a href="javascript:login()" class="grad">登陸后可評論</a> </div> </div> </div> <div id="qoyqs8suu2u" class="site-box-content"> <div id="qoyqs8suu2u" class="site-content-title"> <h3 class="top-com-title mb-64"><span>0條評論</span></h3> </div> <div id="qoyqs8suu2u" class="pages"></ul></div> </div> </div> <div id="qoyqs8suu2u" class="layui-col-md4 layui-col-lg3 com_white-right site-wrap-right"> <div id="qoyqs8suu2u" class=""> <div id="qoyqs8suu2u" class="com_layuiright-box user-msgbox"> <a href="http://systransis.cn/yun/u-1196.html"><img src="http://systransis.cn/yun/data/avatar/000/00/11/small_000001196.jpg" alt=""></a> <h3><a href="http://systransis.cn/yun/u-1196.html" rel="nofollow">iKcamp</a></h3> <h6>男<span>|</span>高級講師</h6> <div id="qoyqs8suu2u" class="flex_box_zd user-msgbox-atten"> <a href="javascript:attentto_user(1196)" id="attenttouser_1196" class="grad follow-btn notfollow attention">我要關注</a> <a href="javascript:login()" title="發(fā)私信" >我要私信</a> </div> <div id="qoyqs8suu2u" class="user-msgbox-list flex_box_zd"> <h3 class="hpf">TA的文章</h3> <a href="http://systransis.cn/yun/ut-1196.html" class="box_hxjz">閱讀更多</a> </div> <ul class="user-msgbox-ul"> <li><h3 class="ellipsis"><a href="http://systransis.cn/yun/130983.html">在tensorflow</a></h3> <p>閱讀 975<span>·</span>2023-04-26 02:49</p></li> <li><h3 class="ellipsis"><a href="http://systransis.cn/yun/124962.html">NGINX_ I/O 模型</a></h3> <p>閱讀 1187<span>·</span>2021-11-25 09:43</p></li> <li><h3 class="ellipsis"><a href="http://systransis.cn/yun/123690.html">ASEMI超快恢復二極管MUR2060AC在高頻設備中的應用</a></h3> <p>閱讀 2558<span>·</span>2021-11-18 10:02</p></li> <li><h3 class="ellipsis"><a href="http://systransis.cn/yun/122630.html">virtono：新增美國洛杉磯/紐約/西班牙馬德里/法國巴黎/瑞典機房，1核/512M內存/15G </a></h3> <p>閱讀 2933<span>·</span>2021-10-18 13:32</p></li> <li><h3 class="ellipsis"><a href="http://systransis.cn/yun/115618.html">Vue學習日記（三）——Vue路由管理vue-router</a></h3> <p>閱讀 1294<span>·</span>2019-08-30 13:54</p></li> <li><h3 class="ellipsis"><a href="http://systransis.cn/yun/115205.html">前端面試知識點集錦</a></h3> <p>閱讀 2092<span>·</span>2019-08-30 12:58</p></li> <li><h3 class="ellipsis"><a href="http://systransis.cn/yun/112922.html">個人常用的軟件-前端</a></h3> <p>閱讀 3024<span>·</span>2019-08-29 14:06</p></li> <li><h3 class="ellipsis"><a href="http://systransis.cn/yun/111068.html">瀏覽器 CSS Hack 收集</a></h3> <p>閱讀 2166<span>·</span>2019-08-28 18:10</p></li> </ul> </div> <!-- 文章詳情右側廣告--> <div id="qoyqs8suu2u" class="com_layuiright-box"> <h6 class="top-com-title"><span>最新活動</span></h6> <div id="qoyqs8suu2u" class="com_adbox"> <div id="qoyqs8suu2u" class="layui-carousel" id="right-item"> <div carousel-item> <div> <a href="http://systransis.cn/site/active/kuaijiesale.html?ytag=seo" rel="nofollow"> <img src="http://systransis.cn/yun/data/attach/240625/2rTjEHmi.png" alt="云服務器"> </a> </div> <div> <a href="http://systransis.cn/site/product/gpu.html" rel="nofollow"> <img src="http://systransis.cn/yun/data/attach/240807/7NjZjdrd.png" alt="GPU云服務器"> </a> </div> </div> </div> </div> <!-- banner結束 --> <div id="qoyqs8suu2u" class="adhtml"> </div> <script> $(function(){ $.ajax({ type: "GET", url:"http://systransis.cn/yun/ad/getad/1.html", cache: false, success: function(text){ $(".adhtml").html(text); } }); }) </script> </div> </div> </div> </div> </div> </section> <!-- wap拉出按鈕 --> <div id="qoyqs8suu2u" class="site-tree-mobile layui-hide"> <i class="layui-icon layui-icon-spread-left"></i> </div> <!-- wap遮罩層 --> <div id="qoyqs8suu2u" class="site-mobile-shade"></div> <!--付費閱讀 --> <div class="qoyqs8suu2u" id="payread"> <div id="qoyqs8suu2u" class="layui-form-item">閱讀需要支付1元查看</div> <div id="qoyqs8suu2u" class="layui-form-item"><button class="btn-right">支付并查看</button></div> </div> <script> var prei=0; $(".site-seo-depict pre").each(function(){ var html=$(this).html().replace("<code>","").replace("</code>","").replace('<code class="javascript hljs" codemark="1">',''); $(this).attr('data-clipboard-text',html).attr("id","pre"+prei); $(this).html("").append("<code>"+html+"</code>"); prei++; }) $(".site-seo-depict img").each(function(){ if($(this).attr("src").indexOf('data:image/svg+xml')!= -1){ $(this).remove(); } }) $("LINK[href*='style-49037e4d27.css']").remove(); $("LINK[href*='markdown_views-d7a94ec6ab.css']").remove(); layui.use(['jquery', 'layer','code'], function(){ $("pre").attr("class","layui-code"); $("pre").attr("lay-title",""); $("pre").attr("lay-skin",""); layui.code(); $(".layui-code-h3 a").attr("class","copycode").html("復制代碼 ").attr("onclick","copycode(this)"); }); function copycode(target){ var id=$(target).parent().parent().attr("id"); var clipboard = new ClipboardJS("#"+id); clipboard.on('success', function(e) { e.clearSelection(); alert("復制成功") }); clipboard.on('error', function(e) { alert("復制失敗") }); } //$(".site-seo-depict").html($(".site-seo-depict").html().slice(0, -5)); </script> <link rel="stylesheet" type="text/css" href="http://systransis.cn/yun/static/js/neweditor/code/styles/tomorrow-night-eighties.css"> <script src="http://systransis.cn/yun/static/js/neweditor/code/highlight.pack.js" type="text/javascript"></script> <script src="http://systransis.cn/yun/static/js/clipboard.js"></script> <script>hljs.initHighlightingOnLoad();</script> <script> function setcode(){ var _html=''; document.querySelectorAll('pre code').forEach((block) => { var _tmptext=$.trim($(block).text()); if(_tmptext!=''){ _html=_html+_tmptext; console.log(_html); } }); } </script> <script> function payread(){ layer.open({ type: 1, title:"付費閱讀", shadeClose: true, content: $('#payread') }); } // 舉報 function jupao_tip(){ layer.open({ type: 1, title:false, shadeClose: true, content: $('#jubao') }); } $(".getcommentlist").click(function(){ var _id=$(this).attr("dataid"); var _tid=$(this).attr("datatid"); $("#articlecommentlist"+_id).toggleClass("hide"); var flag=$("#articlecommentlist"+_id).attr("dataflag"); if(flag==1){ flag=0; }else{ flag=1; //加載評論 loadarticlecommentlist(_id,_tid); } $("#articlecommentlist"+_id).attr("dataflag",flag); }) $(".add-comment-btn").click(function(){ var _id=$(this).attr("dataid"); $(".formcomment"+_id).toggleClass("hide"); }) $(".btn-sendartcomment").click(function(){ var _aid=$(this).attr("dataid"); var _tid=$(this).attr("datatid"); var _content=$.trim($(".commenttext"+_aid).val()); if(_content==''){ alert("評論內容不能為空"); return false; } var touid=$("#btnsendcomment"+_aid).attr("touid"); if(touid==null){ touid=0; } addarticlecomment(_tid,_aid,_content,touid); }) $(".button_agree").click(function(){ var supportobj = $(this); var tid = $(this).attr("id"); $.ajax({ type: "GET", url:"http://systransis.cn/yun/index.php?topic/ajaxhassupport/" + tid, cache: false, success: function(hassupport){ if (hassupport != '1'){ $.ajax({ type: "GET", cache:false, url: "http://systransis.cn/yun/index.php?topic/ajaxaddsupport/" + tid, success: function(comments) { supportobj.find("span").html(comments+"人贊"); } }); }else{ alert("您已經贊過"); } } }); }); function attenquestion(_tid,_rs){ $.ajax({ //提交數據的類型 POST GET type:"POST", //提交的網址 url:"http://systransis.cn/yun/favorite/topicadd.html", //提交的數據 data:{tid:_tid,rs:_rs}, //返回數據的格式 datatype: "json",//"xml", "html", "script", "json", "jsonp", "text". //在請求之前調用的函數 beforeSend:function(){}, //成功返回之后調用的函數 success:function(data){ var data=eval("("+data+")"); console.log(data) if(data.code==2000){ layer.msg(data.msg,function(){ if(data.rs==1){ //取消收藏 $(".layui-layer-tips").attr("data-tips","收藏文章"); $(".layui-layer-tips").html('<i class="fa fa-heart-o"></i>'); } if(data.rs==0){ //收藏成功 $(".layui-layer-tips").attr("data-tips","已收藏文章"); $(".layui-layer-tips").html('<i class="fa fa-heart"></i>') } }) }else{ layer.msg(data.msg) } } , //調用執(zhí)行后調用的函數 complete: function(XMLHttpRequest, textStatus){ postadopt=true; }, //調用出錯執(zhí)行的函數 error: function(){ //請求出錯處理 postadopt=false; } }); } </script> <footer> <div id="qoyqs8suu2u" class="layui-container"> <div id="qoyqs8suu2u" class="flex_box_zd"> <div id="qoyqs8suu2u" class="left-footer"> <h6><a href="http://systransis.cn/"><img src="http://systransis.cn/yun/static/theme/ukd//images/logo.png" alt="UCloud （優(yōu)刻得科技股份有限公司）"></a></h6> <p>UCloud （優(yōu)刻得科技股份有限公司）是中立、安全的云計算服務平臺，堅持中立，不涉足客戶業(yè)務領域。公司自主研發(fā)IaaS、PaaS、大數據流通平臺、AI服務平臺等一系列云計算產品，并深入了解互聯網、傳統企業(yè)在不同場景下的業(yè)務需求，提供公有云、混合云、私有云、專有云在內的綜合性行業(yè)解決方案。</p> </div> <div id="qoyqs8suu2u" class="right-footer layui-hidemd"> <ul class="flex_box_zd"> <li> <h6>UCloud與云服務</h6> <p><a href="http://systransis.cn/site/about/intro/">公司介紹</a></p> <p><a >加入我們</a></p> <p><a href="http://systransis.cn/site/ucan/onlineclass/">UCan線上公開課</a></p> <p><a href="http://systransis.cn/site/solutions.html" >行業(yè)解決方案</a></p> <p><a href="http://systransis.cn/site/pro-notice/">產品動態(tài)</a></p> </li> <li> <h6>友情鏈接</h6> <p><a >GPU算力平臺</a></p> <p><a >UCloud私有云</a></p> <p><a >SurferCloud</a></p> <p><a >工廠仿真軟件</a></p> <p><a >Pinex</a></p> <p><a >AI繪畫</a></p> </li> <li> <h6>社區(qū)欄目</h6> <p><a href="http://systransis.cn/yun/column/index.html">專欄文章</a></p> <p><a href="http://systransis.cn/yun/udata/">專題地圖</a></p> </li> <li> <h6>常見問題</h6> <p><a href="http://systransis.cn/site/ucsafe/notice.html" >安全中心</a></p> <p><a href="http://systransis.cn/site/about/news/recent/" >新聞動態(tài)</a></p> <p><a href="http://systransis.cn/site/about/news/report/">媒體動態(tài)</a></p> <p><a href="http://systransis.cn/site/cases.html">客戶案例</a></p> <p><a href="http://systransis.cn/site/notice/">公告</a></p> </li> <li> <span><img src="https://static.ucloud.cn/7a4b6983f4b94bcb97380adc5d073865.png" alt="優(yōu)刻得"></span> <p>掃掃了解更多</p></div> </div> <div id="qoyqs8suu2u" class="copyright">Copyright ? 2012-2023 UCloud 優(yōu)刻得科技股份有限公司<i>｜</i><a rel="nofollow" >滬公網安備 31011002000058號</a><i>｜</i><a rel="nofollow" ></a> 滬ICP備12020087號-3</a><i>｜</i> <script type="text/javascript" src="https://gyfk12.kuaishang.cn/bs/ks.j?cI=197688&fI=125915" charset="utf-8"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://#/hm.js?290c2650b305fc9fff0dbdcafe48b59d"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-DZSMXQ3P9N"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-DZSMXQ3P9N'); </script> <script> (function(){ var el = document.createElement("script"); el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?99f50ea166557aed914eb4a66a7a70a4709cbb98a54ecb576877d99556fb4bfc3d72cd14f8a76432df3935ab77ec54f830517b3cb210f7fd334f50ccb772134a"; el.id = "ttzz"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(el, s); })(window) </script></div> </div> </footer> <footer> <div class="friendship-link"> <p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p> <a href="http://systransis.cn/" title="成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费">成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费</a> <div class="friend-links"> </div> </div> </footer> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body><div id="p1z75" class="pl_css_ganrao" style="display: none;"><dfn id="p1z75"><mark id="p1z75"></mark></dfn><ins id="p1z75"><pre id="p1z75"></pre></ins><strike id="p1z75"><strong id="p1z75"><form id="p1z75"><output id="p1z75"></output></form></strong></strike><p id="p1z75"><strong id="p1z75"></strong></p><em id="p1z75"><div id="p1z75"></div></em><th id="p1z75"></th><small id="p1z75"><meter id="p1z75"></meter></small><track id="p1z75"></track><form id="p1z75"><output id="p1z75"><sub id="p1z75"><strike id="p1z75"></strike></sub></output></form><pre id="p1z75"><style id="p1z75"></style></pre><strike id="p1z75"><var id="p1z75"></var></strike><strike id="p1z75"><var id="p1z75"><form id="p1z75"><ins id="p1z75"></ins></form></var></strike><pre id="p1z75"><strike id="p1z75"></strike></pre><rp id="p1z75"><thead id="p1z75"></thead></rp><nobr id="p1z75"><small id="p1z75"><ins id="p1z75"><address id="p1z75"></address></ins></small></nobr><strong id="p1z75"></strong><legend id="p1z75"></legend><meter id="p1z75"></meter><strong id="p1z75"><rp id="p1z75"></rp></strong><u id="p1z75"></u><b id="p1z75"><meter id="p1z75"><pre id="p1z75"><style id="p1z75"></style></pre></meter></b><dfn id="p1z75"><dfn id="p1z75"></dfn></dfn><u id="p1z75"></u><menuitem id="p1z75"></menuitem><b id="p1z75"><meter id="p1z75"><acronym id="p1z75"><style id="p1z75"></style></acronym></meter></b><mark id="p1z75"><span id="p1z75"></span></mark><u id="p1z75"><mark id="p1z75"></mark></u><pre id="p1z75"></pre><i id="p1z75"></i><dfn id="p1z75"></dfn><thead id="p1z75"><sup id="p1z75"><strong id="p1z75"><th id="p1z75"></th></strong></sup></thead><track id="p1z75"></track><u id="p1z75"><mark id="p1z75"></mark></u><ins id="p1z75"></ins><dl id="p1z75"><i id="p1z75"><listing id="p1z75"><dfn id="p1z75"></dfn></listing></i></dl><legend id="p1z75"></legend><dfn id="p1z75"><mark id="p1z75"><form id="p1z75"><thead id="p1z75"></thead></form></mark></dfn><legend id="p1z75"><dfn id="p1z75"><strong id="p1z75"><ruby id="p1z75"></ruby></strong></dfn></legend><u id="p1z75"><mark id="p1z75"></mark></u><em id="p1z75"></em><progress id="p1z75"><pre id="p1z75"></pre></progress><strike id="p1z75"><strong id="p1z75"><pre id="p1z75"><video id="p1z75"></video></pre></strong></strike><sup id="p1z75"></sup><tt id="p1z75"><big id="p1z75"></big></tt><label id="p1z75"><th id="p1z75"><b id="p1z75"><meter id="p1z75"></meter></b></th></label><div id="p1z75"></div><dl id="p1z75"><i id="p1z75"><listing id="p1z75"><dfn id="p1z75"></dfn></listing></i></dl><small id="p1z75"><ins id="p1z75"></ins></small><menuitem id="p1z75"><span id="p1z75"><legend id="p1z75"><label id="p1z75"></label></legend></span></menuitem><sub id="p1z75"><strike id="p1z75"></strike></sub><address id="p1z75"><strike id="p1z75"><strong id="p1z75"><optgroup id="p1z75"></optgroup></strong></strike></address><output id="p1z75"><address id="p1z75"><strike id="p1z75"><ol id="p1z75"></ol></strike></address></output><i id="p1z75"></i><pre id="p1z75"><video id="p1z75"><em id="p1z75"><big id="p1z75"></big></em></video></pre><em id="p1z75"></em><pre id="p1z75"><track id="p1z75"><tt id="p1z75"><mark id="p1z75"></mark></tt></track></pre><listing id="p1z75"></listing><small id="p1z75"><meter id="p1z75"><address id="p1z75"><p id="p1z75"></p></address></meter></small><label id="p1z75"><strong id="p1z75"></strong></label><label id="p1z75"><strong id="p1z75"></strong></label><legend id="p1z75"></legend><label id="p1z75"></label><ol id="p1z75"><pre id="p1z75"><video id="p1z75"><tt id="p1z75"></tt></video></pre></ol><label id="p1z75"><strong id="p1z75"></strong></label><div id="p1z75"><strong id="p1z75"></strong></div><listing id="p1z75"><u id="p1z75"></u></listing><form id="p1z75"><ins id="p1z75"></ins></form><dfn id="p1z75"><menuitem id="p1z75"><span id="p1z75"><i id="p1z75"></i></span></menuitem></dfn><output id="p1z75"><address id="p1z75"><p id="p1z75"><var id="p1z75"></var></p></address></output><form id="p1z75"><output id="p1z75"></output></form><font id="p1z75"><progress id="p1z75"></progress></font><strong id="p1z75"><rp id="p1z75"><font id="p1z75"><progress id="p1z75"></progress></font></rp></strong><progress id="p1z75"><sup id="p1z75"><strong id="p1z75"><rp id="p1z75"></rp></strong></sup></progress><rp id="p1z75"></rp><form id="p1z75"><ins id="p1z75"><address id="p1z75"><strike id="p1z75"></strike></address></ins></form><style id="p1z75"></style><dfn id="p1z75"></dfn><ins id="p1z75"></ins><small id="p1z75"></small><mark id="p1z75"><form id="p1z75"></form></mark><font id="p1z75"><progress id="p1z75"></progress></font><meter id="p1z75"><acronym id="p1z75"><style id="p1z75"><var id="p1z75"></var></style></acronym></meter><u id="p1z75"><ruby id="p1z75"></ruby></u><em id="p1z75"><div id="p1z75"></div></em><meter id="p1z75"><acronym id="p1z75"></acronym></meter><progress id="p1z75"></progress><strike id="p1z75"><var id="p1z75"></var></strike><thead id="p1z75"></thead><acronym id="p1z75"></acronym><dl id="p1z75"></dl><sup id="p1z75"><label id="p1z75"></label></sup><sup id="p1z75"><label id="p1z75"><rp id="p1z75"><b id="p1z75"></b></rp></label></sup><label id="p1z75"></label><strong id="p1z75"><ruby id="p1z75"></ruby></strong><style id="p1z75"><nobr id="p1z75"></nobr></style><u id="p1z75"></u><b id="p1z75"><meter id="p1z75"><pre id="p1z75"><p id="p1z75"></p></pre></meter></b><label id="p1z75"><strong id="p1z75"></strong></label><strong id="p1z75"><optgroup id="p1z75"></optgroup></strong><sub id="p1z75"></sub></div> <script src="http://systransis.cn/yun/static/theme/ukd/js/common.js"></script> <<script type="text/javascript"> $(".site-seo-depict *,.site-content-answer-body *,.site-body-depict *").css("max-width","100%"); </script> </html>