- 首页
- 前端开发
- 当我重新加载服务器时，将 CodeMirror 与 Vuejs/Nuxtjs 一起使用会导致错误“CodeMirror"未定义
当我重新加载服务器时，将 CodeMirror 与 Vuejs/Nuxtjs 一起使用会导致错误“CodeMirror"未定义
[英] Using CodeMirror with Vuejs/Nuxtjs results in error 'CodeMirror' is not defined when I the server reloads
本文介绍了当我重新加载服务器时，将 CodeMirror 与 Vuejs/Nuxtjs 一起使用会导致错误“CodeMirror"未定义的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在将 CodeMirror 实施到我的 Nuxtjs/Vuejs 应用程序中的文本区域之一.我想根据 XML 美化 textarea.
有时 CodeMirror 可以完美运行，但有时当我重新加载页面时会出现错误:
Test.vue33:18 错误CodeMirror"未定义
所以最初它工作得很好但是当我尝试对项目中的任何文件进行一些更改并且当 Nuxtjs/Vuejs 服务器再次重新加载以合并新更改时，我收到错误 错误 'CodeMirror' 未定义
我不明白为什么我有时会收到错误消息，而其他时候却没有.由于我已经添加了所需的 CDN 并完成了各种答案和文章中提到的步骤，我希望它根本不会抛出错误.有人可以帮我解决这个问题吗?
步骤如下:
- 将 CDN 添加到我的
nuxt-config.js:脚本:
脚本:[{src:文本/javascript"，源代码:https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.js"},{src:文本/javascript"，源代码:https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/mode/xml/xml.min.js"}],
CSS:
<代码>{rel:样式表"，href:https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/codemirror.min.css"}以下是我的Test.vue:
<div><div class="row"><div class="col-md-5"><div class="row"><div class="col-md-12"><文本区域id=测试"v-model="xmlInput"类=表单控制"占位符=XML文档"拼写检查=假"数据语法=假"@input="convertToJSON()";/>
<脚本>导出默认{数据 () {返回 {xml 输入:''}},方法: {convertToJSON () {console.log('ONE')const cm = CodeMirror.fromTextArea(document.getElementById('test'), {模式:'应用程序/xml'，行号:真，匹配括号:真实，styleActiveLine: 真,换行:真，标签大小:2，值:'console.log('Hello, World');'})cm.setSize(500, 500)}}}<样式范围>文本区域{高度:78vh；空白:nowrap；调整大小:两者；}::-webkit-input-placeholder {颜色:#f1948a；文本对齐:居中；}</风格>
有人可以帮我解决这个问题吗?我在这里做错了什么?任何建议将不胜感激.提前致谢.
用于重新创建问题的沙箱:
解决方案
您可以执行以下操作以使其正常工作.
- 首先，您不必在每次输入更改时重新初始化 codemirror 编辑器
@input="convertToJSON()" - 您可以在组件安装时初始化编辑器.
代码
<div><div class="row">XML 数据<div class="col-md-5"><div class="row"><div class="col-md-12"><文本区域id=测试"v-model="xmlInput"类=表单控制"占位符=XML文档"拼写检查=假"数据语法=假"/>
export default {数据() {返回 {xmlInput: "",};},安装(){//https://stackoverflow.com/questions/53981928/using-codemirror-cannot-set-property-modeoption-of-undefinedconst editor = document.getElementById("test");editor.value = "";/** eslint 下一行 */const cm = CodeMirror.fromTextArea(editor, {模式:应用程序/xml"，行号:真，匹配括号:真实，styleActiveLine: 真,换行:真，标签大小:2，value: 'console.log('Hello, World');',});cm.setSize(500, 500);},};
这是有效的代码和框链接 - https:///codesandbox.io/s/falling-cdn-5o0t6?file=/pages/index.vue
如果你想使用 codemirror npm 模块，这里是工作代码和框的链接 - https://codesandbox.io/s/boring-water-g14zd?file=/pages/index.vue
I am implementing the CodeMirror to one of the textarea in my Nuxtjs/Vuejs application. I would like to beautify the textarea as per the XML.
Sometimes the CodeMirror works perfectly but sometimes when I reload the page I get the error:
Test.vue
33:18 error 'CodeMirror' is not defined no-under
So initially it works perfectly but when I try to make some changes to any file in the project and when the Nuxtjs/Vuejs server reloads again to incorporate the new changes then I get the error error 'CodeMirror' is not defined
I am not understanding why do I get the error sometimes and I do not get it some other time. As I have added the required CDN and done the steps mentioned in various answers and articles, I would expect that it does not throw the error at all. Can someone please help me with this issue?
Steps followed:
- Added the CDN to my
nuxt-config.js:
Scripts:
script: [
{
src:"text/javascript",
src:"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.js"
},
{
src:"text/javascript",
src:"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/mode/xml/xml.min.js"
}
],
CSS:
{
rel: "stylesheet",
href:"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/codemirror.min.css"
}
Following is my Test.vue:
<template>
<div>
<div class="row">
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
<textarea
id="test"
v-model="xmlInput"
class="form-control"
placeholder="XML Document"
spellcheck="false"
data-gramm="false"
@input="convertToJSON()"
/>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
xmlInput: ''
}
},
methods: {
convertToJSON () {
console.log('ONE')
const cm = CodeMirror.fromTextArea(document.getElementById('test'), {
mode: 'application/xml',
lineNumbers: true,
matchBrackets: true,
styleActiveLine: true,
lineWrapping: true,
tabSize: 2,
value: 'console.log("Hello, World");'
})
cm.setSize(500, 500)
}
}
}
</script>
<style scoped>
textarea {
height: 78vh;
white-space: nowrap;
resize: both;
}
::-webkit-input-placeholder {
color: #f1948a;
text-align: center;
}
</style>
Can someone please help me out with this issue? What am I doing wrong here? Any suggestions would be really appreciated. Thanks in advance.
Sandbox for re-creating issue:
https://codesandbox.io/s/boring-water-g14zd?file=/pages/index.vue
Error in Sandbox:
解决方案
You can do the following things to make it work.
- First, you don't have to re-initialize the codemirror editor on each input change
@input="convertToJSON()"
- You may initialize the editor when the component mounts.
Code
<template>
<div>
<div class="row">
XML Dat
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
<textarea
id="test"
v-model="xmlInput"
class="form-control"
placeholder="XML Document"
spellcheck="false"
data-gramm="false"
/>
</div>
</div>
</div>
</div>
</div>
</template>
export default {
data() {
return {
xmlInput: "",
};
},
mounted() {
// https://stackoverflow.com/questions/53981928/using-codemirror-cannot-set-property-modeoption-of-undefined
const editor = document.getElementById("test");
editor.value = "";
/** eslint-next-line */
const cm = CodeMirror.fromTextArea(editor, {
mode: "application/xml",
lineNumbers: true,
matchBrackets: true,
styleActiveLine: true,
lineWrapping: true,
tabSize: 2,
value: 'console.log("Hello, World");',
});
cm.setSize(500, 500);
},
};
Here is the working codesandbox link - https://codesandbox.io/s/falling-cdn-5o0t6?file=/pages/index.vue
If you want to use codemirror npm module, here is the link for the working codesandbox for that - https://codesandbox.io/s/boring-water-g14zd?file=/pages/index.vue
这篇关于当我重新加载服务器时，将 CodeMirror 与 Vuejs/Nuxtjs 一起使用会导致错误“CodeMirror"未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
