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

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

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

首先來看看 demo 效果：

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

傳統(tǒng)的輸入框都是使用 </b> 來制作的，它的優(yōu)勢是非常簡單，但最大的缺陷卻是無法展示圖片。為了能夠讓輸入框能夠展示圖片（富文本化），我們可以采用設(shè)置了 <b>contenteditable="true"</b> 屬性的 <b><div></b> 來實現(xiàn)這里面的功能。</p> <p>簡單創(chuàng)建一個 <b>index.html</b> 文件，然后寫入如下內(nèi)容：</p> <pre><div id="dnkpnhlp" class="editor" contenteditable="true"> <img src="https://static.easyicon.net/preview/121/1214124.gif" alt=""> </div></pre> <p>打開瀏覽器，就能看到一個默認已經(jīng)帶了一張圖片的輸入框：</p> <p><script type="text/javascript">showImg("https://segmentfault.com/img/bVbpcse?w=973&h=242");</script></p> <p>光標可以在圖片前后移動，同時也可以輸入內(nèi)容，甚至通過退格鍵刪除這張圖片——換句話說，圖片也是可編輯內(nèi)容的一部分，也意味著輸入框的富文本化已經(jīng)體現(xiàn)出來了。</p> <p>接下來的任務(wù)，就是思考如何直接通過 <b>control + v</b> 把圖片粘貼進去了。</p> <b>處理粘貼事件</b> <p>任何通過“復制”或者 <b>control + c</b> 所復制的內(nèi)容（包括屏幕截圖）都會儲存在剪貼板，在粘貼的時候可以在輸入框的 <b>onpaste</b> 事件里面監(jiān)聽到。</p> <pre>document.querySelector(".editor").addEventListener("paste", (e) => { console.log(e.clipboardData.items) })</pre> <p>而剪貼板的的內(nèi)容則存放在 <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ā)現(xiàn)，如果直接在控制臺點開 <b>DataTransferItemList</b> 前的小箭頭，會發(fā)現(xiàn)對象的 <b>length</b> 屬性為0。說好的剪貼板內(nèi)容呢？其實這是 Chrome 調(diào)試的一個小坑。在開發(fā)者工具里面，<b>console.log</b> 出來的對象是一個引用，會隨著原始數(shù)據(jù)的改變而改變。由于剪貼板的數(shù)據(jù)已經(jīng)被“粘貼”進輸入框了，所以展開小箭頭以后看到的 <b>DataTransferItemList</b> 就變成空的了。為此，我們可以改用 <b>console.table</b> 來展示實時的結(jié)果。</p> <p><script type="text/javascript">showImg("https://segmentfault.com/img/bVbpcwl?w=556&h=101");</script></p> <p>在明白了剪貼板數(shù)據(jù)的存放位置以后，就可以編寫代碼來處理它們了。由于我們的富文本輸入框比較簡單，所以只需要處理兩類數(shù)據(jù)即可，其一是普通的文本類型數(shù)據(jù)，包括 emoji 表情；其二則是圖片類型數(shù)據(jù)。</p> <p>新建 <b>paste.js</b> 文件：</p> <pre>const onPaste = (e) => { // 如果剪貼板沒有數(shù)據(jù)則直接返回 if (!(e.clipboardData && e.clipboardData.items)) { return } // 用Promise封裝便于將來使用 return new Promise((resolve, reject) => { // 復制的內(nèi)容在剪貼板里位置不確定，所以通過遍歷來保證數(shù)據(jù)準確 for (let i = 0, len = e.clipboardData.items.length; i < len; i++) { const item = e.clipboardData.items[i] // 文本格式內(nèi)容處理 if (item.kind === "string") { item.getAsString((str) => { resolve(str) }) // 圖片格式內(nèi)容處理 } 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> 的同學會知道，包括圖片在內(nèi)的所有文件格式內(nèi)容都會儲存在 <b>File</b> 對象里面，這在剪貼板里面也是一樣的。于是我們可以編寫一套通用的函數(shù)，專門來讀取 <b>File</b> 對象里的圖片內(nèi)容，并把它轉(zhuǎn)化成 <b>base64</b> 字符串。</p> <b>粘貼圖片</b> <p>為了更好地在輸入框里展示圖片，必須限制圖片的大小，所以這個圖片處理函數(shù)不僅能夠讀取 <b>File</b> 對象里面的圖片，還能夠?qū)ζ溥M行壓縮。</p> <p>新建一個 <b>chooseImg.js</b> 文件：</p> <pre>/** * 預(yù)覽函數(shù) * * @param {*} dataUrl base64字符串 * @param {*} cb 回調(diào)函數(shù) */ function toPreviewer (dataUrl, cb) { cb && cb(dataUrl) } /** * 圖片壓縮函數(shù) * * @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 } /** * 選擇圖片函數(shù) * * @param {*} e input.onchange事件對象 * @param {*} cb 回調(diào)函數(shù) * @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>關(guān)于使用 <b>canvas</b> 壓縮圖片和使用 <b>FileReader</b> 讀取文件的內(nèi)容在這里就不贅述了，感興趣的讀者可以自行查閱。</pre> <p>回到上一步的 <b>paste.js</b> 函數(shù)，把其中的 <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>輸入框中插入內(nèi)容</b> <p>經(jīng)過前面兩個步驟，我們后已經(jīng)可以讀取剪貼板中的文本內(nèi)容和圖片內(nèi)容了，接下來就是把它們正確的插入輸入框的光標位置當中。</p> <p>對于插入內(nèi)容，我們可以直接通過 <b>document.execCommand</b> 方法進行。關(guān)于這個方法詳細用法可以在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> 來實現(xiàn)。而之后選擇并插入 emoji 的操作也會用到它，因此不妨先來了解一下。</p> <p>當我們在代碼中調(diào)用 <b>window.getSelection()</b> 后會獲得一個 <b>Selection</b> 對象。如果在頁面中選中一些文字，然后在控制臺執(zhí)行 <b>window.getSelection().toString()</b>，就會看到輸出是你所選擇的那部分文字。</p> <p>與這部分區(qū)域文字相對應(yīng)的，是一個 <b>range</b> 對象，使用 <b>window.getSelection().getRangeAt(0)</b> 即可以訪問它。<b>range</b> 不僅包含了選中區(qū)域文字的內(nèi)容，還包括了區(qū)域的起點位置 <b>startOffset</b> 和終點位置 <b>endOffset</b>。</p> <p>我們也可以通過 <b>document.createRange()</b> 的辦法手動創(chuàng)建一個 <b>range</b>，往它里面寫入內(nèi)容并展示在輸入框中。</p> <p>對于插入圖片來說，要先從 <b>window.getSelection()</b> 獲取<b> range</b> ，然后往里面插入圖片。</p> <pre>document.querySelector(".editor").addEventListener("paste", async (e) => { // 讀取剪貼板的內(nèi)容 const result = await onPaste(e) const imgRegx = /^data:image/png;base64,/ // 如果是圖片格式（base64），則通過構(gòu)造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 } /** * 設(shè)置光標位置 * @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>記錄下光標位置后，便可通過調(diào)用 <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>文章涉及的代碼已經(jīng)上傳到倉庫，為了簡便起見采用 <b>VueJS</b> 處理了一下，不影響閱讀。最后想說的是，這個 Demo 僅僅完成了輸入框最基礎(chǔ)的部分，關(guān)于復制粘貼還有很多細節(jié)要處理（比如把別處的行內(nèi)樣式也復制了進來等等），在這里就不一一展開了，感興趣的讀者可以自行研究，更歡迎和我留言交流~</p> </div> <div id="dnkpnhlp" class="mt-64 tags-seach" > <div id="dnkpnhlp" class="tags-info"> <a style="width:120px;" title="云服務(wù)器" href="http://www.ezyhdfw.cn/site/active/kuaijiesale.html?ytag=seo">云服務(wù)器</a> <a style="width:120px;" title="GPU云服務(wù)器" href="http://www.ezyhdfw.cn/site/product/gpu.html">GPU云服務(wù)器</a> <a style="width:120px;" title="文本輸入框" href="http://www.ezyhdfw.cn/yun/tag/wenbenshurukuang/">文本輸入框</a> <a style="width:120px;" title="文本框輸入數(shù)字" href="http://www.ezyhdfw.cn/yun/tag/wenbenkuangshurushuzi/">文本框輸入數(shù)字</a> <a style="width:120px;" title="文本框輸入限制" href="http://www.ezyhdfw.cn/yun/tag/wenbenkuangshuruxianzhi/">文本框輸入限制</a> <a style="width:120px;" title="手機文本輸入框設(shè)計" href="http://www.ezyhdfw.cn/yun/tag/shoujiwenbenshurukuangsheji/">手機文本輸入框設(shè)計</a> </div> </div> <div id="dnkpnhlp" class="entry-copyright mb-30"> <p class="mb-15"> 文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。</p> <p>轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/102311.html</p> </div> <ul class="pre-next-page"> <li id="dnkpnhlp" class="ellipsis"><a class="hpf" href="http://www.ezyhdfw.cn/yun/102310.html">上一篇：衣食父母-瀏覽器</a></li> <li id="dnkpnhlp" class="ellipsis"><a class="hpf" href="http://www.ezyhdfw.cn/yun/102312.html">下一篇：設(shè)計模式——觀察者模式</a></li> </ul> </div> <div id="dnkpnhlp" class="about_topicone-mid"> <h3 class="top-com-title mb-0"><span data-id="0">相關(guān)文章</span></h3> <ul class="com_white-left-mid atricle-list-box"> <li> <div id="dnkpnhlp" class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="http://www.ezyhdfw.cn/yun/41986.html"><b>selenuim操作基于REACT實現(xiàn)<em>的富</em><em>文本</em>編輯器1</b></a></h2> <p class="ellipsis2 good">摘要：中大多數(shù)的輸入框都是標簽，但是由于業(yè)務(wù)中前端有使用到基于實現(xiàn)的富文本編輯器，在實現(xiàn)自動化測試編寫時自然會涉及到對富文本器進行操作處理檢查該編輯器的元素，可以看到和正常的不同，該結(jié)構(gòu)為一個里面裹了個而在其中輸入文字，則是在改變中的如果有換行的 web中大多數(shù)的輸入框都是標簽，但是由于業(yè)務(wù)中前端有使用到基于REACT實現(xiàn)的富文本編輯器，在實現(xiàn)自動化測試編寫時自然會涉及到對富文本器進行操作處...</p> <div id="dnkpnhlp" class="com_white-left-info"> <div id="dnkpnhlp" class="com_white-left-infol"> <a href="http://www.ezyhdfw.cn/yun/u-337.html"><img src="http://www.ezyhdfw.cn/yun/data/avatar/000/00/03/small_000000337.jpg" alt=""><span id="dnkpnhlp" 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="dnkpnhlp" class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="http://www.ezyhdfw.cn/yun/98577.html"><b>javascript功能插件大集合 前端常用插件 js常用插件</b></a></h2> <p class="ellipsis2 good">摘要：轉(zhuǎn)載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構(gòu)建更好應(yīng)用的客戶端包管理器。一個整合和的最佳思想，使開發(fā)者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數(shù)據(jù)。 轉(zhuǎn)載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...</p> <div id="dnkpnhlp" class="com_white-left-info"> <div id="dnkpnhlp" class="com_white-left-infol"> <a href="http://www.ezyhdfw.cn/yun/u-529.html"><img src="http://www.ezyhdfw.cn/yun/data/avatar/000/00/05/small_000000529.jpg" alt=""><span id="dnkpnhlp" 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="dnkpnhlp" class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="http://www.ezyhdfw.cn/yun/53105.html"><b>javascript功能插件大集合 前端常用插件 js常用插件</b></a></h2> <p class="ellipsis2 good">摘要：轉(zhuǎn)載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構(gòu)建更好應(yīng)用的客戶端包管理器。一個整合和的最佳思想，使開發(fā)者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數(shù)據(jù)。 轉(zhuǎn)載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...</p> <div id="dnkpnhlp" class="com_white-left-info"> <div id="dnkpnhlp" class="com_white-left-infol"> <a href="http://www.ezyhdfw.cn/yun/u-906.html"><img src="http://www.ezyhdfw.cn/yun/data/avatar/000/00/09/small_000000906.jpg" alt=""><span id="dnkpnhlp" 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="dnkpnhlp" class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="http://www.ezyhdfw.cn/yun/80211.html"><b>javascript功能插件大集合，寫前端的親們記得收藏</b></a></h2> <p class="ellipsis2 good">摘要：一個專注于瀏覽器端和兼容的包管理器。一個整合和的最佳思想，使開發(fā)者能快速方便地組織和編寫前端代碼的下一代包管理器。完全插件化的工具，能在中識別和記錄模式。健壯的優(yōu)雅且功能豐富的模板引擎。完整的經(jīng)過充分測試和記錄數(shù)據(jù)結(jié)構(gòu)的庫。 【導讀】：GitHub 上有一個 Awesome – XXX 系列的資源整理。awesome-javascript 是 sorrycc 發(fā)起維護的 JS 資源列表...</p> <div id="dnkpnhlp" class="com_white-left-info"> <div id="dnkpnhlp" class="com_white-left-infol"> <a href="http://www.ezyhdfw.cn/yun/u-1306.html"><img src="http://www.ezyhdfw.cn/yun/data/avatar/000/00/13/small_000001306.jpg" alt=""><span id="dnkpnhlp" 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="dnkpnhlp" class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="http://www.ezyhdfw.cn/yun/104130.html"><b>JavaScript 資源大全中文版</b></a></h2> <p class="ellipsis2 good">摘要：官網(wǎng)全新的靜態(tài)包管理器。官網(wǎng)一個整合和官網(wǎng)的最佳思想，使開發(fā)者能快速方便地組織和編寫前端代碼的下一代包管理器。官網(wǎng)小巧的兼容的所見即所得的富文本編輯器。官網(wǎng)富文本編輯器。官網(wǎng)由制作，適用于每天寫作的富文本編輯器。 1. 包管理器 管理著 javascript 庫，并提供讀取和打包它們的工具。 npm：npm 是 javascript 的包管理器。官網(wǎng) cnpm：cnpm 是 由于國...</p> <div id="dnkpnhlp" class="com_white-left-info"> <div id="dnkpnhlp" class="com_white-left-infol"> <a href="http://www.ezyhdfw.cn/yun/u-1077.html"><img src="http://www.ezyhdfw.cn/yun/data/avatar/000/00/10/small_000001077.jpg" alt=""><span id="dnkpnhlp" 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="dnkpnhlp" class="topicone-box-wangeditor"> <h3 class="top-com-title mb-64"><span>發(fā)表評論</span></h3> <div id="dnkpnhlp" class="xcp-publish-main flex_box_zd"> <div id="dnkpnhlp" class="unlogin-pinglun-box"> <a href="javascript:login()" class="grad">登陸后可評論</a> </div> </div> </div> <div id="dnkpnhlp" class="site-box-content"> <div id="dnkpnhlp" class="site-content-title"> <h3 class="top-com-title mb-64"><span>0條評論</span></h3> </div> <div id="dnkpnhlp" class="pages"></ul></div> </div> </div> <div id="dnkpnhlp" class="layui-col-md4 layui-col-lg3 com_white-right site-wrap-right"> <div id="dnkpnhlp" class=""> <div id="dnkpnhlp" class="com_layuiright-box user-msgbox"> <a href="http://www.ezyhdfw.cn/yun/u-1196.html"><img src="http://www.ezyhdfw.cn/yun/data/avatar/000/00/11/small_000001196.jpg" alt=""></a> <h3><a href="http://www.ezyhdfw.cn/yun/u-1196.html" rel="nofollow">iKcamp</a></h3> <h6>男<span>|</span>高級講師</h6> <div id="dnkpnhlp" class="flex_box_zd user-msgbox-atten"> <a href="javascript:attentto_user(1196)" id="attenttouser_1196" class="grad follow-btn notfollow attention">我要關(guān)注</a> <a href="javascript:login()" title="發(fā)私信" >我要私信</a> </div> <div id="dnkpnhlp" class="user-msgbox-list flex_box_zd"> <h3 class="hpf">TA的文章</h3> <a href="http://www.ezyhdfw.cn/yun/ut-1196.html" class="box_hxjz">閱讀更多</a> </div> <ul class="user-msgbox-ul"> <li><h3 class="ellipsis"><a href="http://www.ezyhdfw.cn/yun/130983.html">在tensorflow</a></h3> <p>閱讀 1068<span>·</span>2023-04-26 02:49</p></li> <li><h3 class="ellipsis"><a href="http://www.ezyhdfw.cn/yun/124962.html">NGINX_ I/O 模型</a></h3> <p>閱讀 1238<span>·</span>2021-11-25 09:43</p></li> <li><h3 class="ellipsis"><a href="http://www.ezyhdfw.cn/yun/123690.html">ASEMI超快恢復二極管MUR2060AC在高頻設(shè)備中的應(yīng)用</a></h3> <p>閱讀 2625<span>·</span>2021-11-18 10:02</p></li> <li><h3 class="ellipsis"><a href="http://www.ezyhdfw.cn/yun/122630.html">virtono：新增美國洛杉磯/紐約/西班牙馬德里/法國巴黎/瑞典機房，1核/512M內(nèi)存/15G </a></h3> <p>閱讀 2985<span>·</span>2021-10-18 13:32</p></li> <li><h3 class="ellipsis"><a href="http://www.ezyhdfw.cn/yun/115618.html">Vue學習日記（三）——Vue路由管理vue-router</a></h3> <p>閱讀 1333<span>·</span>2019-08-30 13:54</p></li> <li><h3 class="ellipsis"><a href="http://www.ezyhdfw.cn/yun/115205.html">前端面試知識點集錦</a></h3> <p>閱讀 2142<span>·</span>2019-08-30 12:58</p></li> <li><h3 class="ellipsis"><a href="http://www.ezyhdfw.cn/yun/112922.html">個人常用的軟件-前端</a></h3> <p>閱讀 3074<span>·</span>2019-08-29 14:06</p></li> <li><h3 class="ellipsis"><a href="http://www.ezyhdfw.cn/yun/111068.html">瀏覽器 CSS Hack 收集</a></h3> <p>閱讀 2217<span>·</span>2019-08-28 18:10</p></li> </ul> </div> <!-- 文章詳情右側(cè)廣告--> <div id="dnkpnhlp" class="com_layuiright-box"> <h6 class="top-com-title"><span>最新活動</span></h6> <div id="dnkpnhlp" class="com_adbox"> <div id="dnkpnhlp" class="layui-carousel" id="right-item"> <div carousel-item> <div> <a href="http://www.ezyhdfw.cn/site/active/kuaijiesale.html?ytag=seo" rel="nofollow"> <img src="http://www.ezyhdfw.cn/yun/data/attach/240625/2rTjEHmi.png" alt="云服務(wù)器"> </a> </div> <div> <a href="http://www.ezyhdfw.cn/site/product/gpu.html" rel="nofollow"> <img src="http://www.ezyhdfw.cn/yun/data/attach/240807/7NjZjdrd.png" alt="GPU云服務(wù)器"> </a> </div> </div> </div> </div> <!-- banner結(jié)束 --> <div id="dnkpnhlp" class="adhtml"> </div> <script> $(function(){ $.ajax({ type: "GET", url:"http://www.ezyhdfw.cn/yun/ad/getad/1.html", cache: false, success: function(text){ $(".adhtml").html(text); } }); }) </script> </div> </div> </div> </div> </div> </section> <!-- wap拉出按鈕 --> <div id="dnkpnhlp" class="site-tree-mobile layui-hide"> <i class="layui-icon layui-icon-spread-left"></i> </div> <!-- wap遮罩層 --> <div id="dnkpnhlp" class="site-mobile-shade"></div> <!--付費閱讀 --> <div class="dnkpnhlp" id="payread"> <div id="dnkpnhlp" class="layui-form-item">閱讀需要支付1元查看</div> <div id="dnkpnhlp" 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://www.ezyhdfw.cn/yun/static/js/neweditor/code/styles/tomorrow-night-eighties.css"> <script src="http://www.ezyhdfw.cn/yun/static/js/neweditor/code/highlight.pack.js" type="text/javascript"></script> <script src="http://www.ezyhdfw.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("評論內(nèi)容不能為空"); 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://www.ezyhdfw.cn/yun/index.php?topic/ajaxhassupport/" + tid, cache: false, success: function(hassupport){ if (hassupport != '1'){ $.ajax({ type: "GET", cache:false, url: "http://www.ezyhdfw.cn/yun/index.php?topic/ajaxaddsupport/" + tid, success: function(comments) { supportobj.find("span").html(comments+"人贊"); } }); }else{ alert("您已經(jīng)贊過"); } } }); }); function attenquestion(_tid,_rs){ $.ajax({ //提交數(shù)據(jù)的類型 POST GET type:"POST", //提交的網(wǎng)址 url:"http://www.ezyhdfw.cn/yun/favorite/topicadd.html", //提交的數(shù)據(jù) data:{tid:_tid,rs:_rs}, //返回數(shù)據(jù)的格式 datatype: "json",//"xml", "html", "script", "json", "jsonp", "text". //在請求之前調(diào)用的函數(shù) beforeSend:function(){}, //成功返回之后調(diào)用的函數(shù) 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) } } , //調(diào)用執(zhí)行后調(diào)用的函數(shù) complete: function(XMLHttpRequest, textStatus){ postadopt=true; }, //調(diào)用出錯執(zhí)行的函數(shù) error: function(){ //請求出錯處理 postadopt=false; } }); } </script> <footer> <div id="dnkpnhlp" class="layui-container"> <div id="dnkpnhlp" class="flex_box_zd"> <div id="dnkpnhlp" class="left-footer"> <h6><a href="http://www.ezyhdfw.cn/"><img src="http://www.ezyhdfw.cn/yun/static/theme/ukd//images/logo.png" alt="UCloud （優(yōu)刻得科技股份有限公司）"></a></h6> <p>UCloud （優(yōu)刻得科技股份有限公司）是中立、安全的云計算服務(wù)平臺，堅持中立，不涉足客戶業(yè)務(wù)領(lǐng)域。公司自主研發(fā)IaaS、PaaS、大數(shù)據(jù)流通平臺、AI服務(wù)平臺等一系列云計算產(chǎn)品，并深入了解互聯(lián)網(wǎng)、傳統(tǒng)企業(yè)在不同場景下的業(yè)務(wù)需求，提供公有云、混合云、私有云、專有云在內(nèi)的綜合性行業(yè)解決方案。</p> </div> <div id="dnkpnhlp" class="right-footer layui-hidemd"> <ul class="flex_box_zd"> <li> <h6>UCloud與云服務(wù)</h6> <p><a href="http://www.ezyhdfw.cn/site/about/intro/">公司介紹</a></p> <p><a >加入我們</a></p> <p><a href="http://www.ezyhdfw.cn/site/ucan/onlineclass/">UCan線上公開課</a></p> <p><a href="http://www.ezyhdfw.cn/site/solutions.html" >行業(yè)解決方案</a></p> <p><a href="http://www.ezyhdfw.cn/site/pro-notice/">產(chǎn)品動態(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 >AI繪畫</a></p> <p><a >Wavespeed AI</a></p> </li> <li> <h6>社區(qū)欄目</h6> <p><a href="http://www.ezyhdfw.cn/yun/column/index.html">專欄文章</a></p> <p><a href="http://www.ezyhdfw.cn/yun/udata/">專題地圖</a></p> </li> <li> <h6>常見問題</h6> <p><a href="http://www.ezyhdfw.cn/site/ucsafe/notice.html" >安全中心</a></p> <p><a href="http://www.ezyhdfw.cn/site/about/news/recent/" >新聞動態(tài)</a></p> <p><a href="http://www.ezyhdfw.cn/site/about/news/report/">媒體動態(tài)</a></p> <p><a href="http://www.ezyhdfw.cn/site/cases.html">客戶案例</a></p> <p><a href="http://www.ezyhdfw.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="dnkpnhlp" class="copyright">Copyright ? 2012-2025 UCloud 優(yōu)刻得科技股份有限公司<i>｜</i><a rel="nofollow" >滬公網(wǎng)安備 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://www.ezyhdfw.cn/" title="亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站 ">亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站 </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="2ubhv" class="pl_css_ganrao" style="display: none;"><dl id="2ubhv"></dl><listing id="2ubhv"><u id="2ubhv"><table id="2ubhv"><font id="2ubhv"></font></table></u></listing><th id="2ubhv"><ins id="2ubhv"><output id="2ubhv"></output></ins></th><tr id="2ubhv"></tr><del id="2ubhv"><mark id="2ubhv"><ins id="2ubhv"><xmp id="2ubhv"></xmp></ins></mark></del><dl id="2ubhv"></dl><i id="2ubhv"><optgroup id="2ubhv"><em id="2ubhv"><dfn id="2ubhv"></dfn></em></optgroup></i><acronym id="2ubhv"><tr id="2ubhv"><fieldset id="2ubhv"><style id="2ubhv"></style></fieldset></tr></acronym><center id="2ubhv"><big id="2ubhv"><strong id="2ubhv"><strong id="2ubhv"></strong></strong></big></center><noscript id="2ubhv"></noscript><nav id="2ubhv"><label id="2ubhv"><code id="2ubhv"></code></label></nav><dl id="2ubhv"></dl><em id="2ubhv"></em><blockquote id="2ubhv"><samp id="2ubhv"></samp></blockquote><optgroup id="2ubhv"><button id="2ubhv"></button></optgroup><tr id="2ubhv"><address id="2ubhv"><thead id="2ubhv"></thead></address></tr><ul id="2ubhv"></ul><meter id="2ubhv"></meter><thead id="2ubhv"></thead><sup id="2ubhv"><table id="2ubhv"><strong id="2ubhv"><legend id="2ubhv"></legend></strong></table></sup><option id="2ubhv"></option><strike id="2ubhv"></strike><noframes id="2ubhv"><kbd id="2ubhv"></kbd></noframes><rt id="2ubhv"><fieldset id="2ubhv"><label id="2ubhv"><acronym id="2ubhv"></acronym></label></fieldset></rt><form id="2ubhv"></form><strong id="2ubhv"><track id="2ubhv"><del id="2ubhv"></del></track></strong><pre id="2ubhv"><dl id="2ubhv"><dfn id="2ubhv"><u id="2ubhv"></u></dfn></dl></pre><big id="2ubhv"><strike id="2ubhv"><optgroup id="2ubhv"><em id="2ubhv"></em></optgroup></strike></big><strike id="2ubhv"><dl id="2ubhv"><acronym id="2ubhv"></acronym></dl></strike><pre id="2ubhv"><sup id="2ubhv"><nobr id="2ubhv"><small id="2ubhv"></small></nobr></sup></pre><sub id="2ubhv"></sub><pre id="2ubhv"></pre><tbody id="2ubhv"><label id="2ubhv"></label></tbody><span id="2ubhv"><fieldset id="2ubhv"><label id="2ubhv"></label></fieldset></span><del id="2ubhv"></del><button id="2ubhv"></button><tbody id="2ubhv"></tbody><label id="2ubhv"></label><menuitem id="2ubhv"><td id="2ubhv"><input id="2ubhv"></input></td></menuitem><delect id="2ubhv"></delect><th id="2ubhv"><nobr id="2ubhv"></nobr></th><optgroup id="2ubhv"></optgroup><u id="2ubhv"></u><code id="2ubhv"></code><dl id="2ubhv"><strong id="2ubhv"><track id="2ubhv"><menuitem id="2ubhv"></menuitem></track></strong></dl><thead id="2ubhv"></thead><p id="2ubhv"><menu id="2ubhv"><u id="2ubhv"><center id="2ubhv"></center></u></menu></p><strike id="2ubhv"><cite id="2ubhv"><li id="2ubhv"><nobr id="2ubhv"></nobr></li></cite></strike><form id="2ubhv"></form><label id="2ubhv"></label></div> <script src="http://www.ezyhdfw.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>