vue-codemirror实现一个前端代码在线编辑器,可处理 HTML,VUE,JS,CSS代码在线编辑

这篇具有很好参考价值的文章主要介绍了vue-codemirror实现一个前端代码在线编辑器,可处理 HTML,VUE,JS,CSS代码在线编辑。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

先找个目录创建一个vue项目

例如 我们想要项目叫 editor 在终端执行

vue create editor

2和3其实都可以 但个人建议 最近还是2会更稳定一些
vue在线编辑器,javascript,vue.js,前端
在终端执行

npm i codemirror@5 vue-codemirror@4.0.6 @types/codemirror -S

引入依赖包

然后在项目src目录下创建 utils 文件夹 里面创建一个setting.js 参考代码如下

import 'codemirror/lib/codemirror.css'
// require active-line.js
import 'codemirror/addon/selection/active-line.js'
// styleSelectedText
import 'codemirror/addon/selection/mark-selection.js'
// hint
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/sql-hint.js'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/javascript-hint.js'
// highlightSelectionMatches
import 'codemirror/addon/scroll/annotatescrollbar.js'
import 'codemirror/addon/search/matchesonscrollbar.js'
import 'codemirror/addon/search/match-highlighter.js'
// keyMap
import 'codemirror/mode/clike/clike.js'
import 'codemirror/mode/sql/sql.js'
import 'codemirror/addon/edit/matchbrackets.js'
import 'codemirror/addon/comment/comment.js'
import 'codemirror/addon/dialog/dialog.js'
import 'codemirror/addon/dialog/dialog.css'
import 'codemirror/addon/search/searchcursor.js'
import 'codemirror/addon/search/search.js'
import 'codemirror/keymap/sublime.js'
// foldGutter
import 'codemirror/addon/fold/foldgutter.css'
import 'codemirror/addon/fold/brace-fold.js'
import 'codemirror/addon/fold/comment-fold.js'
import 'codemirror/addon/fold/foldcode.js'
import 'codemirror/addon/fold/foldgutter.js'
import 'codemirror/addon/fold/indent-fold.js'
import 'codemirror/addon/fold/markdown-fold.js'
import 'codemirror/addon/fold/xml-fold.js'
// 编辑的主题文件
import 'codemirror/theme/monokai.css'
import 'codemirror/theme/base16-light.css'

然后 这边 调用组件的代码 因为项目也刚创 我直接写 src下的 App.vue上啦

<template>
  <div>
    <select name="selectList" v-model="options.mode">
        <option :value = "'text/html'">HTML</option>
        <option :value = "'text/javascript'">javascript</option>
        <option :value = "'text/css'">css</option>
    </select>
    <codemirror  id="editor" v-model="code" :options="options"></codemirror>
    <button @click = "OutputStructure">输出结构</button>
  </div>
</template>

<script>
import { codemirror } from 'vue-codemirror'
// 核心样式
import 'codemirror/lib/codemirror.css'
// 引入主题后还需要在 options 中指定主题才会生效
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/mode/css/css.js'
import 'codemirror/mode/vue/vue.js'
import './utils/setting.js'

export default {
   components: {
    codemirror
  },
  data () {
    return {
      code: '', // 编辑器绑定的值
      codejava: "",
      // 默认配置
      options: {
        tabSize: 2, // tab
        styleActiveLine: true, // 高亮选中行
        lineNumbers: true, // 显示行号
        styleSelectedText: true,
        line: true,
        foldGutter: true, // 块槽
        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
        highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true }, // 可以启用该选项来突出显示当前选中的内容的所有实例
        mode: 'text/html',
        // hint.js options
        hintOptions: {
          // 当匹配只有一项的时候是否自动补全
          completeSingle: false
        },
        // 快捷键 可提供三种模式 sublime、emacs、vim
        keyMap: 'sublime',
        matchBrackets: true,
        showCursorWhenSelecting: true,
        theme: 'monokai', // 主题
        extraKeys: { 'Ctrl': 'autocomplete' } // 可以用于为编辑器指定额外的键绑定,以及keyMap定义的键绑定
      },
    }
  },
  methods: {
    OutputStructure(){
        console.log(this.code);
    },
  },
  computed: {
    codemirror() {
      return this.$refs.myCm.codemirror
    }
  },
  mounted() {
  }
}
</script>

然后界面就是这样的
vue在线编辑器,javascript,vue.js,前端
现在是一个html模板 我们来写两个div什么的
vue在线编辑器,javascript,vue.js,前端
看着也是非常的舒服
然后我们点击上面的下拉框 切换成 js
vue在线编辑器,javascript,vue.js,前端
写两行
vue在线编辑器,javascript,vue.js,前端
然后切成css
vue在线编辑器,javascript,vue.js,前端
然后点下面的 输出结构 就会将代码打印在控制台上
vue在线编辑器,javascript,vue.js,前端文章来源地址https://www.toymoban.com/news/detail-552831.html

