前景:Vue中 用codeMirror显示日志。没有报错。但是内容就不高亮。
原因:基本大概率的原因就是少引入了文件。
我是参考现有项目中一个文件做的。结果这个文件的引入方法(我认为不太好)它看起来显示正常,里面引入了三个文件。我就复制了三个,结果在我的页面就不行。后来对比看发现其中引入了另外一个组件,而在这个组件中引入了相关的文件,所以这个文件显示正常。
总结:应该细心看下官方文档如何用。只是参考例子,可能就会出现我这种低级错误。很浪费时间,找了很久,感觉很奇怪的事情。
codeMirror使用说明:
//以下是基础引入 codemirror 需要引入的文件
import CodeMirror from "codemirror";
import "codemirror/lib/codemirror.css";
//另外我们还需要引入对应像渲染到页面的语言文件以及主题来达到关键字高亮以及整体编辑器的渲染效果(主题是非必选项)
//theme 和 mode 跟设置的配置项一样即可
import "codemirror/theme/ambiance.css";
import "codemirror/mode/python/python";
// 页面
<textarea ref="mycode" class="code"></textarea>
// script
this.editor = CodeMirror.fromTextArea(this.$refs.mycode, {
mode: "python", // 这里对应的上面引入的文件
theme: "ambiance", // 这里对应的上面引入的文件
// smartIndent: true,
// lineNumbers: true,
lineWrapping: true,
styleActiveLine: true,
});
this.editor.setOption("readOnly", "nocursor");
// 设置值
this.logs=['111','222']
this.editor.setValue(this.logs.join("\r\n"));
this.editor.execCommand("goDocEnd");
网友评论