"):'
['.concat(e[0],"] ").concat(e[1],": ").concat(e[2],"")}));return e.length?"
引用链接
").concat(e.join("\n"),"
"):""},this.buildAddition=function(){return"\n \n "},this.setOptions=function(e){o.opts=a(o.opts,e)},this.hasFootnotes=function(){return 0!==n.length},this.getRenderer=function(e){n=[],r=0,i=o.buildTheme(o.opts.theme);var t=new f["Renderer"];return t.heading=function(e,t){switch(t){case 1:return"").concat(e,"
");case 2:return"").concat(e,"
");case 3:return"").concat(e,"
");default:return"").concat(e,"
")}},t.paragraph=function(e){return-1!=e.indexOf("")),"
").concat(e,"")},t.code=function(e,t){return t=g.a.getLanguage(t)?t:"plaintext",e=g.a.highlight(e,{language:t}).value,e=e.replace(/\r\n/g,"
").replace(/\n/g,"
").replace(/(>[^<]+)|(^[^<]+)/g,(function(e){return e.replace(/\s/g," ")})),'
").concat(e,"").concat(e,"")},t.listitem=function(e){return"<%s/>').concat(e,"")},t.list=function(e,t,o){e=e.replace(/<\/*p.*?>/g,"");var n=e.split("<%s/>");if(!t)return e=n.join("•"),"").concat(e,"
");e=n[0];for(var r=1;r")},t}},b=h,C=o("56b3"),v=o.n(C),O='# 示例文章：Google 搜索的即时自动补全功能究竟是如何“工作”的？\r\n\r\n> Google 搜索**自动补全功能**的强大，相信不少朋友都能感受到，它帮助我们更快地“补全”我们所要输入的搜索关键字。那么，它怎么知道我们要输入什么内容？它又是如何工作的？在这篇文章里，我们一起来看看。\r\n\r\n## 使用自动补全\r\n\r\nGoogle 搜索的自动补全功能可以在 Google 搜索应用的大多数位置使用，包括 [Google](https://www.google.com/) 主页、适用于 IOS 和 Android 的 Google 应用，我们只需要在 Google 搜索框上开始键入关键字，就可以看到联想词了。\r\n\r\n\r\n\r\n在上图示例中，我们可以看到，输入关键字 `juej`，Google 搜索会联想到“掘金”、“掘金小册”、“绝句”等等，好处就是，我们无须输入完整的关键字即可轻松完成针对这些 topics 的搜索。\r\n\r\n谷歌搜索的自动补全功能对于使用移动设备的用户来说特别有用，用户可以轻松在难以键入的小屏幕上完成搜索。当然，对于移动设备用户和台式机用户而言，这都节省了大量的时间。根据 Google 官方报告，自动补全功能可以减少大约 25% 的打字，累积起来，预计每天可以节省 200 多年的打字时间。是的，每天！\r\n\r\n> 注意，本文所提到的“**联想词**”与“**预测**”，是同一个意思。\r\n\r\n## 基于“预测”而非“建议”\r\n\r\nGoogle 官方将自动补全功能称之为“预测”，而不是“建议”，为什么呢？其实是有充分理由的。自动补全功能是为了**帮助用户完成他们打算进行的搜索**，而不是建议用户要执行什么搜索。\r\n\r\n那么，Google 是如何确定这些“预测”的？其实，Google 会根据趋势搜索 [trends](https://trends.google.com/trends/?geo=US) 给到我们这些“预测”。简单来说，哪个热门、哪个搜索频率高，就更可能推给我们。当然，这也与我们当前所处的位置以及我们的搜索历史相关。\r\n\r\n另外，这些“预测”也会随着我们键入的关键字的变更而更改。例如，当我们把键入的关键字从 `juej` 更改为 `juex` 时，与“掘金”相关的预测会“消失”，同时，与“觉醒”、“决心”相关联的词会出现。\r\n\r\n\r\n\r\n## 为什么看不到某些联想词？\r\n\r\n如果我们在输入某个关键字时看不到联想词，那么表明 Google 的算法可能检测到：\r\n\r\n- 这个关键字不是热门字词；\r\n- 搜索的字词太新了，我们可能需要等待几天或几周才能看到联想词；\r\n- 这是一个侮辱性或敏感字词，这个搜索字词违反了 Google 的相关政策。更加详细的情况，可以了解 [Google 搜索自动补全政策](https://support.google.com/websearch/answer/7368877)。\r\n\r\n## 为什么会看到某些不当的联想词？\r\n\r\nGoogle 拥有专门设计的系统，可以自动捕获不适当的预测结果而不显示出来。然而，Google 每天需要处理数十亿次搜索，这意味着 Google 每天会显示数十亿甚至上百亿条预测。再好的系统，也可能存在缺陷，不正确的预测也可能随时会出现。\r\n\r\n我们作为 Google 搜索的用户，如果认定某条预测违反了相关的搜索自动补全政策，可以进行举报反馈，点击右下角“**举报不当的联想查询**”并勾选相关选项即可。\r\n\r\n\r\n\r\n## 如何实现自动补全算法？\r\n\r\n目前，Google 官方似乎并没有公开搜索自动补全的算法实现，但是业界在这方面已经有了不少研究。\r\n\r\n一个好的自动补全器必须是快速的，并且在用户键入下一个字符后立即更新联想词列表。**自动补全器的核心是一个函数，它接受输入的前缀，并搜索以给定前缀开头的词汇或语句列表**。通常来说，只需要返回少量的数目即可。\r\n\r\n接下来，我们先从一个简单且低效的实现开始，并在此基础上逐步构建更高效的方法。\r\n\r\n### 词汇表实现\r\n\r\n一个**简单粗暴的实现方式**是：顺序查找词汇表，依次检查每个词汇，看它是否以给定的前缀开头。\r\n\r\n但是，此方法需要将前缀与每个词汇进行匹配检查，若词汇量较少，这种方式可能勉强行得通。但是，如果词汇量规模较大，效率就太低了。\r\n\r\n一个**更好的实现方式是**：让词汇按字典顺序排序。借助二分搜索算法，可以快速搜索有序词汇表中的前缀。由于二分搜索的每一步都会将搜索的范围减半，因此，总的搜索时间与词汇表中单词数量的对数成正比，即时间复杂度是 `O(log N)`。二分搜索的性能很好，但有没有更好的实现呢？当然有，往下看。\r\n\r\n### 前缀树实现\r\n\r\n通常来说，许多词汇都以相同的前缀开头，比如 `need`、`nested` 都以 `ne` 开头，`seed`、`speed` 都以 `s` 开头。要是为每个单词分别存储公共前缀似乎很浪费。\r\n\r\n\r\n\r\n前缀树是一种利用公共前缀来加速补全速度的数据结构。前缀树在节点树中排列一组单词，单词沿着从根节点到叶子节点的路径存储，树的层次对应于前缀的字母位置。\r\n\r\n前缀的补全是顺着前缀定义的路径来查找的。例如，在上图的前缀树中，前缀 `ne` 对应于从子节点取左边缘 `N` 和唯一边缘 `E` 的路径。然后可以通过继续遍历从 `E` 节点可以达到的所有叶节点来生成补全列表。在图中，`ne` 的补全可以是两个分支：`-ed` 和 `-sted`。如果在数中找不到由前缀定义的路径，则说明词汇表中不包含以该前缀开头的单词。\r\n\r\n### 有限状态自动机(DFA)实现\r\n\r\n前缀树可以有效处理公共前缀，但是，对于其他共享词部分，仍会分别存储在每个分支中。比如，后缀 `ed`、`ing`、`tion` 在英文单词中特别常见。在上一个例子中，`e`、`d` 分别存放在了每一个分支上。\r\n\r\n有没有一种方法可以更加节省存储空间呢？有的，那就是 DFA。\r\n\r\n
\r\n'.concat(t,"
")]);function r(e){switch(!0){case t(e):case o(e):case n(e):e.setAttribute("style",N(e));default:}function t(e){return"PRE"===e.tagName&&Array.from(e.classList).includes("code__pre")}function o(e){return"CODE"===e.tagName&&Array.from(e.classList).includes("prettyprint")}function n(e){return"SPAN"===e.tagName&&(o(e.parentElement)||o(e.parentElement.parentElement))}e.children.length&&Array.from(e.children).forEach((function(e){return r(e)}))}o.href=URL.createObjectURL(n),document.body.appendChild(o),o.click(),document.body.removeChild(o)}function F(e){for(var t=e.data,o=e.rows,n=e.cols,r="",i=[],a=0;a[${x[0]}]: ${x[1]}`;\n }\n return `
[${x[0]}] ${x[1]}: ${x[2]}`;\n });\n if (!footnoteArray.length) {\n return \"\";\n }\n return `
引用链接
${footnoteArray.join(\"\\n\")}
`;\n };\n\n this.buildAddition = () => {\n return `\n \n `;\n };\n\n this.setOptions = (newOpts) => {\n this.opts = merge(this.opts, newOpts);\n };\n\n this.hasFootnotes = () => footnotes.length !== 0;\n\n this.getRenderer = (status) => {\n footnotes = [];\n footnoteIndex = 0;\n\n styleMapping = this.buildTheme(this.opts.theme);\n let renderer = new Renderer();\n\n renderer.heading = (text, level) => {\n switch (level) {\n case 1:\n return `${text}
`;\n case 2:\n return `${text}
`;\n case 3:\n return `${text}
`;\n default:\n return `${text}
`;\n }\n };\n renderer.paragraph = (text) => {\n if (text.indexOf(\"`);\n return `
${text}`;\n };\n renderer.code = (text, lang) => {\n lang = hljs.getLanguage(lang) ? lang : 'plaintext';\n\n text = hljs.highlight(text, {language: lang}).value;\n\n text = text.replace(/\\r\\n/g,\"
\")\n .replace(/\\n/g,\"
\")\n .replace(/(>[^<]+)|(^[^<]+)/g, function(str) {\n return str.replace(/\\s/g, ' ')\n });\n\n return `
${text}${text}`;\n renderer.listitem = (text) =>\n `<%s/>${text}`;\n\n renderer.list = (text, ordered, start) => {\n text = text.replace(/<\\/*p.*?>/g, \"\");\n let segments = text.split(`<%s/>`);\n if (!ordered) {\n text = segments.join(\"•\");\n return `${text}
`;\n }\n text = segments[0];\n for (let i = 1; i < segments.length; i++) {\n text = text + i + \".\" + segments[i];\n }\n return `${text}
`;\n };\n renderer.image = (href, title, text) => {\n let subText = \"\";\n if (text) {\n subText = ``;\n return renderer;\n };\n }\n}\nexport default WxRenderer;\n","export default \"# 示例文章：Google 搜索的即时自动补全功能究竟是如何“工作”的？\\r\\n\\r\\n> Google 搜索**自动补全功能**的强大，相信不少朋友都能感受到，它帮助我们更快地“补全”我们所要输入的搜索关键字。那么，它怎么知道我们要输入什么内容？它又是如何工作的？在这篇文章里，我们一起来看看。\\r\\n\\r\\n## 使用自动补全\\r\\n\\r\\nGoogle 搜索的自动补全功能可以在 Google 搜索应用的大多数位置使用，包括 [Google](https://www.google.com/) 主页、适用于 IOS 和 Android 的 Google 应用，我们只需要在 Google 搜索框上开始键入关键字，就可以看到联想词了。\\r\\n\\r\\n\\r\\n\\r\\n在上图示例中，我们可以看到，输入关键字 `juej`，Google 搜索会联想到“掘金”、“掘金小册”、“绝句”等等，好处就是，我们无须输入完整的关键字即可轻松完成针对这些 topics 的搜索。\\r\\n\\r\\n谷歌搜索的自动补全功能对于使用移动设备的用户来说特别有用，用户可以轻松在难以键入的小屏幕上完成搜索。当然，对于移动设备用户和台式机用户而言，这都节省了大量的时间。根据 Google 官方报告，自动补全功能可以减少大约 25% 的打字，累积起来，预计每天可以节省 200 多年的打字时间。是的，每天！\\r\\n\\r\\n> 注意，本文所提到的“**联想词**”与“**预测**”，是同一个意思。\\r\\n\\r\\n## 基于“预测”而非“建议”\\r\\n\\r\\nGoogle 官方将自动补全功能称之为“预测”，而不是“建议”，为什么呢？其实是有充分理由的。自动补全功能是为了**帮助用户完成他们打算进行的搜索**，而不是建议用户要执行什么搜索。\\r\\n\\r\\n那么，Google 是如何确定这些“预测”的？其实，Google 会根据趋势搜索 [trends](https://trends.google.com/trends/?geo=US) 给到我们这些“预测”。简单来说，哪个热门、哪个搜索频率高，就更可能推给我们。当然，这也与我们当前所处的位置以及我们的搜索历史相关。\\r\\n\\r\\n另外，这些“预测”也会随着我们键入的关键字的变更而更改。例如，当我们把键入的关键字从 `juej` 更改为 `juex` 时，与“掘金”相关的预测会“消失”，同时，与“觉醒”、“决心”相关联的词会出现。\\r\\n\\r\\n\\r\\n\\r\\n## 为什么看不到某些联想词？\\r\\n\\r\\n如果我们在输入某个关键字时看不到联想词，那么表明 Google 的算法可能检测到：\\r\\n\\r\\n- 这个关键字不是热门字词；\\r\\n- 搜索的字词太新了，我们可能需要等待几天或几周才能看到联想词；\\r\\n- 这是一个侮辱性或敏感字词，这个搜索字词违反了 Google 的相关政策。更加详细的情况，可以了解 [Google 搜索自动补全政策](https://support.google.com/websearch/answer/7368877)。\\r\\n\\r\\n## 为什么会看到某些不当的联想词？\\r\\n\\r\\nGoogle 拥有专门设计的系统，可以自动捕获不适当的预测结果而不显示出来。然而，Google 每天需要处理数十亿次搜索，这意味着 Google 每天会显示数十亿甚至上百亿条预测。再好的系统，也可能存在缺陷，不正确的预测也可能随时会出现。\\r\\n\\r\\n我们作为 Google 搜索的用户，如果认定某条预测违反了相关的搜索自动补全政策，可以进行举报反馈，点击右下角“**举报不当的联想查询**”并勾选相关选项即可。\\r\\n\\r\\n\\r\\n\\r\\n## 如何实现自动补全算法？\\r\\n\\r\\n目前，Google 官方似乎并没有公开搜索自动补全的算法实现，但是业界在这方面已经有了不少研究。\\r\\n\\r\\n一个好的自动补全器必须是快速的，并且在用户键入下一个字符后立即更新联想词列表。**自动补全器的核心是一个函数，它接受输入的前缀，并搜索以给定前缀开头的词汇或语句列表**。通常来说，只需要返回少量的数目即可。\\r\\n\\r\\n接下来，我们先从一个简单且低效的实现开始，并在此基础上逐步构建更高效的方法。\\r\\n\\r\\n### 词汇表实现\\r\\n\\r\\n一个**简单粗暴的实现方式**是：顺序查找词汇表，依次检查每个词汇，看它是否以给定的前缀开头。\\r\\n\\r\\n但是，此方法需要将前缀与每个词汇进行匹配检查，若词汇量较少，这种方式可能勉强行得通。但是，如果词汇量规模较大，效率就太低了。\\r\\n\\r\\n一个**更好的实现方式是**：让词汇按字典顺序排序。借助二分搜索算法，可以快速搜索有序词汇表中的前缀。由于二分搜索的每一步都会将搜索的范围减半，因此，总的搜索时间与词汇表中单词数量的对数成正比，即时间复杂度是 `O(log N)`。二分搜索的性能很好，但有没有更好的实现呢？当然有，往下看。\\r\\n\\r\\n### 前缀树实现\\r\\n\\r\\n通常来说，许多词汇都以相同的前缀开头，比如 `need`、`nested` 都以 `ne` 开头，`seed`、`speed` 都以 `s` 开头。要是为每个单词分别存储公共前缀似乎很浪费。\\r\\n\\r\\n\\r\\n\\r\\n前缀树是一种利用公共前缀来加速补全速度的数据结构。前缀树在节点树中排列一组单词，单词沿着从根节点到叶子节点的路径存储，树的层次对应于前缀的字母位置。\\r\\n\\r\\n前缀的补全是顺着前缀定义的路径来查找的。例如，在上图的前缀树中，前缀 `ne` 对应于从子节点取左边缘 `N` 和唯一边缘 `E` 的路径。然后可以通过继续遍历从 `E` 节点可以达到的所有叶节点来生成补全列表。在图中，`ne` 的补全可以是两个分支：`-ed` 和 `-sted`。如果在数中找不到由前缀定义的路径，则说明词汇表中不包含以该前缀开头的单词。\\r\\n\\r\\n### 有限状态自动机(DFA)实现\\r\\n\\r\\n前缀树可以有效处理公共前缀，但是，对于其他共享词部分，仍会分别存储在每个分支中。比如，后缀 `ed`、`ing`、`tion` 在英文单词中特别常见。在上一个例子中，`e`、`d` 分别存放在了每一个分支上。\\r\\n\\r\\n有没有一种方法可以更加节省存储空间呢？有的，那就是 DFA。\\r\\n\\r\\n
![](\\\"https://gitee.com/yanglbme/resource/raw/master/doocs-md/dfa.gif\\\")
![](\\\"https://gitee.com/yanglbme/resource/raw/master/doocs-md/qrcode.png\\\")
\\r\\n${htmlStr}
`,\n ]);\n\n downLink.href = URL.createObjectURL(blob);\n document.body.appendChild(downLink);\n downLink.click();\n document.body.removeChild(downLink);\n\n function setStyles(element) {\n switch (true) {\n case isPre(element):\n case isCode(element):\n case isSpan(element):\n element.setAttribute(\"style\", getElementStyles(element));\n default:\n }\n if (element.children.length) {\n Array.from(element.children).forEach((child) => setStyles(child));\n }\n\n // 判断是否是包裹代码块的 pre 元素\n function isPre(element) {\n return (\n element.tagName === \"PRE\" &&\n Array.from(element.classList).includes(\"code__pre\")\n );\n }\n // 判断是否是包裹代码块的 code 元素\n function isCode(element) {\n return (\n element.tagName === \"CODE\" &&\n Array.from(element.classList).includes(\"prettyprint\")\n );\n }\n // 判断是否是包裹代码字符的 span 元素\n function isSpan(element) {\n return (\n element.tagName === \"SPAN\" &&\n (isCode(element.parentElement) ||\n isCode(element.parentElement.parentElement))\n );\n }\n }\n}\n\n/**\n * 生成列表字符串\n * @param {*} data 对应内容集合\n * @param {*} rows 行\n * @param {*} cols 列\n */\nexport function createTable({ data, rows, cols }) {\n let table = \"\";\n let currRow = [];\n for (let i = 0; i < rows + 2; ++i) {\n table += \"|\\t\";\n currRow = [];\n for (let j = 0; j < cols; ++j) {\n const rowIdx = i > 1 ? i - 1 : i;\n i === 1\n ? currRow.push(\"---\\t\")\n : currRow.push(data[`k_${rowIdx}_${j}`] || \"\");\n }\n table += currRow.join(\"\\t|\\t\");\n table += \"\\t|\\n\";\n }\n\n return table;\n}\n\nexport const toBase64 = (file) =>\n new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.readAsDataURL(file);\n reader.onload = () => resolve(reader.result.split(\",\").pop());\n reader.onerror = (error) => reject(error);\n });\n\nexport function checkImage(file) {\n // check filename suffix\n const isValidSuffix = /\\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(file.name);\n if (!isValidSuffix) {\n return {\n ok: false,\n msg: \"请上传 JPG/PNG/GIF 格式的图片\",\n };\n }\n\n // check file size\n const maxSize = 10;\n const valid = file.size / 1024 / 1024 <= maxSize;\n if (!valid) {\n return {\n ok: false,\n msg: `由于公众号限制，图片大小不能超过 ${maxSize}M`,\n };\n }\n return { ok: true };\n}\n\n/**\n * 获取一个 DOM 元素的所有样式，\n * @param {DOM 元素} element DOM 元素\n * @param {排除的属性} excludes 如果某些属性对结果有不良影响，可以使用这个参数来排除\n * @returns 行内样式拼接结果\n */\nfunction getElementStyles(element, excludes = [\"width\", \"height\"]) {\n const styles = getComputedStyle(element, null);\n return Object.entries(styles)\n .filter(([key]) => styles.getPropertyValue(key) && !excludes.includes(key))\n .map(([key, value]) => `${key}:${value};`)\n .join(\"\");\n}\n\n/**\n * 移除左边多余空格\n * @param {*} str\n * @returns\n */\nexport function removeLeft(str) {\n const lines = str.split('\\n')\n // 获取应该删除的空白符数量\n const minSpaceNum = lines.filter(item => item.trim())\n .map(item => item.match(/(^\\s+)?/)[0].length)\n .sort((a, b) => a - b)[0]\n // 删除空白符\n const newStr = lines\n .map(item => item.slice(minSpaceNum))\n .join('\\n')\n return newStr\n}\n","import Vue from \"vue\";\nimport Vuex from \"vuex\";\nimport config from \"../assets/scripts/config\";\nimport WxRenderer from \"../assets/scripts/renderers/wx-renderer\";\nimport { marked } from \"marked\";\nimport CodeMirror from \"codemirror/lib/codemirror\";\nimport DEFAULT_CONTENT from \"@/assets/example/markdown.md\";\nimport DEFAULT_CSS_CONTENT from \"@/assets/example/theme-css.txt\";\nimport { setColor, formatDoc, formatCss } from \"../assets/scripts/util\";\n\nVue.use(Vuex);\n\nconst state = {\n wxRenderer: null,\n output: \"\",\n html: \"\",\n editor: null,\n cssEditor: null,\n currentFont: \"\",\n currentSize: \"\",\n currentColor: \"\",\n citeStatus: 0,\n nightMode: false,\n codeTheme: config.codeThemeOption[0].value,\n rightClickMenuVisible: false,\n};\nconst mutations = {\n setEditorValue(state, data) {\n state.editor.setValue(data);\n },\n setCssEditorValue(state, data) {\n state.cssEditor.setValue(data);\n },\n setWxRendererOptions(state, data) {\n state.wxRenderer.setOptions(data);\n },\n setCiteStatus(state, data) {\n state.citeStatus = data;\n localStorage.setItem(\"citeStatus\", data);\n },\n setCurrentFont(state, data) {\n state.currentFont = data;\n localStorage.setItem(\"fonts\", data);\n },\n setCurrentSize(state, data) {\n state.currentSize = data;\n localStorage.setItem(\"size\", data);\n },\n setCurrentColor(state, data) {\n state.currentColor = data;\n localStorage.setItem(\"color\", data);\n },\n setCurrentCodeTheme(state, data) {\n state.codeTheme = data;\n localStorage.setItem(\"codeTheme\", data);\n },\n setRightClickMenuVisible(state, data) {\n state.rightClickMenuVisible = data;\n },\n themeChanged(state) {\n state.nightMode = !state.nightMode;\n localStorage.setItem(\"nightMode\", state.nightMode);\n },\n initEditorState(state) {\n state.currentFont =\n localStorage.getItem(\"fonts\") || config.builtinFonts[0].value;\n state.currentColor =\n localStorage.getItem(\"color\") || config.colorOption[0].value;\n state.currentSize =\n localStorage.getItem(\"size\") || config.sizeOption[2].value;\n state.codeTheme =\n localStorage.getItem(\"codeTheme\") || config.codeThemeOption[0].value;\n state.citeStatus = localStorage.getItem(\"citeStatus\") === \"true\";\n state.nightMode = localStorage.getItem(\"nightMode\") === \"true\";\n state.wxRenderer = new WxRenderer({\n theme: setColor(state.currentColor),\n fonts: state.currentFont,\n size: state.currentSize,\n });\n },\n initEditorEntity(state) {\n const editorDom = document.getElementById(\"editor\");\n\n if (!editorDom.value) {\n editorDom.value =\n localStorage.getItem(\"__editor_content\") || formatDoc(DEFAULT_CONTENT);\n }\n state.editor = CodeMirror.fromTextArea(editorDom, {\n mode: \"text/x-markdown\",\n theme: \"xq-light\",\n lineNumbers: false,\n lineWrapping: true,\n styleActiveLine: true,\n autoCloseBrackets: true,\n extraKeys: {\n \"Ctrl-F\": function autoFormat(editor) {\n const doc = formatDoc(editor.getValue(0));\n localStorage.setItem(\"__editor_content\", doc);\n editor.setValue(doc);\n },\n \"Ctrl-S\": function save(editor) {},\n \"Ctrl-B\": function bold(editor) {\n const selected = editor.getSelection();\n editor.replaceSelection(`**${selected}**`);\n },\n \"Ctrl-D\": function del(editor) {\n const selected = editor.getSelection();\n editor.replaceSelection(`~~${selected}~~`);\n },\n \"Ctrl-I\": function italic(editor) {\n const selected = editor.getSelection();\n editor.replaceSelection(`*${selected}*`);\n },\n },\n });\n },\n initCssEditorEntity(state) {\n const cssEditorDom = document.getElementById(\"cssEditor\");\n\n if (!cssEditorDom.value) {\n cssEditorDom.value =\n localStorage.getItem(\"__css_content\") || DEFAULT_CSS_CONTENT;\n }\n state.cssEditor = CodeMirror.fromTextArea(cssEditorDom, {\n mode: \"css\",\n theme: \"style-mirror\",\n lineNumbers: false,\n lineWrapping: true,\n matchBrackets: true,\n autofocus: true,\n extraKeys: {\n \"Ctrl-F\": function autoFormat(editor) {\n const doc = formatCss(editor.getValue(0));\n localStorage.setItem(\"__css_content\", doc);\n editor.setValue(doc);\n },\n \"Ctrl-S\": function save(editor) {},\n },\n });\n },\n editorRefresh(state) {\n let renderer = state.wxRenderer.getRenderer(state.citeStatus);\n marked.setOptions({ renderer });\n let output = marked.parse(state.editor.getValue(0));\n\n // 去除第一行的 margin-top\n output = output.replace(/(style=\".*?)\"/, '$1;margin-top: 0\"');\n if (state.citeStatus) {\n // 引用脚注\n output += state.wxRenderer.buildFootnotes();\n // 附加的一些 style\n output += state.wxRenderer.buildAddition();\n }\n state.output = output;\n },\n};\n\nexport default new Vuex.Store({\n state,\n mutations,\n actions: {},\n});\n","import Vue from \"vue\";\nimport {\n Loading,\n Message,\n} from \"element-ui\";\n\nVue.component(Message.name, Message);\n\nVue.prototype.$loading = Loading.service;\nVue.prototype.$message = Message;\n","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.loading)?_c('transition',{attrs:{\"name\":\"fade\"}},[_c('loading')],1):_c('codemirror-editor')}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"container\",class:{ container_night: _vm.nightMode }},[_c('el-container',[_c('el-header',{staticClass:\"editor__header\"},[_c('editor-header',{ref:\"header\",on:{\"refresh\":_vm.onEditorRefresh,\"cssChanged\":_vm.cssChanged,\"download\":_vm.downloadEditorContent,\"export\":_vm.exportEditorContent,\"showCssEditor\":function($event){_vm.showCssEditor = !_vm.showCssEditor},\"show-about-dialog\":function($event){_vm.aboutDialogVisible = true},\"show-dialog-form\":function($event){_vm.dialogFormVisible = true},\"show-dialog-upload-img\":function($event){_vm.dialogUploadImgVisible = true},\"startCopy\":function($event){(_vm.isCoping = true), (_vm.backLight = true)},\"endCopy\":_vm.endCopy}})],1),_c('el-main',{staticClass:\"main-body\"},[_c('el-row',{staticClass:\"main-section\"},[_c('el-col',{staticClass:\"codeMirror-wrapper\",attrs:{\"span\":12},nativeOn:{\"contextmenu\":function($event){$event.preventDefault();return _vm.openMenu($event)}}},[_c('textarea',{directives:[{name:\"model\",rawName:\"v-model\",value:(_vm.source),expression:\"source\"}],attrs:{\"id\":\"editor\",\"type\":\"textarea\",\"placeholder\":\"Your markdown text here.\"},domProps:{\"value\":(_vm.source)},on:{\"input\":function($event){if($event.target.composing){ return; }_vm.source=$event.target.value}}})]),_c('el-col',{ref:\"preview\",staticClass:\"preview-wrapper\",class:{\n 'preview-wrapper_night': _vm.nightMode && _vm.isCoping,\n },attrs:{\"span\":12,\"id\":\"preview\"}},[_c('section',{class:{ output_night: _vm.nightMode && !_vm.backLight },attrs:{\"id\":\"output-wrapper\"}},[_c('div',{staticClass:\"preview\"},[_c('section',{attrs:{\"id\":\"output\"},domProps:{\"innerHTML\":_vm._s(_vm.output)}}),(_vm.nightMode && _vm.isCoping)?_c('div',{staticClass:\"loading-mask\"},[_c('div',{staticClass:\"loading__img\"}),_c('span',[_vm._v(\"正在生成\")])]):_vm._e()])])]),_c('transition',{attrs:{\"name\":\"custom-classes-transition\",\"enter-active-class\":\"bounceInRight\"}},[_c('el-col',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.showCssEditor),expression:\"showCssEditor\"}],staticClass:\"cssEditor-wrapper\",attrs:{\"id\":\"cssBox\",\"span\":12}},[_c('textarea',{attrs:{\"id\":\"cssEditor\",\"type\":\"textarea\",\"placeholder\":\"Your custom css here.\"}})])],1)],1)],1)],1),_c('upload-img-dialog',{on:{\"close\":function($event){_vm.dialogUploadImgVisible = false},\"beforeUpload\":_vm.beforeUpload,\"uploadImage\":_vm.uploadImage,\"uploaded\":_vm.uploaded},model:{value:(_vm.dialogUploadImgVisible),callback:function ($$v) {_vm.dialogUploadImgVisible=$$v},expression:\"dialogUploadImgVisible\"}}),_c('about-dialog',{model:{value:(_vm.aboutDialogVisible),callback:function ($$v) {_vm.aboutDialogVisible=$$v},expression:\"aboutDialogVisible\"}}),_c('insert-form-dialog',{model:{value:(_vm.dialogFormVisible),callback:function ($$v) {_vm.dialogFormVisible=$$v},expression:\"dialogFormVisible\"}}),_c('right-click-menu',{attrs:{\"left\":_vm.mouseLeft,\"top\":_vm.mouseTop},on:{\"menuTick\":_vm.onMenuEvent,\"closeMenu\":_vm.closeRightClickMenu},model:{value:(_vm.rightClickMenuVisible),callback:function ($$v) {_vm.rightClickMenuVisible=$$v},expression:\"rightClickMenuVisible\"}})],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('el-container',{staticClass:\"top is-dark\"},[_c('div',{staticClass:\"left-side\"},[_c('el-tooltip',{attrs:{\"effect\":_vm.effect,\"content\":\"上传图片\",\"placement\":\"bottom-start\"}},[_c('i',{staticClass:\"el-icon-upload\",attrs:{\"size\":\"medium\"},on:{\"click\":function($event){return _vm.$emit('show-dialog-upload-img')}}})]),_c('el-tooltip',{staticClass:\"header__item\",attrs:{\"effect\":_vm.effect,\"content\":\"导出 Markdown 文档\",\"placement\":\"bottom-start\"}},[_c('i',{staticClass:\"el-icon-download\",attrs:{\"size\":\"medium\"},on:{\"click\":function($event){return _vm.$emit('download')}}})]),_c('el-tooltip',{staticClass:\"header__item\",attrs:{\"effect\":_vm.effect,\"content\":\"导出 HTML 页面\",\"placement\":\"bottom-start\"}},[_c('i',{staticClass:\"el-icon-document\",attrs:{\"size\":\"medium\"},on:{\"click\":function($event){return _vm.$emit('export')}}})]),_c('el-tooltip',{staticClass:\"header__item\",attrs:{\"effect\":_vm.effect,\"content\":\"重置样式\",\"placement\":\"bottom-start\"}},[_c('i',{staticClass:\"el-icon-refresh\",attrs:{\"size\":\"medium\"},on:{\"click\":function($event){_vm.showResetConfirm = true}}})]),_c('el-tooltip',{staticClass:\"header__item header__item_last\",attrs:{\"effect\":_vm.effect,\"content\":\"插入表格\",\"placement\":\"bottom-start\"}},[_c('i',{staticClass:\"el-icon-s-grid\",attrs:{\"size\":\"medium\"},on:{\"click\":function($event){return _vm.$emit('show-dialog-form')}}})]),_c('el-select',{attrs:{\"size\":\"mini\",\"placeholder\":\"选择字体\",\"clearable\":\"\"},on:{\"change\":_vm.fontChanged},model:{value:(_vm.selectFont),callback:function ($$v) {_vm.selectFont=$$v},expression:\"selectFont\"}},_vm._l((_vm.config.builtinFonts),function(font){return _c('el-option',{key:font.value,style:({ fontFamily: font.value }),attrs:{\"label\":font.label,\"value\":font.value}},[_c('span',{staticClass:\"select-item-left\"},[_vm._v(_vm._s(font.label))]),_c('span',{staticClass:\"select-item-right\"},[_vm._v(\"Abc\")])])}),1),_c('el-select',{attrs:{\"size\":\"mini\",\"placeholder\":\"选择段落字号\",\"clearable\":\"\"},on:{\"change\":_vm.sizeChanged},model:{value:(_vm.selectSize),callback:function ($$v) {_vm.selectSize=$$v},expression:\"selectSize\"}},_vm._l((_vm.config.sizeOption),function(size){return _c('el-option',{key:size.value,attrs:{\"label\":size.label,\"value\":size.value}},[_c('span',{staticClass:\"select-item-left\"},[_vm._v(_vm._s(size.label))]),_c('span',{staticClass:\"select-item-right\"},[_vm._v(_vm._s(size.desc))])])}),1),_c('el-select',{attrs:{\"size\":\"mini\",\"placeholder\":\"选择颜色\",\"clearable\":\"\"},on:{\"change\":_vm.colorChanged},model:{value:(_vm.selectColor),callback:function ($$v) {_vm.selectColor=$$v},expression:\"selectColor\"}},_vm._l((_vm.config.colorOption),function(color){return _c('el-option',{key:color.value,attrs:{\"label\":color.label,\"value\":color.value}},[_c('span',{staticClass:\"select-item-left\"},[_vm._v(_vm._s(color.label))]),_c('span',{staticClass:\"select-item-right\"},[_vm._v(_vm._s(color.desc))])])}),1),_c('el-select',{attrs:{\"size\":\"mini\",\"placeholder\":\"代码主题\"},on:{\"change\":_vm.codeThemeChanged},model:{value:(_vm.selectCodeTheme),callback:function ($$v) {_vm.selectCodeTheme=$$v},expression:\"selectCodeTheme\"}},_vm._l((_vm.config.codeThemeOption),function(code){return _c('el-option',{key:code.value,attrs:{\"label\":code.label,\"value\":code.value}},[_c('span',{staticClass:\"select-item-left\"},[_vm._v(_vm._s(code.label))]),_c('span',{staticClass:\"select-item-right\"},[_vm._v(_vm._s(code.desc))])])}),1),_c('el-tooltip',{attrs:{\"content\":\"自定义颜色\",\"effect\":_vm.effect,\"placement\":\"top\"}},[_c('el-color-picker',{attrs:{\"size\":\"mini\",\"show-alpha\":\"\"},on:{\"change\":_vm.colorChanged},model:{value:(_vm.selectColor),callback:function ($$v) {_vm.selectColor=$$v},expression:\"selectColor\"}})],1),_c('el-tooltip',{attrs:{\"content\":\"微信外链自动转为文末引用\",\"effect\":_vm.effect,\"placement\":\"top\"}},[_c('el-switch',{staticClass:\"header__switch\",attrs:{\"active-color\":\"#67c23a\",\"inactive-color\":\"#dcdfe6\"},on:{\"change\":_vm.statusChanged},model:{value:(_vm.citeStatus),callback:function ($$v) {_vm.citeStatus=$$v},expression:\"citeStatus\"}})],1)],1),_c('div',{staticClass:\"right-side\"},[_c('el-tooltip',{staticClass:\"item\",attrs:{\"effect\":_vm.effect,\"content\":\"自定义CSS样式\",\"placement\":\"left\"}},[_c('el-button',{attrs:{\"type\":_vm.btnType,\"plain\":\"\",\"size\":\"medium\",\"icon\":\"el-icon-setting\"},on:{\"click\":_vm.customStyle}})],1),_c('el-button',{attrs:{\"type\":_vm.btnType,\"plain\":\"\",\"size\":\"medium\",\"placement\":\"bottom-start\"},on:{\"click\":_vm.copy}},[_vm._v(\"复制\")]),_c('el-button',{staticClass:\"about\",attrs:{\"type\":_vm.btnType,\"plain\":\"\",\"size\":\"medium\"},on:{\"click\":function($event){return _vm.$emit('show-about-dialog')}}},[_vm._v(\"关于\")]),_c('el-tooltip',{attrs:{\"content\":_vm.btnContent,\"effect\":_vm.effect,\"placement\":\"bottom-start\"}},[(_vm.nightMode)?_c('div',{staticClass:\"mode__switch mode__switch_black\",on:{\"click\":_vm.themeChanged}}):_c('div',{staticClass:\"mode__switch\",on:{\"click\":_vm.themeChanged}})])],1),_c('resetDialog',{attrs:{\"showResetConfirm\":_vm.showResetConfirm},on:{\"confirm\":_vm.confirmReset,\"close\":_vm.cancelReset}})],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","import juice from \"juice\";\n\nexport function solveWeChatImage() {\n const clipboardDiv = document.getElementById(\"output\");\n const images = clipboardDiv.getElementsByTagName(\"img\");\n for (let i = 0; i < images.length; i++) {\n const image = images[i];\n const width = image.getAttribute(\"width\");\n const height = image.getAttribute(\"height\");\n image.removeAttribute(\"width\");\n image.removeAttribute(\"height\");\n image.style.width = width;\n image.style.height = height;\n }\n}\nexport function solveHtml() {\n const element = document.getElementById(\"output-wrapper\");\n let html = element.innerHTML;\n let res = \"\";\n res = juice.inlineContent(html, {\n inlinePseudoElements: true,\n preserveImportant: true,\n });\n return res;\n}\n","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('el-dialog',{staticClass:\"reset__dialog\",attrs:{\"title\":\"提示\",\"visible\":_vm.showResetConfirm},on:{\"close\":function($event){return _vm.$emit('close')}}},[_c('div',{staticClass:\"text\"},[_vm._v(\"此操作将丢失本地自定义样式，是否继续?\")]),_c('div',{staticClass:\"dialog-footer\",attrs:{\"slot\":\"footer\"},slot:\"footer\"},[_c('el-button',{attrs:{\"type\":_vm.btnType,\"plain\":\"\"},on:{\"click\":function($event){return _vm.$emit('close')}}},[_vm._v(\"取 消\")]),_c('el-button',{attrs:{\"type\":_vm.btnType,\"plain\":\"\"},on:{\"click\":function($event){return _vm.$emit('confirm')}}},[_vm._v(\"确 定\")])],1)])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\n 此操作将丢失本地自定义样式，是否继续?
\n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {{ font.label }}\n Abc\n \n \n \n \n {{ size.label }}\n {{ size.desc }}\n \n \n \n \n {{ color.label }}\n {{ color.desc }}\n \n \n \n \n {{ code.label }}\n {{ code.desc }}\n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n 复制 \n 关于 \n \n
\n \n \n \n \n
\n 一款高度简洁的微信 Markdown 编辑器
\n\n
\n \n \n扫码关注我的公众号，原创技术文章第一时间推送！
\n| \n | \n \n
\n 将图片拖到此处，或\n 点击上传\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n\n\n\n\n\n\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CodemirrorEditor.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CodemirrorEditor.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./CodemirrorEditor.vue?vue&type=template&id=469b2134&scoped=true&\"\nimport script from \"./CodemirrorEditor.vue?vue&type=script&lang=js&\"\nexport * from \"./CodemirrorEditor.vue?vue&type=script&lang=js&\"\nimport style0 from \"./CodemirrorEditor.vue?vue&type=style&index=0&id=469b2134&lang=less&scoped=true&\"\nimport style1 from \"./CodemirrorEditor.vue?vue&type=style&index=1&id=469b2134&lang=less&scoped=true&\"\nimport style2 from \"./CodemirrorEditor.vue?vue&type=style&index=2&id=469b2134&lang=less&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"469b2134\",\n null\n \n)\n\nexport default component.exports","\n \n \n
\n \n \n \n \n 正在生成\n
\n "):'
['.concat(e[0],"] ").concat(e[1],": ").concat(e[2],"")}));return e.length?"
引用链接
").concat(e.join("\n"),"
"):""},this.buildAddition=function(){return"\n \n "},this.setOptions=function(e){o.opts=s(o.opts,e)},this.hasFootnotes=function(){return 0!==n.length},this.getRenderer=function(e){n=[],r=0,i=o.buildTheme(o.opts.theme);var t=new f["Renderer"];return t.heading=function(e,t){switch(t){case 1:return"").concat(e,"
");case 2:return"").concat(e,"
");case 3:return"").concat(e,"
");default:return"").concat(e,"
")}},t.paragraph=function(e){return-1!=e.indexOf("")),"
").concat(e,"")},t.code=function(e,t){e=e.replace(//g,">");var o=e.split("\n").map((function(e){return'
'.concat(e||" ","")})),n="github";return'\n \n ').concat(o.join(""),"\n \n ").concat(e,"")},t.listitem=function(e){return"<%s/>').concat(e,"")},t.list=function(e,t,o){e=e.replace(/<\/*p.*?>/g,"");var n=e.split("<%s/>");if(!t)return e=n.join("•"),"").concat(e,"
");e=n[0];for(var r=1;r")},t}},g=p,h=o("56b3"),b=o.n(h),C='# 示例文章：Google 搜索的即时自动补全功能究竟是如何“工作”的？\r\n\r\n> Google 搜索**自动补全功能**的强大，相信不少朋友都能感受到，它帮助我们更快地“补全”我们所要输入的搜索关键字。那么，它怎么知道我们要输入什么内容？它又是如何工作的？在这篇文章里，我们一起来看看。\r\n\r\n## 使用自动补全\r\n\r\nGoogle 搜索的自动补全功能可以在 Google 搜索应用的大多数位置使用，包括 [Google](https://www.google.com/) 主页、适用于 IOS 和 Android 的 Google 应用，我们只需要在 Google 搜索框上开始键入关键字，就可以看到联想词了。\r\n\r\n\r\n\r\n在上图示例中，我们可以看到，输入关键字 `juej`，Google 搜索会联想到“掘金”、“掘金小册”、“绝句”等等，好处就是，我们无须输入完整的关键字即可轻松完成针对这些 topics 的搜索。\r\n\r\n谷歌搜索的自动补全功能对于使用移动设备的用户来说特别有用，用户可以轻松在难以键入的小屏幕上完成搜索。当然，对于移动设备用户和台式机用户而言，这都节省了大量的时间。根据 Google 官方报告，自动补全功能可以减少大约 25% 的打字，累积起来，预计每天可以节省 200 多年的打字时间。是的，每天！\r\n\r\n> 注意，本文所提到的“**联想词**”与“**预测**”，是同一个意思。\r\n\r\n## 基于“预测”而非“建议”\r\n\r\nGoogle 官方将自动补全功能称之为“预测”，而不是“建议”，为什么呢？其实是有充分理由的。自动补全功能是为了**帮助用户完成他们打算进行的搜索**，而不是建议用户要执行什么搜索。\r\n\r\n那么，Google 是如何确定这些“预测”的？其实，Google 会根据趋势搜索 [trends](https://trends.google.com/trends/?geo=US) 给到我们这些“预测”。简单来说，哪个热门、哪个搜索频率高，就更可能推给我们。当然，这也与我们当前所处的位置以及我们的搜索历史相关。\r\n\r\n另外，这些“预测”也会随着我们键入的关键字的变更而更改。例如，当我们把键入的关键字从 `juej` 更改为 `juex` 时，与“掘金”相关的预测会“消失”，同时，与“觉醒”、“决心”相关联的词会出现。\r\n\r\n\r\n\r\n## 为什么看不到某些联想词？\r\n\r\n如果我们在输入某个关键字时看不到联想词，那么表明 Google 的算法可能检测到：\r\n\r\n- 这个关键字不是热门字词；\r\n- 搜索的字词太新了，我们可能需要等待几天或几周才能看到联想词；\r\n- 这是一个侮辱性或敏感字词，这个搜索字词违反了 Google 的相关政策。更加详细的情况，可以了解 [Google 搜索自动补全政策](https://support.google.com/websearch/answer/7368877)。\r\n\r\n## 为什么会看到某些不当的联想词？\r\n\r\nGoogle 拥有专门设计的系统，可以自动捕获不适当的预测结果而不显示出来。然而，Google 每天需要处理数十亿次搜索，这意味着 Google 每天会显示数十亿甚至上百亿条预测。再好的系统，也可能存在缺陷，不正确的预测也可能随时会出现。\r\n\r\n我们作为 Google 搜索的用户，如果认定某条预测违反了相关的搜索自动补全政策，可以进行举报反馈，点击右下角“**举报不当的联想查询**”并勾选相关选项即可。\r\n\r\n\r\n\r\n## 如何实现自动补全算法？\r\n\r\n目前，Google 官方似乎并没有公开搜索自动补全的算法实现，但是业界在这方面已经有了不少研究。\r\n\r\n一个好的自动补全器必须是快速的，并且在用户键入下一个字符后立即更新联想词列表。**自动补全器的核心是一个函数，它接受输入的前缀，并搜索以给定前缀开头的词汇或语句列表**。通常来说，只需要返回少量的数目即可。\r\n\r\n接下来，我们先从一个简单且低效的实现开始，并在此基础上逐步构建更高效的方法。\r\n\r\n### 词汇表实现\r\n\r\n一个**简单粗暴的实现方式**是：顺序查找词汇表，依次检查每个词汇，看它是否以给定的前缀开头。\r\n\r\n但是，此方法需要将前缀与每个词汇进行匹配检查，若词汇量较少，这种方式可能勉强行得通。但是，如果词汇量规模较大，效率就太低了。\r\n\r\n一个**更好的实现方式是**：让词汇按字典顺序排序。借助二分搜索算法，可以快速搜索有序词汇表中的前缀。由于二分搜索的每一步都会将搜索的范围减半，因此，总的搜索时间与词汇表中单词数量的对数成正比，即时间复杂度是 `O(log N)`。二分搜索的性能很好，但有没有更好的实现呢？当然有，往下看。\r\n\r\n### 前缀树实现\r\n\r\n通常来说，许多词汇都以相同的前缀开头，比如 `need`、`nested` 都以 `ne` 开头，`seed`、`speed` 都以 `s` 开头。要是为每个单词分别存储公共前缀似乎很浪费。\r\n\r\n\r\n\r\n前缀树是一种利用公共前缀来加速补全速度的数据结构。前缀树在节点树中排列一组单词，单词沿着从根节点到叶子节点的路径存储，树的层次对应于前缀的字母位置。\r\n\r\n前缀的补全是顺着前缀定义的路径来查找的。例如，在上图的前缀树中，前缀 `ne` 对应于从子节点取左边缘 `N` 和唯一边缘 `E` 的路径。然后可以通过继续遍历从 `E` 节点可以达到的所有叶节点来生成补全列表。在图中，`ne` 的补全可以是两个分支：`-ed` 和 `-sted`。如果在数中找不到由前缀定义的路径，则说明词汇表中不包含以该前缀开头的单词。\r\n\r\n### 有限状态自动机(DFA)实现\r\n\r\n前缀树可以有效处理公共前缀，但是，对于其他共享词部分，仍会分别存储在每个分支中。比如，后缀 `ed`、`ing`、`tion` 在英文单词中特别常见。在上一个例子中，`e`、`d` 分别存放在了每一个分支上。\r\n\r\n有没有一种方法可以更加节省存储空间呢？有的，那就是 DFA。\r\n\r\n
\r\n'.concat(t,"
")]);function r(e){switch(!0){case t(e):case o(e):case n(e):case i(e):e.setAttribute("style",H(e));default:}function t(e){return"SECTION"===e.tagName&&Array.from(e.classList).includes("code-snippet__github")}function o(e){return"PRE"===e.tagName&&Array.from(e.classList).includes("code__pre")}function n(e){return"CODE"===e.tagName&&Array.from(e.classList).includes("prettyprint")}function i(e){return"SPAN"===e.tagName&&(n(e.parentElement)||n(e.parentElement.parentElement))}e.children.length&&Array.from(e.children).forEach((function(e){return r(e)}))}o.href=URL.createObjectURL(n),document.body.appendChild(o),o.click(),document.body.removeChild(o)}function W(e){for(var t=e.data,o=e.rows,n=e.cols,r="",i=[],a=0;a[${x[0]}]: ${x[1]}`;\n }\n return `
[${x[0]}] ${x[1]}: ${x[2]}`;\n });\n if (!footnoteArray.length) {\n return \"\";\n }\n return `
引用链接
${footnoteArray.join(\"\\n\")}
`;\n };\n\n this.buildAddition = () => {\n return `\n \n `;\n };\n\n this.setOptions = (newOpts) => {\n this.opts = merge(this.opts, newOpts);\n };\n\n this.hasFootnotes = () => footnotes.length !== 0;\n\n this.getRenderer = (status) => {\n footnotes = [];\n footnoteIndex = 0;\n\n styleMapping = this.buildTheme(this.opts.theme);\n let renderer = new Renderer();\n\n renderer.heading = (text, level) => {\n switch (level) {\n case 1:\n return `${text}
`;\n case 2:\n return `${text}
`;\n case 3:\n return `${text}
`;\n default:\n return `${text}
`;\n }\n };\n renderer.paragraph = (text) => {\n if (text.indexOf(\"`);\n return `
${text}`;\n };\n renderer.code = (text, lang) => {\n text = text.replace(//g, \">\");\n const codeLines = text\n .split(\"\\n\")\n .map(\n (line) =>\n `
${\n line || \" \"\n }`\n );\n const codeTheme = \"github\";\n return `\n \n ${codeLines.join(\"\")}\n \n ${text}`;\n renderer.listitem = (text) =>\n `<%s/>${text}`;\n\n renderer.list = (text, ordered, start) => {\n text = text.replace(/<\\/*p.*?>/g, \"\");\n let segments = text.split(`<%s/>`);\n if (!ordered) {\n text = segments.join(\"•\");\n return `${text}
`;\n }\n text = segments[0];\n for (let i = 1; i < segments.length; i++) {\n text = text + i + \".\" + segments[i];\n }\n return `${text}
`;\n };\n renderer.image = (href, title, text) => {\n let subText = \"\";\n if (text) {\n subText = ``;\n return renderer;\n };\n }\n}\nexport default WxRenderer;\n","export default \"# 示例文章：Google 搜索的即时自动补全功能究竟是如何“工作”的？\\r\\n\\r\\n> Google 搜索**自动补全功能**的强大，相信不少朋友都能感受到，它帮助我们更快地“补全”我们所要输入的搜索关键字。那么，它怎么知道我们要输入什么内容？它又是如何工作的？在这篇文章里，我们一起来看看。\\r\\n\\r\\n## 使用自动补全\\r\\n\\r\\nGoogle 搜索的自动补全功能可以在 Google 搜索应用的大多数位置使用，包括 [Google](https://www.google.com/) 主页、适用于 IOS 和 Android 的 Google 应用，我们只需要在 Google 搜索框上开始键入关键字，就可以看到联想词了。\\r\\n\\r\\n\\r\\n\\r\\n在上图示例中，我们可以看到，输入关键字 `juej`，Google 搜索会联想到“掘金”、“掘金小册”、“绝句”等等，好处就是，我们无须输入完整的关键字即可轻松完成针对这些 topics 的搜索。\\r\\n\\r\\n谷歌搜索的自动补全功能对于使用移动设备的用户来说特别有用，用户可以轻松在难以键入的小屏幕上完成搜索。当然，对于移动设备用户和台式机用户而言，这都节省了大量的时间。根据 Google 官方报告，自动补全功能可以减少大约 25% 的打字，累积起来，预计每天可以节省 200 多年的打字时间。是的，每天！\\r\\n\\r\\n> 注意，本文所提到的“**联想词**”与“**预测**”，是同一个意思。\\r\\n\\r\\n## 基于“预测”而非“建议”\\r\\n\\r\\nGoogle 官方将自动补全功能称之为“预测”，而不是“建议”，为什么呢？其实是有充分理由的。自动补全功能是为了**帮助用户完成他们打算进行的搜索**，而不是建议用户要执行什么搜索。\\r\\n\\r\\n那么，Google 是如何确定这些“预测”的？其实，Google 会根据趋势搜索 [trends](https://trends.google.com/trends/?geo=US) 给到我们这些“预测”。简单来说，哪个热门、哪个搜索频率高，就更可能推给我们。当然，这也与我们当前所处的位置以及我们的搜索历史相关。\\r\\n\\r\\n另外，这些“预测”也会随着我们键入的关键字的变更而更改。例如，当我们把键入的关键字从 `juej` 更改为 `juex` 时，与“掘金”相关的预测会“消失”，同时，与“觉醒”、“决心”相关联的词会出现。\\r\\n\\r\\n\\r\\n\\r\\n## 为什么看不到某些联想词？\\r\\n\\r\\n如果我们在输入某个关键字时看不到联想词，那么表明 Google 的算法可能检测到：\\r\\n\\r\\n- 这个关键字不是热门字词；\\r\\n- 搜索的字词太新了，我们可能需要等待几天或几周才能看到联想词；\\r\\n- 这是一个侮辱性或敏感字词，这个搜索字词违反了 Google 的相关政策。更加详细的情况，可以了解 [Google 搜索自动补全政策](https://support.google.com/websearch/answer/7368877)。\\r\\n\\r\\n## 为什么会看到某些不当的联想词？\\r\\n\\r\\nGoogle 拥有专门设计的系统，可以自动捕获不适当的预测结果而不显示出来。然而，Google 每天需要处理数十亿次搜索，这意味着 Google 每天会显示数十亿甚至上百亿条预测。再好的系统，也可能存在缺陷，不正确的预测也可能随时会出现。\\r\\n\\r\\n我们作为 Google 搜索的用户，如果认定某条预测违反了相关的搜索自动补全政策，可以进行举报反馈，点击右下角“**举报不当的联想查询**”并勾选相关选项即可。\\r\\n\\r\\n\\r\\n\\r\\n## 如何实现自动补全算法？\\r\\n\\r\\n目前，Google 官方似乎并没有公开搜索自动补全的算法实现，但是业界在这方面已经有了不少研究。\\r\\n\\r\\n一个好的自动补全器必须是快速的，并且在用户键入下一个字符后立即更新联想词列表。**自动补全器的核心是一个函数，它接受输入的前缀，并搜索以给定前缀开头的词汇或语句列表**。通常来说，只需要返回少量的数目即可。\\r\\n\\r\\n接下来，我们先从一个简单且低效的实现开始，并在此基础上逐步构建更高效的方法。\\r\\n\\r\\n### 词汇表实现\\r\\n\\r\\n一个**简单粗暴的实现方式**是：顺序查找词汇表，依次检查每个词汇，看它是否以给定的前缀开头。\\r\\n\\r\\n但是，此方法需要将前缀与每个词汇进行匹配检查，若词汇量较少，这种方式可能勉强行得通。但是，如果词汇量规模较大，效率就太低了。\\r\\n\\r\\n一个**更好的实现方式是**：让词汇按字典顺序排序。借助二分搜索算法，可以快速搜索有序词汇表中的前缀。由于二分搜索的每一步都会将搜索的范围减半，因此，总的搜索时间与词汇表中单词数量的对数成正比，即时间复杂度是 `O(log N)`。二分搜索的性能很好，但有没有更好的实现呢？当然有，往下看。\\r\\n\\r\\n### 前缀树实现\\r\\n\\r\\n通常来说，许多词汇都以相同的前缀开头，比如 `need`、`nested` 都以 `ne` 开头，`seed`、`speed` 都以 `s` 开头。要是为每个单词分别存储公共前缀似乎很浪费。\\r\\n\\r\\n\\r\\n\\r\\n前缀树是一种利用公共前缀来加速补全速度的数据结构。前缀树在节点树中排列一组单词，单词沿着从根节点到叶子节点的路径存储，树的层次对应于前缀的字母位置。\\r\\n\\r\\n前缀的补全是顺着前缀定义的路径来查找的。例如，在上图的前缀树中，前缀 `ne` 对应于从子节点取左边缘 `N` 和唯一边缘 `E` 的路径。然后可以通过继续遍历从 `E` 节点可以达到的所有叶节点来生成补全列表。在图中，`ne` 的补全可以是两个分支：`-ed` 和 `-sted`。如果在数中找不到由前缀定义的路径，则说明词汇表中不包含以该前缀开头的单词。\\r\\n\\r\\n### 有限状态自动机(DFA)实现\\r\\n\\r\\n前缀树可以有效处理公共前缀，但是，对于其他共享词部分，仍会分别存储在每个分支中。比如，后缀 `ed`、`ing`、`tion` 在英文单词中特别常见。在上一个例子中，`e`、`d` 分别存放在了每一个分支上。\\r\\n\\r\\n有没有一种方法可以更加节省存储空间呢？有的，那就是 DFA。\\r\\n\\r\\n
\\r\\n${htmlStr}
`,\n ]);\n\n downLink.href = URL.createObjectURL(blob);\n document.body.appendChild(downLink);\n downLink.click();\n document.body.removeChild(downLink);\n\n function setStyles(element) {\n switch (true) {\n case isSection(element):\n case isPre(element):\n case isCode(element):\n case isSpan(element):\n element.setAttribute(\"style\", getElementStyles(element));\n default:\n }\n if (element.children.length) {\n Array.from(element.children).forEach((child) => setStyles(child));\n }\n\n // 判断是否是包裹代码块的 section 元素\n function isSection(element) {\n return (\n element.tagName === \"SECTION\" &&\n Array.from(element.classList).includes(\"code-snippet__github\")\n );\n }\n // 判断是否是包裹代码块的 pre 元素\n function isPre(element) {\n return (\n element.tagName === \"PRE\" &&\n Array.from(element.classList).includes(\"code__pre\")\n );\n }\n // 判断是否是包裹代码块的 code 元素\n function isCode(element) {\n return (\n element.tagName === \"CODE\" &&\n Array.from(element.classList).includes(\"prettyprint\")\n );\n }\n // 判断是否是包裹代码字符的 span 元素\n function isSpan(element) {\n return (\n element.tagName === \"SPAN\" &&\n (isCode(element.parentElement) ||\n isCode(element.parentElement.parentElement))\n );\n }\n }\n}\n\n/**\n * 生成列表字符串\n * @param {*} data 对应内容集合\n * @param {*} rows 行\n * @param {*} cols 列\n */\nexport function createTable({ data, rows, cols }) {\n let table = \"\";\n let currRow = [];\n for (let i = 0; i < rows + 2; ++i) {\n table += \"|\\t\";\n currRow = [];\n for (let j = 0; j < cols; ++j) {\n const rowIdx = i > 1 ? i - 1 : i;\n i === 1\n ? currRow.push(\"---\\t\")\n : currRow.push(data[`k_${rowIdx}_${j}`] || \"\");\n }\n table += currRow.join(\"\\t|\\t\");\n table += \"\\t|\\n\";\n }\n\n return table;\n}\n\nexport const toBase64 = (file) =>\n new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.readAsDataURL(file);\n reader.onload = () => resolve(reader.result.split(\",\").pop());\n reader.onerror = (error) => reject(error);\n });\n\nexport function checkImage(file) {\n // check filename suffix\n const isValidSuffix = /\\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(file.name);\n if (!isValidSuffix) {\n return {\n ok: false,\n msg: \"请上传 JPG/PNG/GIF 格式的图片\",\n };\n }\n\n // check file size\n const maxSize = 10;\n const valid = file.size / 1024 / 1024 <= maxSize;\n if (!valid) {\n return {\n ok: false,\n msg: `由于公众号限制，图片大小不能超过 ${maxSize}M`,\n };\n }\n return { ok: true };\n}\n\n/**\n * 获取一个 DOM 元素的所有样式，\n * @param {DOM 元素} element DOM 元素\n * @param {排除的属性} excludes 如果某些属性对结果有不良影响，可以使用这个参数来排除\n * @returns 行内样式拼接结果\n */\nfunction getElementStyles(element, excludes = [\"width\", \"height\"]) {\n const styles = getComputedStyle(element, null);\n return Object.entries(styles)\n .filter(([key]) => styles.getPropertyValue(key) && !excludes.includes(key))\n .map(([key, value]) => `${key}:${value};`)\n .join(\"\");\n}\n\n/**\n * 移除左边多余空格\n * @param {*} str\n * @returns\n */\nexport function removeLeft(str) {\n const lines = str.split('\\n')\n // 获取应该删除的空白符数量\n const minSpaceNum = lines.filter(item => item.trim())\n .map(item => item.match(/(^\\s+)?/)[0].length)\n .sort((a, b) => a - b)[0]\n // 删除空白符\n const newStr = lines\n .map(item => item.slice(minSpaceNum))\n .join('\\n')\n return newStr\n}\n","import Vue from \"vue\";\nimport Vuex from \"vuex\";\nimport config from \"../assets/scripts/config\";\nimport WxRenderer from \"../assets/scripts/renderers/wx-renderer\";\nimport { marked } from \"marked\";\nimport CodeMirror from \"codemirror/lib/codemirror\";\nimport DEFAULT_CONTENT from \"@/assets/example/markdown.md\";\nimport DEFAULT_CSS_CONTENT from \"@/assets/example/theme-css.txt\";\nimport { setColor, formatDoc, formatCss } from \"../assets/scripts/util\";\n\nVue.use(Vuex);\n\nconst state = {\n wxRenderer: null,\n output: \"\",\n html: \"\",\n editor: null,\n cssEditor: null,\n currentFont: \"\",\n currentSize: \"\",\n currentColor: \"\",\n citeStatus: 0,\n nightMode: false,\n codeTheme: \"github\",\n rightClickMenuVisible: false,\n};\nconst mutations = {\n setEditorValue(state, data) {\n state.editor.setValue(data);\n },\n setCssEditorValue(state, data) {\n state.cssEditor.setValue(data);\n },\n setWxRendererOptions(state, data) {\n state.wxRenderer.setOptions(data);\n },\n setCiteStatus(state, data) {\n state.citeStatus = data;\n localStorage.setItem(\"citeStatus\", data);\n },\n setCurrentFont(state, data) {\n state.currentFont = data;\n localStorage.setItem(\"fonts\", data);\n },\n setCurrentSize(state, data) {\n state.currentSize = data;\n localStorage.setItem(\"size\", data);\n },\n setCurrentColor(state, data) {\n state.currentColor = data;\n localStorage.setItem(\"color\", data);\n },\n setCurrentCodeTheme(state, data) {\n state.codeTheme = data;\n localStorage.setItem(\"codeTheme\", data);\n },\n setRightClickMenuVisible(state, data) {\n state.rightClickMenuVisible = data;\n },\n themeChanged(state) {\n state.nightMode = !state.nightMode;\n localStorage.setItem(\"nightMode\", state.nightMode);\n },\n initEditorState(state) {\n state.currentFont =\n localStorage.getItem(\"fonts\") || config.builtinFonts[0].value;\n state.currentColor =\n localStorage.getItem(\"color\") || config.colorOption[0].value;\n state.currentSize =\n localStorage.getItem(\"size\") || config.sizeOption[2].value;\n state.codeTheme =\n localStorage.getItem(\"codeTheme\") || config.codeThemeOption[0].value;\n state.citeStatus = localStorage.getItem(\"citeStatus\") === \"true\";\n state.nightMode = localStorage.getItem(\"nightMode\") === \"true\";\n state.wxRenderer = new WxRenderer({\n theme: setColor(state.currentColor),\n fonts: state.currentFont,\n size: state.currentSize,\n });\n },\n initEditorEntity(state) {\n const editorDom = document.getElementById(\"editor\");\n\n if (!editorDom.value) {\n editorDom.value =\n localStorage.getItem(\"__editor_content\") || formatDoc(DEFAULT_CONTENT);\n }\n state.editor = CodeMirror.fromTextArea(editorDom, {\n mode: \"text/x-markdown\",\n theme: \"xq-light\",\n lineNumbers: false,\n lineWrapping: true,\n styleActiveLine: true,\n autoCloseBrackets: true,\n extraKeys: {\n \"Ctrl-F\": function autoFormat(editor) {\n const doc = formatDoc(editor.getValue(0));\n localStorage.setItem(\"__editor_content\", doc);\n editor.setValue(doc);\n },\n \"Ctrl-S\": function save(editor) {},\n \"Ctrl-B\": function bold(editor) {\n const selected = editor.getSelection();\n editor.replaceSelection(`**${selected}**`);\n },\n \"Ctrl-D\": function del(editor) {\n const selected = editor.getSelection();\n editor.replaceSelection(`~~${selected}~~`);\n },\n \"Ctrl-I\": function italic(editor) {\n const selected = editor.getSelection();\n editor.replaceSelection(`*${selected}*`);\n },\n },\n });\n },\n initCssEditorEntity(state) {\n const cssEditorDom = document.getElementById(\"cssEditor\");\n\n if (!cssEditorDom.value) {\n cssEditorDom.value =\n localStorage.getItem(\"__css_content\") || DEFAULT_CSS_CONTENT;\n }\n state.cssEditor = CodeMirror.fromTextArea(cssEditorDom, {\n mode: \"css\",\n theme: \"style-mirror\",\n lineNumbers: false,\n lineWrapping: true,\n matchBrackets: true,\n autofocus: true,\n extraKeys: {\n \"Ctrl-F\": function autoFormat(editor) {\n const doc = formatCss(editor.getValue(0));\n localStorage.setItem(\"__css_content\", doc);\n editor.setValue(doc);\n },\n \"Ctrl-S\": function save(editor) {},\n },\n });\n },\n editorRefresh(state) {\n let renderer = state.wxRenderer.getRenderer(state.citeStatus);\n marked.setOptions({ renderer });\n let output = marked.parse(state.editor.getValue(0));\n\n // 去除第一行的 margin-top\n output = output.replace(/(style=\".*?)\"/, '$1;margin-top: 0\"');\n if (state.citeStatus) {\n // 引用脚注\n output += state.wxRenderer.buildFootnotes();\n // 附加的一些 style\n output += state.wxRenderer.buildAddition();\n }\n state.output = output;\n },\n};\n\nexport default new Vuex.Store({\n state,\n mutations,\n actions: {},\n});\n","import Vue from \"vue\";\nimport {\n Loading,\n Message,\n} from \"element-ui\";\n\nVue.component(Message.name, Message);\n\nVue.prototype.$loading = Loading.service;\nVue.prototype.$message = Message;\n","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.loading)?_c('transition',{attrs:{\"name\":\"fade\"}},[_c('loading')],1):_c('codemirror-editor')}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"container\",class:{ container_night: _vm.nightMode }},[_c('el-container',[_c('el-header',{staticClass:\"editor__header\"},[_c('editor-header',{ref:\"header\",on:{\"refresh\":_vm.onEditorRefresh,\"cssChanged\":_vm.cssChanged,\"download\":_vm.downloadEditorContent,\"export\":_vm.exportEditorContent,\"showCssEditor\":function($event){_vm.showCssEditor = !_vm.showCssEditor},\"show-about-dialog\":function($event){_vm.aboutDialogVisible = true},\"show-dialog-form\":function($event){_vm.dialogFormVisible = true},\"show-dialog-upload-img\":function($event){_vm.dialogUploadImgVisible = true},\"startCopy\":function($event){(_vm.isCoping = true), (_vm.backLight = true)},\"endCopy\":_vm.endCopy}})],1),_c('el-main',{staticClass:\"main-body\"},[_c('el-row',{staticClass:\"main-section\"},[_c('el-col',{staticClass:\"codeMirror-wrapper\",attrs:{\"span\":12},nativeOn:{\"contextmenu\":function($event){$event.preventDefault();return _vm.openMenu($event)}}},[_c('textarea',{directives:[{name:\"model\",rawName:\"v-model\",value:(_vm.source),expression:\"source\"}],attrs:{\"id\":\"editor\",\"type\":\"textarea\",\"placeholder\":\"Your markdown text here.\"},domProps:{\"value\":(_vm.source)},on:{\"input\":function($event){if($event.target.composing){ return; }_vm.source=$event.target.value}}})]),_c('el-col',{ref:\"preview\",staticClass:\"preview-wrapper\",class:{\n 'preview-wrapper_night': _vm.nightMode && _vm.isCoping,\n },attrs:{\"span\":12,\"id\":\"preview\"}},[_c('section',{class:{ output_night: _vm.nightMode && !_vm.backLight },attrs:{\"id\":\"output-wrapper\"}},[_c('div',{staticClass:\"preview\"},[_c('section',{attrs:{\"id\":\"output\"},domProps:{\"innerHTML\":_vm._s(_vm.output)}}),(_vm.nightMode && _vm.isCoping)?_c('div',{staticClass:\"loading-mask\"},[_c('div',{staticClass:\"loading__img\"}),_c('span',[_vm._v(\"正在生成\")])]):_vm._e()])])]),_c('transition',{attrs:{\"name\":\"custom-classes-transition\",\"enter-active-class\":\"bounceInRight\"}},[_c('el-col',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.showCssEditor),expression:\"showCssEditor\"}],staticClass:\"cssEditor-wrapper\",attrs:{\"id\":\"cssBox\",\"span\":12}},[_c('textarea',{attrs:{\"id\":\"cssEditor\",\"type\":\"textarea\",\"placeholder\":\"Your custom css here.\"}})])],1)],1)],1)],1),_c('upload-img-dialog',{on:{\"close\":function($event){_vm.dialogUploadImgVisible = false},\"beforeUpload\":_vm.beforeUpload,\"uploadImage\":_vm.uploadImage,\"uploaded\":_vm.uploaded},model:{value:(_vm.dialogUploadImgVisible),callback:function ($$v) {_vm.dialogUploadImgVisible=$$v},expression:\"dialogUploadImgVisible\"}}),_c('about-dialog',{model:{value:(_vm.aboutDialogVisible),callback:function ($$v) {_vm.aboutDialogVisible=$$v},expression:\"aboutDialogVisible\"}}),_c('insert-form-dialog',{model:{value:(_vm.dialogFormVisible),callback:function ($$v) {_vm.dialogFormVisible=$$v},expression:\"dialogFormVisible\"}}),_c('right-click-menu',{attrs:{\"left\":_vm.mouseLeft,\"top\":_vm.mouseTop},on:{\"menuTick\":_vm.onMenuEvent,\"closeMenu\":_vm.closeRightClickMenu},model:{value:(_vm.rightClickMenuVisible),callback:function ($$v) {_vm.rightClickMenuVisible=$$v},expression:\"rightClickMenuVisible\"}})],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('el-container',{staticClass:\"top is-dark\"},[_c('div',{staticClass:\"left-side\"},[_c('el-tooltip',{attrs:{\"effect\":_vm.effect,\"content\":\"上传图片\",\"placement\":\"bottom-start\"}},[_c('i',{staticClass:\"el-icon-upload\",attrs:{\"size\":\"medium\"},on:{\"click\":function($event){return _vm.$emit('show-dialog-upload-img')}}})]),_c('el-tooltip',{staticClass:\"header__item\",attrs:{\"effect\":_vm.effect,\"content\":\"导出 Markdown 文档\",\"placement\":\"bottom-start\"}},[_c('i',{staticClass:\"el-icon-download\",attrs:{\"size\":\"medium\"},on:{\"click\":function($event){return _vm.$emit('download')}}})]),_c('el-tooltip',{staticClass:\"header__item\",attrs:{\"effect\":_vm.effect,\"content\":\"导出 HTML 页面\",\"placement\":\"bottom-start\"}},[_c('i',{staticClass:\"el-icon-document\",attrs:{\"size\":\"medium\"},on:{\"click\":function($event){return _vm.$emit('export')}}})]),_c('el-tooltip',{staticClass:\"header__item\",attrs:{\"effect\":_vm.effect,\"content\":\"重置样式\",\"placement\":\"bottom-start\"}},[_c('i',{staticClass:\"el-icon-refresh\",attrs:{\"size\":\"medium\"},on:{\"click\":function($event){_vm.showResetConfirm = true}}})]),_c('el-tooltip',{staticClass:\"header__item header__item_last\",attrs:{\"effect\":_vm.effect,\"content\":\"插入表格\",\"placement\":\"bottom-start\"}},[_c('i',{staticClass:\"el-icon-s-grid\",attrs:{\"size\":\"medium\"},on:{\"click\":function($event){return _vm.$emit('show-dialog-form')}}})]),_c('el-select',{attrs:{\"size\":\"mini\",\"placeholder\":\"选择字体\",\"clearable\":\"\"},on:{\"change\":_vm.fontChanged},model:{value:(_vm.selectFont),callback:function ($$v) {_vm.selectFont=$$v},expression:\"selectFont\"}},_vm._l((_vm.config.builtinFonts),function(font){return _c('el-option',{key:font.value,style:({ fontFamily: font.value }),attrs:{\"label\":font.label,\"value\":font.value}},[_c('span',{staticClass:\"select-item-left\"},[_vm._v(_vm._s(font.label))]),_c('span',{staticClass:\"select-item-right\"},[_vm._v(\"Abc\")])])}),1),_c('el-select',{attrs:{\"size\":\"mini\",\"placeholder\":\"选择段落字号\",\"clearable\":\"\"},on:{\"change\":_vm.sizeChanged},model:{value:(_vm.selectSize),callback:function ($$v) {_vm.selectSize=$$v},expression:\"selectSize\"}},_vm._l((_vm.config.sizeOption),function(size){return _c('el-option',{key:size.value,attrs:{\"label\":size.label,\"value\":size.value}},[_c('span',{staticClass:\"select-item-left\"},[_vm._v(_vm._s(size.label))]),_c('span',{staticClass:\"select-item-right\"},[_vm._v(_vm._s(size.desc))])])}),1),_c('el-select',{attrs:{\"size\":\"mini\",\"placeholder\":\"选择颜色\",\"clearable\":\"\"},on:{\"change\":_vm.colorChanged},model:{value:(_vm.selectColor),callback:function ($$v) {_vm.selectColor=$$v},expression:\"selectColor\"}},_vm._l((_vm.config.colorOption),function(color){return _c('el-option',{key:color.value,attrs:{\"label\":color.label,\"value\":color.value}},[_c('span',{staticClass:\"select-item-left\"},[_vm._v(_vm._s(color.label))]),_c('span',{staticClass:\"select-item-right\"},[_vm._v(_vm._s(color.desc))])])}),1),_c('el-tooltip',{attrs:{\"content\":\"自定义颜色\",\"effect\":_vm.effect,\"placement\":\"top\"}},[_c('el-color-picker',{attrs:{\"size\":\"mini\",\"show-alpha\":\"\"},on:{\"change\":_vm.colorChanged},model:{value:(_vm.selectColor),callback:function ($$v) {_vm.selectColor=$$v},expression:\"selectColor\"}})],1),_c('el-tooltip',{attrs:{\"content\":\"微信外链自动转为文末引用\",\"effect\":_vm.effect,\"placement\":\"top\"}},[_c('el-switch',{staticClass:\"header__switch\",attrs:{\"active-color\":\"#67c23a\",\"inactive-color\":\"#dcdfe6\"},on:{\"change\":_vm.statusChanged},model:{value:(_vm.citeStatus),callback:function ($$v) {_vm.citeStatus=$$v},expression:\"citeStatus\"}})],1)],1),_c('div',{staticClass:\"right-side\"},[_c('el-tooltip',{staticClass:\"item\",attrs:{\"effect\":_vm.effect,\"content\":\"自定义CSS样式\",\"placement\":\"left\"}},[_c('el-button',{attrs:{\"type\":_vm.btnType,\"plain\":\"\",\"size\":\"medium\",\"icon\":\"el-icon-setting\"},on:{\"click\":_vm.customStyle}})],1),_c('el-button',{attrs:{\"type\":_vm.btnType,\"plain\":\"\",\"size\":\"medium\",\"placement\":\"bottom-start\"},on:{\"click\":_vm.copy}},[_vm._v(\"复制\")]),_c('el-button',{staticClass:\"about\",attrs:{\"type\":_vm.btnType,\"plain\":\"\",\"size\":\"medium\"},on:{\"click\":function($event){return _vm.$emit('show-about-dialog')}}},[_vm._v(\"关于\")]),_c('el-tooltip',{attrs:{\"content\":_vm.btnContent,\"effect\":_vm.effect,\"placement\":\"bottom-start\"}},[(_vm.nightMode)?_c('div',{staticClass:\"mode__switch mode__switch_black\",on:{\"click\":_vm.themeChanged}}):_c('div',{staticClass:\"mode__switch\",on:{\"click\":_vm.themeChanged}})])],1),_c('resetDialog',{attrs:{\"showResetConfirm\":_vm.showResetConfirm},on:{\"confirm\":_vm.confirmReset,\"close\":_vm.cancelReset}})],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","import juice from \"juice\";\n\nexport function solveWeChatImage() {\n const clipboardDiv = document.getElementById(\"output\");\n const images = clipboardDiv.getElementsByTagName(\"img\");\n for (let i = 0; i < images.length; i++) {\n const image = images[i];\n const width = image.getAttribute(\"width\");\n const height = image.getAttribute(\"height\");\n image.removeAttribute(\"width\");\n image.removeAttribute(\"height\");\n image.style.width = width;\n image.style.height = height;\n }\n}\nexport function solveHtml() {\n const element = document.getElementById(\"output-wrapper\");\n let html = element.innerHTML;\n let res = \"\";\n res = juice.inlineContent(html, {\n inlinePseudoElements: true,\n preserveImportant: true,\n });\n return res;\n}\n","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('el-dialog',{staticClass:\"reset__dialog\",attrs:{\"title\":\"提示\",\"visible\":_vm.showResetConfirm},on:{\"close\":function($event){return _vm.$emit('close')}}},[_c('div',{staticClass:\"text\"},[_vm._v(\"此操作将丢失本地自定义样式，是否继续?\")]),_c('div',{staticClass:\"dialog-footer\",attrs:{\"slot\":\"footer\"},slot:\"footer\"},[_c('el-button',{attrs:{\"type\":_vm.btnType,\"plain\":\"\"},on:{\"click\":function($event){return _vm.$emit('close')}}},[_vm._v(\"取 消\")]),_c('el-button',{attrs:{\"type\":_vm.btnType,\"plain\":\"\"},on:{\"click\":function($event){return _vm.$emit('confirm')}}},[_vm._v(\"确 定\")])],1)])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\n 此操作将丢失本地自定义样式，是否继续?
\n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {{ font.label }}\n Abc\n \n \n \n \n {{ size.label }}\n {{ size.desc }}\n \n \n \n \n {{ color.label }}\n {{ color.desc }}\n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n 复制 \n 关于 \n \n
\n \n \n \n \n
\n 一款高度简洁的微信 Markdown 编辑器
\n\n
\n \n \n扫码关注我的公众号，原创技术文章第一时间推送！
\n| \n | \n \n
\n 将图片拖到此处，或\n 点击上传\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n\n\n\n\n\n\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CodemirrorEditor.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CodemirrorEditor.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./CodemirrorEditor.vue?vue&type=template&id=741a46cf&scoped=true&\"\nimport script from \"./CodemirrorEditor.vue?vue&type=script&lang=js&\"\nexport * from \"./CodemirrorEditor.vue?vue&type=script&lang=js&\"\nimport style0 from \"./CodemirrorEditor.vue?vue&type=style&index=0&id=741a46cf&lang=less&scoped=true&\"\nimport style1 from \"./CodemirrorEditor.vue?vue&type=style&index=1&id=741a46cf&lang=less&scoped=true&\"\nimport style2 from \"./CodemirrorEditor.vue?vue&type=style&index=2&id=741a46cf&lang=less&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"741a46cf\",\n null\n \n)\n\nexport default component.exports","\n \n \n
\n \n \n \n \n 正在生成\n
\n