Web聊天工具的富文本输入框

摘要：由于我们的富文本输入框比较简单，所以只需要处理两类数据即可，其一是普通的文本类型数据，包括表情其二则是图片类型数据。

最近折腾 Websocket，打算开发一个聊天室应用练练手。在应用开发的过程中发现可以插入 emoji ，粘贴图片的富文本输入框其实蕴含着许多有趣的知识，于是便打算记录下来和大家分享。

仓库地址：chat-input-box
预览地址：https://codepen.io/jrainlau/p...

首先来看看 demo 效果：

是不是觉得很神奇？接下来我会一步步讲解这里面的功能都是如何实现的。

传统的输入框都是使用 </b> 来制作的，它的优势是非常简单，但最大的缺陷却是无法展示图片。为了能够让输入框能够展示图片（富文本化），我们可以采用设置了 <b>contenteditable="true"</b> 属性的 <b><div></b> 来实现这里面的功能。</p> <p>简单创建一个 <b>index.html</b> 文件，然后写入如下内容：</p> <pre><div 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> 事件里面监听到。</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>细心的读者会发现，如果直接在控制台点开 <b>DataTransferItemList</b> 前的小箭头，会发现对象的 <b>length</b> 属性为0。说好的剪贴板内容呢？其实这是 Chrome 调试的一个小坑。在开发者工具里面，<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>回到浏览器，如果我们复制一张图片并在输入框中执行粘贴的动作，将可以在控制台看到打印出了以 <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> 对象。如果在页面中选中一些文字，然后在控制台执行 <b>window.getSelection().toString()</b>，就会看到输出是你所选择的那部分文字。</p> <p>与这部分区域文字相对应的，是一个 <b>range</b> 对象，使用 <b>window.getSelection().getRangeAt(0)</b> 即可以访问它。<b>range</b> 不仅包含了选中区域文字的内容，还包括了区域的起点位置 <b>startOffset</b> 和终点位置 <b>endOffset</b>。</p> <p>我们也可以通过 <b>document.createRange()</b> 的办法手动创建一个 <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）状态。而当我们从表情面板里选择 emoji 表情的时候，输入框会先失焦(blur），然后再重新聚焦。由于 <b>document.execCommand</b> 方法必须在输入框聚焦状态下才能触发，所以对于处理 emoji 插入来说就无法使用了。</p> <p>上一小节讲过，<b>Selection</b> 可以让我们拿到聚焦状态下所选文本的起点位置 <b>startOffset</b> 和终点位置 <b>endOffset</b>，如果没有选择文本而仅仅处于聚焦状态，那么这两个位置的值相等（相当于选择文本为空），也就是光标的位置。只要我们能够在失焦前记录下这个位置，那么就能够通过 <b>range</b> 把 emoji 插入正确的地方了。</p> <p>首先编写两个工具方法。新建一个 <b>cursorPosition.js</b> 文件：</p> <pre> /** * 获取光标位置 * @param {DOMElement} element 输入框的dom节点 * @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节点 * @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 节点里面使用了。首先在节点的 <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 占两个字节大小，所以要加1） cursorPosition = getCursorPosition(editor) + 1 // emoji 占两位 }</pre> <b>尾声</b> <p>文章涉及的代码已经上传到仓库，为了简便起见采用 <b>VueJS</b> 处理了一下，不影响阅读。最后想说的是，这个 Demo 仅仅完成了输入框最基础的部分，关于复制粘贴还有很多细节要处理（比如把别处的行内样式也复制了进来等等），在这里就不一一展开了，感兴趣的读者可以自行研究，更欢迎和我留言交流~</p> </div> <div class="mt-64 tags-seach" > <div class="tags-info"> <a style="width:120px;" title="GPU云服务器" href="https://www.ucloud.cn/site/product/gpu.html">GPU云服务器</a> <a style="width:120px;" title="云服务器" href="https://www.ucloud.cn/site/active/kuaijiesale.html?ytag=seo">云服务器</a> <a style="width:120px;" title="文本输入框" href="https://www.ucloud.cn/yun/tag/wenbenshurukuang/">文本输入框</a> <a style="width:120px;" title="文本框输入数字" href="https://www.ucloud.cn/yun/tag/wenbenkuangshurushuzi/">文本框输入数字</a> <a style="width:120px;" title="文本框输入限制" href="https://www.ucloud.cn/yun/tag/wenbenkuangshuruxianzhi/">文本框输入限制</a> <a style="width:120px;" title="手机文本输入框设计" href="https://www.ucloud.cn/yun/tag/shoujiwenbenshurukuangsheji/">手机文本输入框设计</a> </div> </div> <div class="entry-copyright mb-30"> <p class="mb-15"> 文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。</p> <p>转载请注明本文地址：https://www.ucloud.cn/yun/102311.html</p> </div> <ul class="pre-next-page"> <li class="ellipsis"><a class="hpf" href="https://www.ucloud.cn/yun/102310.html">上一篇：衣食父母-浏览器</a></li> <li class="ellipsis"><a class="hpf" href="https://www.ucloud.cn/yun/102312.html">下一篇：设计模式——观察者模式</a></li> </ul> </div> <div 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 class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/41986.html"><b>selenuim操作基于REACT实现<em>的富</em><em>文本</em>编辑器1</b></a></h2> <p class="ellipsis2 good">摘要：中大多数的输入框都是标签，但是由于业务中前端有使用到基于实现的富文本编辑器，在实现自动化测试编写时自然会涉及到对富文本器进行操作处理检查该编辑器的元素，可以看到和正常的不同，该结构为一个里面裹了个而在其中输入文字，则是在改变中的如果有换行的 web中大多数的输入框都是标签，但是由于业务中前端有使用到基于REACT实现的富文本编辑器，在实现自动化测试编写时自然会涉及到对富文本器进行操作处...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-337.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/03/small_000000337.jpg" alt=""><span 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 class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/98577.html"><b>javascript功能插件大集合 前端常用插件 js常用插件</b></a></h2> <p class="ellipsis2 good">摘要：转载来源包管理器管理着库，并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。 转载来源：https://github.com/jobbole/aw... 包管理器管理着 javascript 库，并提供读取和打包它们的工具。•npm – npm 是 javasc...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-529.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/05/small_000000529.jpg" alt=""><span 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 class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/53105.html"><b>javascript功能插件大集合 前端常用插件 js常用插件</b></a></h2> <p class="ellipsis2 good">摘要：转载来源包管理器管理着库，并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。 转载来源：https://github.com/jobbole/aw... 包管理器管理着 javascript 库，并提供读取和打包它们的工具。•npm – npm 是 javasc...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-906.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/09/small_000000906.jpg" alt=""><span 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 class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/80211.html"><b>javascript功能插件大集合，写前端的亲们记得收藏</b></a></h2> <p class="ellipsis2 good">摘要：一个专注于浏览器端和兼容的包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。完全插件化的工具，能在中识别和记录模式。健壮的优雅且功能丰富的模板引擎。完整的经过充分测试和记录数据结构的库。 【导读】：GitHub 上有一个 Awesome – XXX 系列的资源整理。awesome-javascript 是 sorrycc 发起维护的 JS 资源列表...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-1306.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/13/small_000001306.jpg" alt=""><span 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 class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/104130.html"><b>JavaScript 资源大全中文版</b></a></h2> <p class="ellipsis2 good">摘要：官网全新的静态包管理器。官网一个整合和官网的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。官网小巧的兼容的所见即所得的富文本编辑器。官网富文本编辑器。官网由制作，适用于每天写作的富文本编辑器。 1. 包管理器 管理着 javascript 库，并提供读取和打包它们的工具。 npm：npm 是 javascript 的包管理器。官网 cnpm：cnpm 是 由于国...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-1077.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/10/small_000001077.jpg" alt=""><span 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 class="topicone-box-wangeditor"> <h3 class="top-com-title mb-64"><span>发表评论</span></h3> <div class="xcp-publish-main flex_box_zd"> <div class="unlogin-pinglun-box"> <a href="javascript:login()" class="grad">登陆后可评论</a> </div> </div> </div> <div class="site-box-content"> <div class="site-content-title"> <h3 class="top-com-title mb-64"><span>0条评论</span></h3> </div> <div class="pages"></ul></div> </div> </div> <div class="layui-col-md4 layui-col-lg3 com_white-right site-wrap-right"> <div class=""> <div class="com_layuiright-box user-msgbox"> <a href="https://www.ucloud.cn/yun/u-1196.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/11/small_000001196.jpg" alt=""></a> <h3><a href="https://www.ucloud.cn/yun/u-1196.html" rel="nofollow">iKcamp</a></h3> <h6>男<span>|</span>高级讲师</h6> <div 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="发私信" >我要私信</a> </div> <div class="user-msgbox-list flex_box_zd"> <h3 class="hpf">TA的文章</h3> <a href="https://www.ucloud.cn/yun/ut-1196.html" class="box_hxjz">阅读更多</a> </div> <ul class="user-msgbox-ul"> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/130983.html">在tensorflow</a></h3> <p>阅读 934<span>·</span>2023-04-26 02:49</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/124962.html">NGINX_ I/O 模型</a></h3> <p>阅读 1151<span>·</span>2021-11-25 09:43</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/123690.html">ASEMI超快恢复二极管MUR2060AC在高频设备中的应用</a></h3> <p>阅读 2523<span>·</span>2021-11-18 10:02</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/122630.html">virtono：新增美国洛杉矶/纽约/西班牙马德里/法国巴黎/瑞典机房，1核/512M内存/15G </a></h3> <p>阅读 2873<span>·</span>2021-10-18 13:32</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/115618.html">Vue学习日记（三）——Vue路由管理vue-router</a></h3> <p>阅读 1249<span>·</span>2019-08-30 13:54</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/115205.html">前端面试知识点集锦</a></h3> <p>阅读 2058<span>·</span>2019-08-30 12:58</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/112922.html">个人常用的软件-前端</a></h3> <p>阅读 2970<span>·</span>2019-08-29 14:06</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/111068.html">浏览器 CSS Hack 收集</a></h3> <p>阅读 2124<span>·</span>2019-08-28 18:10</p></li> </ul> </div> <!-- 文章详情右侧广告--> <div class="com_layuiright-box"> <h6 class="top-com-title"><span>最新活动</span></h6> <div class="com_adbox"> <div class="layui-carousel" id="right-item"> <div carousel-item> <div> <a href="https://www.ucloud.cn/site/active/kuaijiesale.html?ytag=seo" rel="nofollow"> <img src="https://www.ucloud.cn/yun/data/attach/240625/2rTjEHmi.png" alt="云服务器"> </a> </div> <div> <a href="https://www.ucloud.cn/site/product/gpu.html" rel="nofollow"> <img src="https://www.ucloud.cn/yun/data/attach/240807/7NjZjdrd.png" alt="GPU云服务器"> </a> </div> </div> </div> </div> <!-- banner结束 --> <div class="adhtml"> </div> <script> $(function(){ $.ajax({ type: "GET", url:"https://www.ucloud.cn/yun/ad/getad/1.html", cache: false, success: function(text){ $(".adhtml").html(text); } }); }) </script> </div> </div> </div> </div> </div> </section> <!-- wap拉出按钮 --> <div class="site-tree-mobile layui-hide"> <i class="layui-icon layui-icon-spread-left"></i> </div> <!-- wap遮罩层 --> <div class="site-mobile-shade"></div> <!--付费阅读 --> <div id="payread"> <div class="layui-form-item">阅读需要支付1元查看</div> <div 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="https://www.ucloud.cn/yun/static/js/neweditor/code/styles/tomorrow-night-eighties.css"> <script src="https://www.ucloud.cn/yun/static/js/neweditor/code/highlight.pack.js" type="text/javascript"></script> <script src="https://www.ucloud.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:"https://www.ucloud.cn/yun/index.php?topic/ajaxhassupport/" + tid, cache: false, success: function(hassupport){ if (hassupport != '1'){ $.ajax({ type: "GET", cache:false, url: "https://www.ucloud.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:"https://www.ucloud.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) } } , //调用执行后调用的函数 complete: function(XMLHttpRequest, textStatus){ postadopt=true; }, //调用出错执行的函数 error: function(){ //请求出错处理 postadopt=false; } }); } </script> <footer> <div class="layui-container"> <div class="flex_box_zd"> <div class="left-footer"> <h6><a href="https://www.ucloud.cn/"><img src="https://www.ucloud.cn/yun/static/theme/ukd//images/logo.png" alt="UCloud （优刻得科技股份有限公司）"></a></h6> <p>UCloud （优刻得科技股份有限公司）是中立、安全的云计算服务平台，坚持中立，不涉足客户业务领域。公司自主研发IaaS、PaaS、大数据流通平台、AI服务平台等一系列云计算产品，并深入了解互联网、传统企业在不同场景下的业务需求，提供公有云、混合云、私有云、专有云在内的综合性行业解决方案。</p> </div> <div class="right-footer layui-hidemd"> <ul class="flex_box_zd"> <li> <h6>UCloud与云服务</h6> <p><a href="https://www.ucloud.cn/site/about/intro/">公司介绍</a></p> <p><a href="https://zhaopin.ucloud.cn/" >加入我们</a></p> <p><a href="https://www.ucloud.cn/site/ucan/onlineclass/">UCan线上公开课</a></p> <p><a href="https://www.ucloud.cn/site/solutions.html" >行业解决方案</a></p> <p><a href="https://www.ucloud.cn/site/pro-notice/">产品动态</a></p> </li> <li> <h6>友情链接</h6> <p><a href="https://www.compshare.cn/?ytag=seo">GPU算力平台</a></p> <p><a href="https://www.ucloudstack.com/?ytag=seo">UCloud私有云</a></p> <p><a href="https://www.surfercloud.com/">SurferCloud</a></p> <p><a href="https://www.uwin-link.com/">工厂仿真软件</a></p> <p><a href="https://pinex.it/">Pinex</a></p> <p><a href="https://www.picpik.ai/zh">AI绘画</a></p> </li> <li> <h6>社区栏目</h6> <p><a href="https://www.ucloud.cn/yun/column/index.html">专栏文章</a></p> <p><a href="https://www.ucloud.cn/yun/udata/">专题地图</a></p> </li> <li> <h6>常见问题</h6> <p><a href="https://www.ucloud.cn/site/ucsafe/notice.html" >安全中心</a></p> <p><a href="https://www.ucloud.cn/site/about/news/recent/" >新闻动态</a></p> <p><a href="https://www.ucloud.cn/site/about/news/report/">媒体动态</a></p> <p><a href="https://www.ucloud.cn/site/cases.html">客户案例</a></p> <p><a href="https://www.ucloud.cn/site/notice/">公告</a></p> </li> <li> <span><img src="https://static.ucloud.cn/7a4b6983f4b94bcb97380adc5d073865.png" alt="优刻得"></span> <p>扫扫了解更多</p></div> </div> <div class="copyright">Copyright © 2012-2023 UCloud 优刻得科技股份有限公司<i>｜</i><a rel="nofollow" href="http://beian.miit.gov.cn/">沪公网安备 31011002000058号</a><i>｜</i><a rel="nofollow" href="http://beian.miit.gov.cn/"></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.baidu.com/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> </body> <script src="https://www.ucloud.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>