ICode9

精准搜索请尝试: 精确搜索
  • Vue2中使用CodeMirror 实现JSON编辑器2022-04-12 21:32:50

    将如下代码封装成JsonEditor组件 <template> <div class="json-editor"> <el-row style="height: 100%;overflow-y: auto;"> <textarea ref="codemirror"/> </el-row> <slot></slot> &l

  • Skulpt搭建Python在线编译器(二):界面优化2022-01-30 15:04:05

    原文链接:这里。   上一节中,我们下载并安装使用了基于Skulpt 的Python在线编译器,实现了基础功能冲,但是原生的页面比较难看,所以我们打算重新修改页面。让页面变得好看一些。 这是效果图: http://python.longkui.site/ 1.原生页面解析 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 1

  • 利用codemirror,生成yaml编辑器(vue)2022-01-27 14:04:29

    1.YAML和yaml互换json和yaml文件: 1.1 下载js-yaml和yaml组件 npm install yaml --save npm install js-yaml --save 1.2 封装工具类 import YAML from 'yaml' import yaml from 'js-yaml' // json转换为yaml格式 export const json2yaml = (jsonData) => { try {

  • 富文本(vue3)SQL格式化 JSON格式化2021-12-17 22:00:46

    先上图看效果:   SQL格式化使用的是 codemirror 和 sql-formatter 实现的(建议看文档搞)  使用就直接用就可以了,如果用的地方多建议 install 全局组件 <codeEditor v-model:value="code" :scene="type" :height-size="200" ></codeEditor>  对富文

  • vue codemirror 代码编辑器2021-11-10 19:00:39

    一、npm安装 npm i codemirror  二、具体使用 1、依赖引入 import "codemirror/theme/ambiance.css";   //主题 import "codemirror/lib/codemirror.css"; import "codemirror/addon/hint/show-hint.css"; let CodeMirror = require("codemirror/lib/cod

  • vue+el-dialog中使用codemirror 遇到的问题2021-11-10 15:34:55

    注:mode为‘javascript’ 问题一:由于是在el-dialog弹框中使用codemirror,代码提示框不出现 解决方法:由于代码提示框样式的z-index为10 小于el-dailog的z-index;所以可以给代码提示框设置样式 .CodeMirror-hints{ z-index: 3000 !important; } 问题二:需检测js代码语法格式

  • VUE CodeMirrorr+json-lint实现可编辑的Json-Editor组件 动态调用多次时出现格式错误问题2021-11-03 10:31:17

     在不同的Tab下都调用了json编辑组件,导致第二个页面json格式变成:  解决方法: 在配置项中添加:autoRefresh: true 需要刷新 代码: <template> <div class="json-editor"> <textarea ref="textarea" /> </div> </template> <script> import CodeMirr

  • vue项目中使用vue-codemirror代码编辑器2021-09-24 18:03:18

    1、下载 npm install vue-codemirror --save 2、使用 main.ts代码: import Vue from 'vue'; import VueCodemirror from 'vue-codemirror'; import 'codemirror/lib/codemirror.css'; Vue.use(VueCodemirror); 组件中代码: <template> <div cl

  • 组件封装使用,vue 实现json 编辑器2021-09-01 01:03:11

    依赖: npm  install  vue-codemirror 可能遇到错误 npm  install file  npm  install system  子组件封装 components.vue  <template> <codemirror class="code-dec" ref="jsonEditor" v-model="jsondata&

  • Typora代码块配色和标题自带序号的实现代码2021-07-23 17:03:05

    Typora代码块配色和标题自带序号的实现代码 先打开主题文件夹 文件>偏好设置>外观>打开主题文件夹 然后编辑base.user.css(如果没有就新建一个)文件 /*标题自动添加序号*/ .sidebar-content { ``counter-reset``: h``1 } .outline-h``1` `{ ``counter-reset``: h``2 } .outl

  • Vue中使用codemirror2021-07-07 10:58:02

    官网 官网地址:https://codemirror.net/ 官网是英文的,所以看不看没意思 特点 解决普通文本编辑器当中不能输入tab键、回车乱跳、皮肤难看的问题。 解决代码着色方案的问题。 和其他富文本编辑器不同,不具有文字排版功能。 使用 命令: yarn add vue-codemirror 或者 npm install

  • Vue-Codemirror代码块编辑器的使用方法2021-06-30 17:01:55

    1.NPM npm install vue-codemirror --save 2.官方地址 https://www.npmjs.com/package/vue-codemirror 3.页面引入和使用方法 有多种语言,我选择的是python主题 3.1 html <codemirror @blur="inputChange($event)" v-model="defaultPocVal" :options="options"><

  • 在页面编辑器codemirror 遇到的蠢问题2021-05-25 14:35:07

    1、this问题  面试题上最常见的题目,问的时候也能答出来,到遇到的时候,竟然中了这个坑 CodeMirror.defineExtension('addMsgVar', function (val) { this.replaceSelection(val) }) 这里的replaceSelection方法是全局的,但我一开始改写用的是箭头函数,获取this,是undefined。。。。

  • Vue中CodeMirror组件设置高度自适应2021-04-23 09:02:47

    写在前面 由于项目中需要使用代码编辑器插件,于是找到了CodeMirror,这个插件功能十分强大,官网地址:https://codemirror.net/ 但是,当把插件集成到项目时,发现编辑器显示高度是默认的300px,这个高度显然是不友好的,所以需要将高度改为自适应。 查看官方文档说是将height设置为auto即可,但

  • react 页面嵌入代码端—codemirror2021-04-15 16:36:35

    介绍:CodeMirror是一个代码编译器。特点:CodeMirror可以直接嵌入Web页面,提供在线代码编辑器的特性页面实现:   package.json中添加相关依赖 "codemirror": "^5.60.0", "react-codemirror2": "^7.2.1", 引入CodeMirror组件以及js,css文件 import { UnControlled as CodeMirror } f

  • 把 CodeMirror 中链接变为可点击(Clickable Link)2021-04-08 17:33:18

    问题 很多编辑器,比如 VSCode 都可以自动检测文本中的链接,然后点击链接就可以打开网页。 但是 CodeMirror(一个基于 Web 的编辑器,CodePen 用的就是这个)没有自带这个功能,所以需要手动添加。 添加后的效果: 解决 方法 1(推荐) 利用 cm.eachLine 对每一行进行遍历,用正则表达式判断其中的

  • CodeMirror 1-9序号内容和序号不对齐问题修复2021-03-11 10:32:06

    问题描述:在序号0-9内输入内容 序号和内容错乱,10的时候恢复正常 问题显示:      解决方法:             问题解决:  

  • 基于CodeMirror 10分钟打造一个记事本应用(真的能使用,非demo)2021-03-04 17:33:21

    直接看最终效果 在浏览器里面可以随时调出记事本,而且内容自动保存不怕丢失 再来看怎么做的 原理其实很简单 主要使用了codeMirror来做编辑器数据保存在本地存储,编辑器内容变化时会自动存储,再次打开时会从本地存储里面读取并恢复在标签页直接打开、从工具栏打开记事本,需要安

  • CordMirror 在线代码编辑器2021-02-23 10:02:46

    CodeMirror是使用JavaScript为浏览器实现的多功能文本编辑器。它专门用于编辑代码,并具有100多种语言模式和各种插件,可实现更高级的编辑功能。每种语言都带有功能齐全的代码和语法高亮显示,以帮助阅读和编辑复杂代码。 丰富的编程API和CSS主题系统可用于自定义CodeMirror以适合您的

  • Typora 修改代码块的字体2021-01-30 19:57:58

    设置➡️偏好设置➡️外观➡️打开主题文件夹 创建一个文件base.user.css 打开刚刚创建的文件,复制下列代码到文件中并保存 注:下面是我的字体配置,如果电脑上没有装对应字体则修改无效 .CodeMirror-wrap .CodeMirror-code pre { font-family: "JetBrains Mono", "Microsoft Ya

  • hadoop安装文档2020-09-15 20:32:30

    1. 安装JDK 1.1 JDK安装步骤 下载JDK安装包(下载Linux系统的 .tar.gz 的安装包) https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html 更新Ubuntu源 sudo apt-get update 将JDK压缩包解压到Ubuntu系统中 /usr/local/ 中 sudo tar -zxvf jdk-8u251-l

  • shiro权限验证(个人看视频记录的,自己使用,大家参考有不懂可留言)2020-07-03 13:05:55

    一.shiro权限验证(个人看视频记录的,自己使用,大家参考有不懂可留言) I.搭建环境 i.导入坐标       xxxxxxxxxx         <dependencies>    <dependency>        <groupId>org.springframework.boot</groupId>        <artifactId>spring-boot-

  • react中codemirror的基本使用2020-06-15 12:04:57

        codemirror是什么?   使用JavaScript为浏览器实现的多功能文本编辑器。     codemirror作用   专门用于编辑代码,并带有实现更高级编辑功能的多种语言模式和附加组件。     codemirror官网   https://codemirror.net/  (全英文,我这种英语渣渣是直接谷歌翻译的,大

  • linux正则应用场景2020-06-07 14:07:55

    linux里面的正则 1、grep的一些进阶 grep [-A] [-B] '搜寻字符串' filename 选项与参数: -A :后面可加数字,为 after 的意思,除了列出该行外,后续的 n 行也列出来; -B :后面可加数字,为 befer 的意思,除了列出该行外,前面的 n 行也列出来; [root@workPC ~]# dmesg |grep -A3 -B2 'docker'

  • 数据流导向2020-06-07 14:01:28

    数据流重导向 1、standard output与standard error output 标准输入        (stdin): 代码为0, 使用<或者<< 标准输出        (stdout) 代码为 1 ,使用 > 或 >>  标准错误输出      (stderr )  代码为 2 ,使用 2> 或 2>> ;                    

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有