vue项目页面嵌入代码块vue-prism-editor的实现


Posted in Javascript onOctober 30, 2020

需求:

vue项目页面嵌入代码块vue-prism-editor的实现

1. 可输入代码,并且代码语法高亮
2. 支持编辑和不可编辑模式
3. 提交到后端到代码内容为字符串格式

实现

在gitbug上找到vue-prism-editor,可以满足以上需求。

使用

1.安装vue-prism-editor

npm install vue-prism-editor

由于vue-prism-editor需要依赖 prismjs,所以还需要安装prismjs

npm install prismjs

2.在需要使用vue-prism-editor的组件中引入

import { PrismEditor } from "vue-prism-editor";
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere

// import highlighting library (you can use any library you want just return html string)
import { highlight, languages } from "prismjs/components/prism-core";
import "prismjs/components/prism-clike";
import "prismjs/components/prism-javascript";
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles

3.html代码

<prism-editor
 class="my-editor height-300"
 v-model="code"
 :highlight="highlighter"
 :line-numbers="lineNumbers"
></prism-editor>

code----为需要高亮显示的代码内容
highlighter----定义在methods中的一个方法,用于把code高亮显示
lineNumbers----是否可编辑标识

4.js代码

export default {
 components: {
 PrismEditor
 },
 data: () => ({
 code: 'console.log("Hello World")',
 lineNumbers: true, // true为编辑模式, false只展示不可编辑
 }),
 methods: {
 highlighter(code) {
 return highlight(code, languages.js); //returns html
 }
 }
};

5.css代码

<style lang="scss">
/* 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: 300px;
}
</style>

注意: css样式必写,不然编辑器没有样式,只是纯白页面展示
“height-300” 是给编辑器设置高度的,高度可自行设置,也可以不设置,这个样式非必需

到这里,功能基本就实现了。
但是在过程中遇到一些问题,这里也一并总结。

问题

1.如果仅安装vue-prism-editor,没有安装prismjs,会报以下错误,npm install prismjs即可

vue项目页面嵌入代码块vue-prism-editor的实现

2.如果报错中有提示升级或者安装ajv或者vue2.6.X版本,根据提示安装即可

npm install ajv@^6.9.1
npm install vue@^2.6.11

个人理解,如果ajv和vue版本过低,可能会导致vue-prism-editor依赖的相关东西安装不上,建议升级完ajv和vue之后,再重新安装vue-prism-editor和prismjs.

3.vue与vue-template-compiler版本不一致

vue项目页面嵌入代码块vue-prism-editor的实现

卸载低版本vue-template-compiler

npm uninstall vue-template-compiler

然后安装跟vue同样版本的vue-template-compiler

npm install vue-template-compiler@2.6.11

到此这篇关于vue项目页面嵌入代码块vue-prism-editor的文章就介绍到这了,更多相关vue项目页面嵌入代码块内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript中巧用“闭包”实现程序的暂停执行功能
Apr 04 Javascript
jQuery 图片切换插件(代码比较少)
May 07 Javascript
js中onload与onunload的使用示例
Aug 25 Javascript
jQuery 三击事件实现代码
Sep 11 Javascript
node.js微信公众平台开发教程
Mar 04 Javascript
angular+bootstrap的双向数据绑定实例
Mar 03 Javascript
jquery easyui如何实现格式化列
Jul 30 jQuery
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 Javascript
详解webpack打包第三方类库的正确姿势
Oct 20 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
Feb 01 Javascript
ES6 Symbol数据类型的应用实例分析
Jun 26 Javascript
JAVA面试题 static关键字详解
Jul 16 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
Oct 30 #Javascript
vue2.0 watch里面的 deep和immediate用法说明
Oct 30 #Javascript
JavaScript实现轮播图效果
Oct 30 #Javascript
vue组件添加事件@click.native操作
Oct 30 #Javascript
解决removeEventListener 无法清除监听的问题
Oct 30 #Javascript
详解 javascript对象创建模式
Oct 30 #Javascript
ES6中的Javascript解构的实现
Oct 30 #Javascript
You might like
基于Discuz security.inc.php代码的深入分析
2013/06/03 PHP
PHP中STDCLASS用法实例分析
2016/11/11 PHP
php指定长度分割字符串str_split函数用法示例
2017/01/30 PHP
Laravel 修改默认日志文件名称和位置的例子
2019/10/17 PHP
一个javascript参数的小问题
2008/03/02 Javascript
判断用户的在线状态 onbeforeunload事件
2011/03/05 Javascript
键盘KeyCode值列表汇总
2013/11/26 Javascript
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
2013/12/30 Javascript
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
ExtJs动态生成treepanel的Json格式
2015/07/19 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
利用CSS3在Angular中实现动画
2016/01/15 Javascript
jquery单击事件和双击事件冲突解决方案
2016/03/02 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
2016/03/25 Javascript
Vue.JS入门教程之处理表单
2016/12/01 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
2017/01/11 Javascript
Webpack devServer中的 proxy 实现跨域的解决
2018/06/15 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
2019/09/26 Javascript
javascript 易错知识点实例小结
2020/04/25 Javascript
python3中int(整型)的使用教程
2017/03/23 Python
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
tensorflow的计算图总结
2020/01/12 Python
tensorflow实现训练变量checkpoint的保存与读取
2020/02/10 Python
python os.listdir()乱码解决方案
2021/01/31 Python
python爬虫利用代理池更换IP的方法步骤
2021/02/21 Python
localstorage和sessionstorage使用记录(推荐)
2017/05/23 HTML / CSS
简历中自我评价怎么写
2014/02/12 职场文书
法律六进活动方案
2014/03/13 职场文书
关爱女孩行动实施方案
2014/03/13 职场文书
哈姆雷特读书笔记
2015/06/29 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书
最新的离婚协议书范本!
2019/07/02 职场文书
导游词之河北邯郸
2019/09/12 职场文书
css display table 自适应高度、宽度问题的解决
2021/05/07 HTML / CSS
如何避免mysql启动时错误及sock文件作用分析
2022/01/22 MySQL
SpringBoot使用ip2region获取地理位置信息的方法
2022/06/21 Java/Android