<span style="font-size:14px; text-align:center;">點(diǎn)擊上方“</span><span style="font-size:14px;font-weight:bolder">青年碼農(nóng)</span><span style="font-size:14px">”關(guān)注</span><p><span style="font-size:14px">回復(fù)“</span><span style="font-size:14px;font-weight:bolder">特效源碼</span><span style="font-size:14px">”可獲取各種資料</span></p><blockquote><p>CodeMirror是一個用 JavaScript 為瀏覽器實(shí)現(xiàn)的通用文本編輯器臼膏。它專門用于編輯代碼，并帶有多種語言模式和插件 忙上，可實(shí)現(xiàn)更高級的編輯功能。</p></blockquote><p><span style="font-size:15px">本教程是基于vue2實(shí)現(xiàn)集成</span><span style="font-size:15px">运授，使用vue-codemirror插件</span><span/></p><p><strong><span style="font-size:16px">1. 安裝
</span></strong></p><span style="font-size:inherit"># npm</span>
npm <span style="font-size:inherit">install</span> vue-codemirror -S
<span style="font-size:inherit"># yarn</span>
yarn <span style="font-size:inherit">add</span> vue-codemirror -S
<p><strong><span style="font-size:16px">2. 新建組件并引入</span></strong></p><span style="font-size:inherit"><<span style="font-size:inherit">template</span>></span>
<span style="font-size:inherit"><<span style="font-size:inherit">div</span>></span>
<span style="font-size:inherit"><<span style="font-size:inherit">codemirror</span>
<span style="font-size:inherit">ref</span>=<span style="font-size:inherit">"cm"</span>
<span style="font-size:inherit">v-model</span>=<span style="font-size:inherit">"value"</span>
<span style="font-size:inherit">:options</span>=<span style="font-size:inherit">"options"</span>
@<span style="font-size:inherit">input</span>=<span style="font-size:inherit">"inputChange"</span>
></span><span style="font-size:inherit"></<span style="font-size:inherit">codemirror</span>></span>
<span style="font-size:inherit"></<span style="font-size:inherit">div</span>></span>
<span style="font-size:inherit"></<span style="font-size:inherit">template</span>></span>

<span style="font-size:inherit"><<span style="font-size:inherit">script</span>></span><span style="font-size:inherit">
<span style="font-size:inherit">// 全局引入vue-codemirror</span>
<span style="font-size:inherit">import</span> { codemirror } <span style="font-size:inherit">from</span> <span style="font-size:inherit">"vue-codemirror"</span>;
<span style="font-size:inherit">// 引入css文件</span>
<span style="font-size:inherit">import</span> <span style="font-size:inherit">"codemirror/lib/codemirror.css"</span>;
<span style="font-size:inherit">// 引入主題 可多個</span>
<span style="font-size:inherit">import</span> <span style="font-size:inherit">"codemirror/theme/ayu-mirage.css"</span>;
<span style="font-size:inherit">// 引入語言模式 可多個</span>
<span style="font-size:inherit">import</span> <span style="font-size:inherit">"codemirror/mode/sql/sql.js"</span>;
<span style="font-size:inherit">export</span> <span style="font-size:inherit">default</span> {
<span style="font-size:inherit">name</span>: <span style="font-size:inherit">"codemirror"</span>,
<span style="font-size:inherit">components</span>: { codemirror },
<span style="font-size:inherit">props</span>: {
<span style="font-size:inherit">value</span>: {
<span style="font-size:inherit">default</span>: <span style="font-size:inherit">""</span>
}
},
data() {
<span style="font-size:inherit">return</span> {
<span style="font-size:inherit">options</span>: {
<span style="font-size:inherit">// 語言及語法模式</span>
mode: <span style="font-size:inherit">"text/x-sql"</span>,
<span style="font-size:inherit">// 主題</span>
theme: <span style="font-size:inherit">"ayu-mirage"</span>,
<span style="font-size:inherit">// 顯示函數(shù)</span>
line: <span style="font-size:inherit">true</span>,
<span style="font-size:inherit">lineNumbers</span>: <span style="font-size:inherit">true</span>,
<span style="font-size:inherit">// 軟換行</span>
lineWrapping: <span style="font-size:inherit">true</span>,
<span style="font-size:inherit">// tab寬度</span>
tabSize: <span style="font-size:inherit">4</span>
}
};
},
<span style="font-size:inherit">methods</span>: {
inputChange(content) {
<span style="font-size:inherit">this</span>.$nextTick(<span style="font-size:inherit"><span style="font-size:inherit">()</span> =></span> {
<span style="font-size:inherit">console</span>.log(<span style="font-size:inherit">"content:"</span> + content);
});
}
}
};
</span><span style="font-size:inherit"></<span style="font-size:inherit">script</span>></span>
<p><span style="font-size:15px">主題引入多個抛猖，我們可以實(shí)現(xiàn)動態(tài)切換主題茎匠，<span style="font-size:15px">語言模式支持多種語言。</span></span></p><p><span style="font-size:15px">options支持的屬性很多搁廓，上面的例子只使用了幾個常用的屬性引颈，更多屬性請參照官方文檔</span></p><blockquote><p>https://codemirror.net/doc/manual.html#config</p></blockquote><p><span style="font-size:15px">關(guān)于如何切換主題和語言模式，通過npm安裝的<span style="font-size:15px">vue-codem</span><span style="font-size:15px">irror插件境蜕，可以在node_modules中找到codemirror文件夾蝙场，你想要的都在這里</span></span></p><p><span style="font-size:15px"><span style="font-size:15px"/></span></p><div class="image-package"><img src="https://upload-images.jianshu.io/upload_images/8877503-64e2aac2d9bb994b.jpeg" img-data="{"format":"jpeg","size":32469,"height":600,"width":1046}" class="uploaded-img" style="min-height:200px;min-width:200px;" width="auto" height="auto"/>
</div><p><span style="font-size:15px">只需要引入對應(yīng)的文件，在options中切換即可粱年。</span></p><p><strong><span style="font-size:16px">3.最終效果</span></strong>
</p><div class="image-package"><img src="https://upload-images.jianshu.io/upload_images/8877503-a292420003c5b4fd.jpeg" img-data="{"format":"jpeg","size":18775,"height":586,"width":1044}" class="uploaded-img" style="min-height:200px;min-width:200px;" width="auto" height="auto"/>
</div><p><span style="font-size:15px"/>
</p>