到了这里,关于vue-codemirror实现一个前端代码在线编辑器,可处理 HTML,VUE,JS,CSS代码在线编辑的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端sql语句输入框以及格式化sql语句和sql关键词高亮---sql-formatter、vue-codemirror

    1.下载 2.引入 3.使用 4.遇到的问题 “select * from 表格名称” 这个字符包含了中文,如果进行格式化,就会变成 “select * from 表 格 名 称” 中文之前添加了空格 解决方法:使用正则去掉空格 使用正侧格式化去掉空格我尝试的几种方法 方法一 方法二 方法三(最终版本) 5.优化

    2024年02月02日
    浏览(44)
  • Vue3项目中在线编辑组件,codemirror-editor-vue3

    #安装 #组件中使用 #如果想要更换不同的主题色, 只需要在组件中引入你要使用的主题色的css文件,然后配置theme的名字为引入的css文件名称。 https://codemirror.net/5/theme/   #效果  

    2024年02月05日
    浏览(38)
  • vue3中使用codemirror6增加代码提示功能

    1、安装依赖 // 安装codemirror、语言包、主题、自动补全 本人安装的版本是 2、创建编辑器

    2024年02月15日
    浏览(45)
  • vue3代码编辑器组件codemirror-editor-vue3

    官方文档:https://github.com/RennCheung/codemirror-editor-vue3 国内镜像:https://renncheung.github.io/codemirror-editor-vue3/zh-CN/guide/getting-started 参考文档:https://codemirror.net/5/mode/index.html 点击参考文档,选择语言并点击在文章最后找到mode的格式 在配置项中修改mode,并引入对应语言js 如使用pyt

    2024年02月14日
    浏览(39)
  • 前端实现在线预览、编辑Office文档(vue版)

    使用插件:Spire.Cloud在线Office文档编辑器(官网:冰蓝科技在线编辑) 无需安装,在 index.html 里面引入即可 重点:支持在线创建、编辑、保存和打印 Office (Word / Excel / PPT) 文档 助您轻松实现高效率、无纸化办公 使用浏览器打开:https://cloud.e-iceblue.cn/,点击右上角头像注册/登

    2024年02月12日
    浏览(65)
  • 分享一个基于springboot+vue的在线租房与招聘平台系统代码 房屋租赁系统

    💕💕 作者:计算机源码社 💕💕 个人简介:本人七年开发经验,擅长Java、Python、PHP、.NET、微信小程序、爬虫、大数据等,大家有这一块的问题可以一起交流! 💕💕 学习资料、程序开发、技术解答、文档报告 💕💕Java项目 💕💕微信小程序项目 💕💕Python项目 💕💕A

    2024年02月09日
    浏览(40)
  • 前端js react vue怎么实现在线预览doc文档

    先说结论: 目前在纯前端层面没有很好的方案,基本都需要服务端的介入。 优点 :简单易用,无需配置 缺点 :文档需要支持外网访问,且文档会是公开可见的,所以对于一些内部敏感的文档来说,这个显然是不可行的。 需要后端介入配合 onlyoffice地址 这个也要先在服务器

    2024年02月15日
    浏览(84)
  • Vue2 集成 CodeMirror 实现公式编辑、块状文本编辑,TAG标签功能

    效果图  安装codemirror依赖 本示例为Vue2项目,安装低版本的依赖 实现 实现代码如下,里边涉及到的变量和函数自行替换即可,没有其他复杂逻辑。

    2024年02月10日
    浏览(36)
  • vue3 codemirror关于 sql 和 json格式化的使用以及深入了解codemirror 使用json格式化提示错误的关键代码。包含了json格式化没有效果和json格式化提示错误

    后端返回一个json字符串,里面有value1、value2指定字段渲染sql语句,其他渲染json语句。 jsonlint 和 jsonlint-mod 的区别 简单理解:jsonlint校验json格式化是否有效,jsonlint-mod用来格式化后同时校验json格式化是否有效。 (1)JSONLint是一种可以验证JSON格式是否有效的工具。 它可以检查

    2024年04月28日
    浏览(76)
  • 发现一个开源的Chatgpt-web应用,前端使用vue编写,后端也是nodejs代码编写的。

    演示视频: https://www.bilibili.com/video/BV1WC4y1k7j5/?vd_source=4b290247452adda4e56d84b659b0c8a2 【chatglm3】(10):使用fastchat本地部署chatlgm3-6b模型,并配合chatgpt-web的漂亮界面做展示,调用成功,vue的开源项目 部署脚本和方法: https://gitee.com/fly-llm/dify-mysql-llm/tree/master/fastchat-docker-compose ht

    2024年02月11日
    浏览(73)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包