這篇文章主要講解了“怎么使用Web富文本輸入框”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“怎么使用Web富文本輸入框”吧！

創(chuàng)新互聯(lián)建站總部坐落于成都市區(qū)，致力網(wǎng)站建設(shè)服務(wù)有成都網(wǎng)站建設(shè)、做網(wǎng)站、網(wǎng)絡(luò)營(yíng)銷策劃、網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站維護(hù)、公眾號(hào)搭建、小程序制作、軟件開(kāi)發(fā)等為企業(yè)提供一整套的信息化建設(shè)解決方案。創(chuàng)造真正意義上的網(wǎng)站建設(shè)，為互聯(lián)網(wǎng)品牌在互動(dòng)行銷領(lǐng)域創(chuàng)造價(jià)值而不懈努力！

輸入框富文本化

傳統(tǒng)的輸入框都是使用 來(lái)制作的，它的優(yōu)勢(shì)是非常簡(jiǎn)單，但***的缺陷卻是無(wú)法展示圖片。為了能夠讓輸入框能夠展示圖片（富文本化），我們可以采用設(shè)置了 contenteditable="true" 屬性的 <div> 來(lái)實(shí)現(xiàn)這里面的功能。</p><p>簡(jiǎn)單創(chuàng)建一個(gè) index.html 文件，然后寫(xiě)入如下內(nèi)容：</p><pre><div class="editor" contenteditable="true">    <img src="https://static.easyicon.net/preview/121/1214124.gif" alt="">  </div></pre><p>打開(kāi)瀏覽器，就能看到一個(gè)默認(rèn)已經(jīng)帶了一張圖片的輸入框：</p><p><img src="/upload/otherpic61/459552.png" alt="怎么使用Web富文本輸入框"></p><p>光標(biāo)可以在圖片前后移動(dòng)，同時(shí)也可以輸入內(nèi)容，甚至通過(guò)退格鍵刪除這張圖片——換句話說(shuō)，圖片也是可編輯內(nèi)容的一部分，也意味著輸入框的富文本化已經(jīng)體現(xiàn)出來(lái)了。</p><p>接下來(lái)的任務(wù)，就是思考如何直接通過(guò) control + v 把圖片粘貼進(jìn)去了。</p><p><strong>處理粘貼事件</strong></p><p>任何通過(guò)“復(fù)制”或者 control + c 所復(fù)制的內(nèi)容（包括屏幕截圖）都會(huì)儲(chǔ)存在剪貼板，在粘貼的時(shí)候可以在輸入框的 onpaste 事件里面監(jiān)聽(tīng)到。</p><pre><div class="editor" contenteditable="true">    <img src="https://static.easyicon.net/preview/121/1214124.gif" alt="">  </div></pre><p>而剪貼板的的內(nèi)容則存放在 DataTransferItemList 對(duì)象中，可以通過(guò) e.clipboardData.items 訪問(wèn)到：</p><p><img src="/upload/otherpic61/459553.png" alt="怎么使用Web富文本輸入框"></p><p>細(xì)心的讀者會(huì)發(fā)現(xiàn)，如果直接在控制臺(tái)點(diǎn)開(kāi) DataTransferItemList 前的小箭頭，會(huì)發(fā)現(xiàn)對(duì)象的 length 屬性為0。說(shuō)好的剪貼板內(nèi)容呢？其實(shí)這是 Chrome 調(diào)試的一個(gè)小坑。在開(kāi)發(fā)者工具里面，console.log 出來(lái)的對(duì)象是一個(gè)引用，會(huì)隨著原始數(shù)據(jù)的改變而改變。由于剪貼板的數(shù)據(jù)已經(jīng)被“粘貼”進(jìn)輸入框了，所以展開(kāi)小箭頭以后看到的 DataTransferItemList 就變成空的了。為此，我們可以改用 console.table 來(lái)展示實(shí)時(shí)的結(jié)果。</p><p><img src="/upload/otherpic61/459555.png" alt="怎么使用Web富文本輸入框"></p><p>在明白了剪貼板數(shù)據(jù)的存放位置以后，就可以編寫(xiě)代碼來(lái)處理它們了。由于我們的富文本輸入框比較簡(jiǎn)單，所以只需要處理兩類數(shù)據(jù)即可，其一是普通的文本類型數(shù)據(jù)，包括 emoji 表情；其二則是圖片類型數(shù)據(jù)。</p><p>新建 paste.js 文件：</p><pre>const onPaste = (e) => {    // 如果剪貼板沒(méi)有數(shù)據(jù)則直接返回    if (!(e.clipboardData && e.clipboardData.items)) {      return    }    // 用Promise封裝便于將來(lái)使用    return new Promise((resolve, reject) => {      // 復(fù)制的內(nèi)容在剪貼板里位置不確定，所以通過(guò)遍歷來(lái)保證數(shù)據(jù)準(zhǔn)確      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>然后就可以在 onPaste 事件里面直接使用了：</p><pre>document.querySelector('.editor').addEventListener('paste', async (e) => {      const result = await onPaste(e)      console.log(result)  })</pre><p>上面的代碼支持文本格式，接下來(lái)就要對(duì)圖片格式進(jìn)行處理了。玩過(guò) <input type="file"> 的同學(xué)會(huì)知道，包括圖片在內(nèi)的所有文件格式內(nèi)容都會(huì)儲(chǔ)存在 File 對(duì)象里面，這在剪貼板里面也是一樣的。于是我們可以編寫(xiě)一套通用的函數(shù)，專門來(lái)讀取 File 對(duì)象里的圖片內(nèi)容，并把它轉(zhuǎn)化成 base64 字符串。</p><p><strong>粘貼圖片</strong></p><p>為了更好地在輸入框里展示圖片，必須限制圖片的大小，所以這個(gè)圖片處理函數(shù)不僅能夠讀取 File 對(duì)象里面的圖片，還能夠?qū)ζ溥M(jìn)行壓縮。</p><p>新建一個(gè) chooseImg.js 文件：</p><pre>/**   * 預(yù)覽函數(shù)   *   * @param {*} dataUrl base64字符串   * @param {*} cb 回調(diào)函數(shù)   */  function toPreviewer (dataUrl, cb) {    cb && cb(dataUrl)  }  /**   * 圖片壓縮函數(shù)   *   * @param {*} img 圖片對(duì)象   * @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事件對(duì)象   * @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 compresscompressedDataUrl = compress(img, file.type, maxsize / 1024)        toPreviewer(compressedDataUrl, cb)        img = null      }       img.src = result    }    reader.readAsDataURL(file)  }  export default chooseImg</pre><p>關(guān)于使用 canvas 壓縮圖片和使用 FileReader 讀取文件的內(nèi)容在這里就不贅述了，感興趣的讀者可以自行查閱。</p><p>回到上一步的 paste.js 函數(shù)，把其中的 TODO() 改寫(xiě)成 chooseImg() 即可：</p><pre>const imgEvent = {    target: {      files: [pasteFile]    }  }  chooseImg(imgEvent, (url) => {    resolve(url)  })</pre><p>回到瀏覽器，如果我們復(fù)制一張圖片并在輸入框中執(zhí)行粘貼的動(dòng)作，將可以在控制臺(tái)看到打印出了以 data:image/png;base64 開(kāi)頭的圖片地址。</p><p><strong>輸入框中插入內(nèi)容</strong></p><p>經(jīng)過(guò)前面兩個(gè)步驟，我們后已經(jīng)可以讀取剪貼板中的文本內(nèi)容和圖片內(nèi)容了，接下來(lái)就是把它們正確的插入輸入框的光標(biāo)位置當(dāng)中。</p><p>對(duì)于插入內(nèi)容，我們可以直接通過(guò) document.execCommand 方法進(jìn)行。關(guān)于這個(gè)方法詳細(xì)用法可以在MDN文檔里面找到，在這里我們只需要使用 insertText 和 insertImage 即可。</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 瀏覽器下，insertImage 方法可能會(huì)失效，這時(shí)候便可以采用另外一種方法，利用 Selection 來(lái)實(shí)現(xiàn)。而之后選擇并插入 emoji 的操作也會(huì)用到它，因此不妨先來(lái)了解一下。</p><p>當(dāng)我們?cè)诖a中調(diào)用 window.getSelection() 后會(huì)獲得一個(gè) Selection 對(duì)象。如果在頁(yè)面中選中一些文字，然后在控制臺(tái)執(zhí)行 window.getSelection().toString()，就會(huì)看到輸出是你所選擇的那部分文字。</p><p>與這部分區(qū)域文字相對(duì)應(yīng)的，是一個(gè) range 對(duì)象，使用 window.getSelection().getRangeAt(0) 即可以訪問(wèn)它。range 不僅包含了選中區(qū)域文字的內(nèi)容，還包括了區(qū)域的起點(diǎn)位置 startOffset 和終點(diǎn)位置 endOffset。</p><p>我們也可以通過(guò) document.createRange() 的辦法手動(dòng)創(chuàng)建一個(gè) range，往它里面寫(xiě)入內(nèi)容并展示在輸入框中。</p><p>對(duì)于插入圖片來(lái)說(shuō)，要先從 window.getSelection() 獲取 range ，然后往里面插入圖片。</p><pre>document.querySelector('.editor').addEventListener('paste', async (e) => {    // 讀取剪貼板的內(nèi)容    const result = await onPaste(e)    const imgRegx = /^data:image\/png;base64,/    // 如果是圖片格式（base64），則通過(guò)構(gòu)造range的辦法把<img>標(biāo)簽插入正確的位置    // 如果是文本格式，則通過(guò)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>這種辦法也能很好地完成粘貼圖片的功能，并且通用性會(huì)更好。接下來(lái)我們還會(huì)利用 Selection，來(lái)完成 emoji 的插入。</p><p><strong>插入 emoji</strong></p><p>不管是粘貼文本也好，還是圖片也好，我們的輸入框始終是處于聚焦（focus）狀態(tài)。而當(dāng)我們從表情面板里選擇 emoji 表情的時(shí)候，輸入框會(huì)先失焦(blur），然后再重新聚焦。由于 document.execCommand 方法必須在輸入框聚焦?fàn)顟B(tài)下才能觸發(fā)，所以對(duì)于處理 emoji 插入來(lái)說(shuō)就無(wú)法使用了。</p><p>上一小節(jié)講過(guò)，Selection 可以讓我們拿到聚焦?fàn)顟B(tài)下所選文本的起點(diǎn)位置 startOffset 和終點(diǎn)位置 endOffset，如果沒(méi)有選擇文本而僅僅處于聚焦?fàn)顟B(tài)，那么這兩個(gè)位置的值相等（相當(dāng)于選擇文本為空），也就是光標(biāo)的位置。只要我們能夠在失焦前記錄下這個(gè)位置，那么就能夠通過(guò) range 把 emoji 插入正確的地方了。</p><p>首先編寫(xiě)兩個(gè)工具方法。新建一個(gè) cursorPosition.js 文件：</p><pre>/**   * 獲取光標(biāo)位置   * @param {DOMElement} element 輸入框的dom節(jié)點(diǎn)   * @return {Number} 光標(biāo)位置   */  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è)置光標(biāo)位置   * @param {DOMElement} element 輸入框的dom節(jié)點(diǎn)   * @param {Number} cursorPosition 光標(biāo)位置的值   */  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>有了這兩個(gè)方法以后，就可以放入 editor 節(jié)點(diǎn)里面使用了。首先在節(jié)點(diǎn)的 keyup 和 click 事件里記錄光標(biāo)位置：</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>記錄下光標(biāo)位置后，便可通過(guò)調(diào)用 insertEmoji() 方法插入 emoji 字符了。</p><pre>insertEmoji (emoji) {    const text = editor.innerHTML    // 插入 emoji    editor.innerHTML = text.slice(0, cursorPosition) + emoji + text.slice(cursorPosition, text.length)    // 光標(biāo)位置后挪一位，以保證在剛插入的 emoji 后面    setCursorPosition(editor, this.cursorPosition + 1)    // 更新本地保存的光標(biāo)位置變量（注意 emoji 占兩個(gè)字節(jié)大小，所以要加1）    cursorPosition = getCursorPosition(editor) + 1 //  emoji 占兩位  }</pre><p>感謝各位的閱讀，以上就是“怎么使用Web富文本輸入框”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)怎么使用Web富文本輸入框這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！</p> <br> 網(wǎng)站題目：怎么使用Web富文本輸入框 <br> 文章URL：<a href="http://weahome.cn/article/jeocco.html">http://weahome.cn/article/jeocco.html</a> </div> </div> </div> <div id="squ6kqw" class="other container"> <h3>其他資訊</h3> <ul> <li> <a href="/article/pphhjp.html">如何解決linux的ssh連接提示ITISPOSSIBLETHATSOMEONEISDOING的問(wèn)題</a> </li><li> <a href="/article/phooio.html">HBase依賴Zookeeper原因分析</a> </li><li> <a href="/article/phoosg.html">【MongoDB學(xué)習(xí)筆記11】MongoDB的WEB界面</a> </li><li> <a href="/article/pphhig.html">radwareAlten系列的HA配置</a> </li><li> <a href="/article/phoosj.html">淺談AndroidPathMeasure詳解和應(yīng)用</a> </li> </ul> </div> <div id="squ6kqw" class="footer"> <div id="squ6kqw" class="foota container"> <div id="squ6kqw" class="foot_nav fl col-lg-8 col-md-8 col-sm-12 col-xs-12"> <ul> <li id="squ6kqw" class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>網(wǎng)站制作</h3> <a target="_blank">定制網(wǎng)站制作</a><a target="_blank">廣安網(wǎng)站制作公司</a><a target="_blank">成都網(wǎng)站制作</a><a target="_blank">手機(jī)網(wǎng)站制作</a><a target="_blank">綿陽(yáng)網(wǎng)站制作公司</a><a target="_blank">成都網(wǎng)站制作</a> </li> <li id="squ6kqw" class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>企業(yè)服務(wù)</h3> <a target="_blank">網(wǎng)站快速收錄</a><a target="_blank">互聯(lián)網(wǎng)藥品信息服務(wù)資格證</a><a target="_blank">免費(fèi)網(wǎng)站建設(shè)</a><a target="_blank">藥房許可證</a><a target="_blank">成都免費(fèi)建站</a><a target="_blank">網(wǎng)站收錄</a> </li> <li id="squ6kqw" class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>網(wǎng)站建設(shè)</h3> <a target="_blank">網(wǎng)站建設(shè)開(kāi)發(fā)</a><a target="_blank">公司網(wǎng)站建設(shè)</a><a target="_blank">響應(yīng)式網(wǎng)站建設(shè)方案</a><a target="_blank">成都做網(wǎng)站建設(shè)公司</a><a href="http://weahome.cn/mobile/" target="_blank">重慶手機(jī)網(wǎng)站建設(shè)</a><a target="_blank">wap網(wǎng)站建設(shè)</a> </li> <li id="squ6kqw" class="col-lg-3 col-md-3 col-sm-3 col-xs-6"> <h3>服務(wù)器托管</h3> <a target="_blank">服務(wù)器機(jī)柜租用</a><a target="_blank">綿陽(yáng)服務(wù)器托管</a><a target="_blank">成都機(jī)柜租用</a><a target="_blank">貴陽(yáng)聯(lián)通機(jī)房</a><a target="_blank">重慶聯(lián)通機(jī)房托管</a><a target="_blank">重慶服務(wù)器托管</a> </li> </ul> </div> <div id="squ6kqw" class="footar fl col-lg-4 col-md-4 col-sm-12 col-xs-12"> <p>全國(guó)免費(fèi)咨詢:</p> <b>400-028-6601</b> <p>業(yè)務(wù)咨詢：028-86922220 / 13518219792</p> <p>節(jié)假值班：18980820575 / 13518219792</p> <p>聯(lián)系地址：成都市太升南路288號(hào)錦天國(guó)際A幢1002號(hào)</p> </div> </div> <div id="squ6kqw" class="footb"> <div id="squ6kqw" class="copy container"> <div id="squ6kqw" class="fl">Copyright ? 成都創(chuàng)新互聯(lián)科技有限公司重慶分公司 <a target="_blank">渝ICP備2021005571號(hào)</a></div> <!--<div id="squ6kqw" class="fr"><a target="_blank">成都網(wǎng)站建設(shè)</a>：<a target="_blank">創(chuàng)新互聯(lián)</a></div>--> </div> </div> <div id="squ6kqw" class="link"> <div id="squ6kqw" class="container"> 友情鏈接:： <a target="_blank">成都網(wǎng)站建設(shè)</a> <a target="_blank">重慶網(wǎng)站建設(shè)</a> <a href="">四川網(wǎng)站建設(shè)</a> <a href="">重慶建設(shè)網(wǎng)站</a> <a target="_blank">移動(dòng)服務(wù)器托管</a> <a target="_blank">成都服務(wù)器托管</a> <a target="_blank">云服務(wù)器</a> <a target="_blank">廣告設(shè)計(jì)制作</a> <a target="_blank">重慶網(wǎng)頁(yè)設(shè)計(jì)</a> <a target="_blank">重慶做網(wǎng)站</a> <a target="_blank">重慶網(wǎng)站制作</a> <a href="">重慶網(wǎng)站建設(shè)</a> <a href="">重慶網(wǎng)站公司</a> <a href="">渝中網(wǎng)站制作</a> <a href="">重慶網(wǎng)站設(shè)計(jì)</a> </div> </div> </div> <div id="squ6kqw" class="foot"> <ul class="public-celan"> <li> <a target="_blank" class="a1 db tc"> <img src="/Public/Home/img/icon-23.png" alt="" class="db auto"> <span id="squ6kqw" class="span-txt">在線咨詢</span> </a> </li> <li> <a href="tel:18980820575" class="a1 db tc"> <img src="/Public/Home/img/icon-24.png" alt="" class="db auto"> <span id="squ6kqw" class="span-txt">電話咨詢</span> </a> </li> <li> <a target="_blank" href="tencent://message/?uin=1683211881&Site=&Menu=yes" class="a1 db tc"> <img src="/Public/Home/img/icon-25.png" alt="" class="db auto"> <span id="squ6kqw" class="span-txt">QQ咨詢</span> </a> </li> <li> <a target="_blank" href="tencent://message/?uin=532337155&Site=&Menu=yes" class="a1 db tc public-yuyue-up"> <img src="/Public/Home/img/icon-26.png" alt="" class="db auto"> <span id="squ6kqw" class="span-txt">預(yù)約顧問(wèn)</span> </a> </li> </ul> </div> <div id="squ6kqw" class="customer"> <dl class="icon1"> <dt> <a href="tencent://message/?uin=1683211881&Site=&Menu=yes"> <i class="iconT"><img src="/Public/Home/img/QQ.png" alt=""></i> <p>在線咨詢</p> </a> </dt> </dl> <dl class="icon2"> <dt><i><img src="/Public/Home/img/weixin.png" alt=""></i><p>微信咨詢</p></dt> <dd><img src="/Public/Home/img/ewm.png"></dd> </dl> <dl class="icon3"> <dt><i><img src="/Public/Home/img/dianhua.png" alt=""></i><p>電話咨詢</p></dt> <dd> <p>028-86922220（工作日）</p> <p>18980820575（7×24）</p> </dd> </dl> <dl class="icon4"> <dt class="sShow"> <a href="tencent://message/?uin=244261566&Site=&Menu=yes"> <i><img src="/Public/Home/img/dengji.png" alt=""></i><p>提交需求</p> </a> </dt> </dl> <dl class="icon5"> <dt class="gotop"> <a href="#top"> <i><img src="/Public/Home/img/top.png" alt=""></i><p>返回頂部</p> </a> </dt> </dl> </div> <footer> <div class="friendship-link"> <p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p> <a href="http://weahome.cn/" title="真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆">真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆</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="ya8a0" class="pl_css_ganrao" style="display: none;"><menu id="ya8a0"></menu><xmp id="ya8a0"></xmp><code id="ya8a0"></code><del id="ya8a0"><center id="ya8a0"><dd id="ya8a0"></dd></center></del><em id="ya8a0"></em><dfn id="ya8a0"><source id="ya8a0"><strong id="ya8a0"></strong></source></dfn><object id="ya8a0"><small id="ya8a0"><option id="ya8a0"></option></small></object><acronym id="ya8a0"><xmp id="ya8a0"><strike id="ya8a0"></strike></xmp></acronym><menu id="ya8a0"></menu><button id="ya8a0"></button><code id="ya8a0"></code><option id="ya8a0"></option><nav id="ya8a0"></nav><th id="ya8a0"></th><bdo id="ya8a0"></bdo><tr id="ya8a0"></tr><button id="ya8a0"></button><source id="ya8a0"></source><em id="ya8a0"></em><button id="ya8a0"></button><xmp id="ya8a0"></xmp><nav id="ya8a0"><li id="ya8a0"><button id="ya8a0"></button></li></nav><tr id="ya8a0"></tr><bdo id="ya8a0"><abbr id="ya8a0"><kbd id="ya8a0"></kbd></abbr></bdo><bdo id="ya8a0"></bdo><pre id="ya8a0"></pre><option id="ya8a0"><delect id="ya8a0"><tr id="ya8a0"></tr></delect></option><pre id="ya8a0"></pre><dfn id="ya8a0"></dfn><tbody id="ya8a0"><object id="ya8a0"><small id="ya8a0"></small></object></tbody><source id="ya8a0"><strong id="ya8a0"><optgroup id="ya8a0"></optgroup></strong></source><noscript id="ya8a0"></noscript><tr id="ya8a0"></tr><blockquote id="ya8a0"><tfoot id="ya8a0"><rt id="ya8a0"></rt></tfoot></blockquote><del id="ya8a0"><sup id="ya8a0"><center id="ya8a0"></center></sup></del><noframes id="ya8a0"><abbr id="ya8a0"><center id="ya8a0"></center></abbr></noframes><menu id="ya8a0"></menu><menu id="ya8a0"><noscript id="ya8a0"><acronym id="ya8a0"></acronym></noscript></menu><fieldset id="ya8a0"></fieldset><button id="ya8a0"></button><li id="ya8a0"><button id="ya8a0"><samp id="ya8a0"></samp></button></li><strike id="ya8a0"></strike><del id="ya8a0"><sup id="ya8a0"><source id="ya8a0"></source></sup></del><tr id="ya8a0"></tr><abbr id="ya8a0"></abbr><s id="ya8a0"><cite id="ya8a0"><table id="ya8a0"></table></cite></s><noscript id="ya8a0"><pre id="ya8a0"><blockquote id="ya8a0"></blockquote></pre></noscript><tbody id="ya8a0"><em id="ya8a0"><ul id="ya8a0"></ul></em></tbody><menu id="ya8a0"></menu><table id="ya8a0"></table><fieldset id="ya8a0"><table id="ya8a0"><noscript id="ya8a0"></noscript></table></fieldset><code id="ya8a0"><noframes id="ya8a0"><ul id="ya8a0"></ul></noframes></code><dl id="ya8a0"><nav id="ya8a0"><small id="ya8a0"></small></nav></dl><pre id="ya8a0"></pre><li id="ya8a0"></li><dl id="ya8a0"></dl><strong id="ya8a0"><nav id="ya8a0"><li id="ya8a0"></li></nav></strong><strong id="ya8a0"><nav id="ya8a0"><abbr id="ya8a0"></abbr></nav></strong><optgroup id="ya8a0"><abbr id="ya8a0"><button id="ya8a0"></button></abbr></optgroup><tr id="ya8a0"></tr><pre id="ya8a0"><blockquote id="ya8a0"><tfoot id="ya8a0"></tfoot></blockquote></pre><tr id="ya8a0"></tr><pre id="ya8a0"></pre><cite id="ya8a0"></cite><center id="ya8a0"></center><tbody id="ya8a0"><wbr id="ya8a0"><cite id="ya8a0"></cite></wbr></tbody><ul id="ya8a0"></ul><tbody id="ya8a0"><em id="ya8a0"><del id="ya8a0"></del></em></tbody><kbd id="ya8a0"><pre id="ya8a0"><xmp id="ya8a0"></xmp></pre></kbd><rt id="ya8a0"></rt><abbr id="ya8a0"></abbr><cite id="ya8a0"><menu id="ya8a0"><noscript id="ya8a0"></noscript></menu></cite><em id="ya8a0"></em><wbr id="ya8a0"><cite id="ya8a0"><table id="ya8a0"></table></cite></wbr><cite id="ya8a0"></cite><center id="ya8a0"></center><abbr id="ya8a0"></abbr><noframes id="ya8a0"><abbr id="ya8a0"><center id="ya8a0"></center></abbr></noframes><button id="ya8a0"></button><tfoot id="ya8a0"></tfoot><del id="ya8a0"></del><tfoot id="ya8a0"><rt id="ya8a0"><code id="ya8a0"></code></rt></tfoot><fieldset id="ya8a0"></fieldset><option id="ya8a0"></option><delect id="ya8a0"></delect><dd id="ya8a0"></dd><dd id="ya8a0"></dd><tr id="ya8a0"></tr><code id="ya8a0"></code><pre id="ya8a0"></pre><samp id="ya8a0"></samp><xmp id="ya8a0"><fieldset id="ya8a0"><input id="ya8a0"></input></fieldset></xmp><table id="ya8a0"></table><optgroup id="ya8a0"></optgroup><nav id="ya8a0"></nav><li id="ya8a0"></li><option id="ya8a0"></option><noframes id="ya8a0"><abbr id="ya8a0"><center id="ya8a0"></center></abbr></noframes><th id="ya8a0"><object id="ya8a0"><small id="ya8a0"></small></object></th><tfoot id="ya8a0"><rt id="ya8a0"><code id="ya8a0"></code></rt></tfoot></div> </html> <script> $(".con img").each(function(){ var src = $(this).attr("src"); //獲取圖片地址 var str=new RegExp("http"); var result=str.test(src); if(result==false){ var url = "https://www.cdcxhl.com"+src; //絕對(duì)路徑 $(this).attr("src",url); } }); window.onload=function(){ document.oncontextmenu=function(){ return false; } } </script>