vue MirrorCode内容背景设置codemirror.markText
// codemirror引用<codemirrorref="mycode":options="cmOptions"@changes="changeContent"class="codemirror-area"></codemirror>import { codemirror } from "vue-codemirror";import "code..
·
// codemirror引用
<codemirror
ref="mycode"
:options="cmOptions"
@changes="changeContent"
class="codemirror-area"
></codemirror>
import { codemirror } from "vue-codemirror";
import "codemirror/lib/codemirror.css";
import "codemirror/theme/base16-light.css"; // 这里引入的是主题样式
import "codemirror/mode/javascript/javascript.js"; // 这里引入的模式的js
export default {
components: { codemirror },
data() {
return {
content :''
cmOptions: {
lineWrapping: true,
tabSize: 4, // Tab键空格数
mode: "text/javascript", // 模式
theme: "base16-light", // 主题
line: true,
// autofocus: true,//首次载入自动聚焦
},
};
}
methods:{
insert(row) {
//获取codemirror光标位置
const pos1 = this.$refs.mycode.codemirror.getCursor()
const pos2 = {};
pos2.line = pos1.line;
pos2.ch = pos1.ch;
//制作标签dom(颜色样式自行设置)
var dom = document.createElement("span");
dom.className = "cm-field";
dom.innerHTML = row.name;
const bookMark = row.name;
const endPos = { line: pos2.line, ch: pos2.ch + bookMark.length };
this.$refs.mycode.codemirror.replaceRange(bookMark, pos2);//先插入字符串
//再对插入字符串进行标签制定(其实就是在codemirror中动态添加标签)
this.$refs.mycode.codemirror.markText(pos2, endPos, {
replacedWith: dom,
});
this.content = this.$refs.mycode.codemirror.getValue();//获取codemirror内容
}
}
}
<style lang="scss" scoped>
::v-deep {
.cm-field {
background-image: linear-gradient(-117deg, #90dcd4, #7cdfc2);
}
.cm-current-field,
.cm-field {
display: inline-block;
height: 22px;
line-height: 22px;
color: #fff;
margin: 0 3px;
border-radius: 3px;
padding: 0 8px;
font-size: 13px;
}
.cm-delField {
display: inline-block;
height: 22px;
line-height: 22px;
background: #f26245;
color: #fff;
margin: 0 3px;
border-radius: 3px;
padding: 0 8px;
font-size: 13px;
}
.CodeMirror-widget {
height: 28px;
line-height: 28px;
}
}
大致显示内容截图,
笔者只是初步理解codemirror操作,具体细节可能还未能考虑周到,如有建议欢迎留言~
更多推荐
已为社区贡献1条内容
所有评论(0)