vue实现浏览器代码在线编辑预览

效果图如下：

右边可输入代码，左边可时时查看效果

实现如下

参照以下 CodeSandbox 演示

Vue Antd Template

使用 codeopen.vue 组件：

<!-- slug是codeopen上对应的url  tab是需要显示的tab -->
<codeopen title="Conditional rendering" slug="oNXdbpB" tab="js,result" />

codeopen.vue 组件：

<template><pclass="codepen":data-theme-id="theme":data-preview="preview || null":data-editable="editable || null":data-height="height":data-default-tab="tab":data-user="user":data-slug-hash="slug":data-pen-title="title":data-embed-version="version":style="`height: ${height}px`"><span>See the Pen <a :href="href">{{ title }}</a> by {{ name || user }} (<a:href="`https://codepen.io/${user}`">@{{ user }}</a>) on <a href="https://codepen.io">CodePen</a>.</span></p>
</template><script>
export default {props: {title: {type: String,default: null,required: true,},slug: {type: String,default: null,required: true,},tab: {type: String,default: "result",},team: {type: Boolean,default: true,},user: {type: String,default: "Vue",},name: {type: String,default: null,},height: {type: Number,default: 300,},theme: {type: String,default: "39028",},preview: {type: Boolean,default: true,},editable: {type: Boolean,default: true,},version: {type: String,default: null,},},mounted() {const codepenScript = document.createElement("script");codepenScript.setAttribute("src","https://static.codepen.io/assets/embed/ei.js");codepenScript.async = true;this.$el.appendChild(codepenScript);},computed: {href() {return `https://codepen.io/${this.team ? "team" : ""}${this.user}/pen/${this.slug}`;},},
};
</script><style lang="scss">
.codepen {box-sizing: border-box;display: flex;align-items: center;justify-content: center;border: 2px solid;margin: 1em 0;padding: 1em;
}
</style>

vue实现浏览器代码在线编辑预览相关推荐

厉害了，手把手教你搭建一个代码在线编辑预览工具
点击下方"前端开发博客",选择"设为星标" 回复"2"加入前端群简介大家好,我是一个闲着没事热衷于重复造轮子的不知名前端,今天给大家带来 ...
手把手教你快速搭建一个代码在线编辑预览工具
简介大家好,今天我跟大家分享的是一个代码在线编辑预览工具的实现教程,手把手教你完成这样一个项目. 目前这类工具使用很广泛,常见于各种文档网站及代码分享场景,相关工具也比较多,如codepen.jsr ...
搭建一个代码在线编辑预览工具
本文主要介绍的是第二类其中的一种实现方式,完全不依赖于后端,所有逻辑都在前端完成,实现起来相当简单,使用的是vue3全家桶来开发,使用其他框架也完全可以. ps.在本文基础上笔者开发了一个完整的线上工 ...
用JAVA如何实现word文档在线编辑预览的功能？
免费方案: ①采用dsoframer. dsoframer是微软提供一款开源的用于在线编辑.调用Word. Excel .PowerPoint等的ActiveX控件.缺点:只支持IE浏览器,由于dso ...
部署Office Web Apps Server 实现office在线编辑预览，office-online
提示:此版本为旧版最新版本请访问部署Office Online Server服务一:准备工作: 1.两台Windows机器我用的是[Windows Server 2012 r2]可以找度娘要下 2. ...
部署Office Online Server服务实现在线编辑预览文件
参考博主:https://blog.csdn.net/jiaqu2177/article/details/81945692 一:准备工作: 1.两台Windows机器我用的版本是[cn_windows ...
vue-codemirror实现一个前端代码在线编辑器，可处理 HTML,VUE,JS,CSS代码在线编辑
先找个目录创建一个vue项目例如我们想要项目叫 editor 在终端执行 vue create editor 2和3其实都可以但个人建议最近还是2会更稳定一些在终端执行 npm i code ...
PageOffice实现文件在线安全预览——禁止编辑、下载、复制等
实际应用中,很多时候不仅需要在线编辑文件,还需要在线安全预览文件,要求不能复制.下载.另存到本地等情况.pageoffice可以实现文件在线安全预览,禁止:编辑.复制.粘贴.右键菜单.选择.下载.另存 ...
Vue中使用vue-codemirror插件实现代码在线编辑
场景若依前后端分离版手把手教你本地搭建环境并运行项目: 若依前后端分离版手把手教你本地搭建环境并运行项目_霸道流氓气质的博客-CSDN博客_若依前后端分离在上面的基础上,怎样实现代码在线编辑功能. ...

vue实现浏览器代码在线编辑预览

效果图如下：

实现如下

使用 codeopen.vue 组件：

codeopen.vue 组件：

vue实现浏览器代码在线编辑预览相关推荐

最新文章

热门文章