前端vue中实现嵌入代码编辑器
最近遇到需求,需要将代码在前端进行展示编辑,但是直接在文本展示会出现代码不整齐情况,格式化就需要嵌入代码编辑器。
老规矩废话不多说,上代码!!!!!!!!!!!
一、使用 vue-prism-editor 插件实现
- 安装
npm i prismjs vue-prism-editor -S
// 或者
cnpm i prismjs vue-prism-editor
//或者
yarn add prismjs vue-prism-editor
- 代码实现
HelloWorld
/* required class */
.my-editor {
background: #2d2d2d;
color: #ccc;
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
font-size: 14px;
line-height: 1.5;
padding: 5px;
}
/* optional */
.prism-editor__textarea:focus {
outline: none;
}
/* not required: */
.height-300 {
height: 1000px;
width: 1000px;
}
- 效果预览
二、使用 vue2-ace-editor 插件实现
- 安装
npm i vue2-ace-editor -S
// 或者
cnpm i vue2-ace-editor -S
- 代码实现
.codeEditBox {
width: 100%;
height: 200px;
}
- vue2-ace-editor相比于vue-prism-editor可以实现代码的提示功能
- 效果预览