【コードエディター記録1】vueプロジェクトでコードの強調表示効果+入力を実現する方法

プログラミング 2023-08-22 21:30:31 訪問数: null

記事ディレクトリ

1-1 コードを強調表示するが入力を編集しない vue-highlightjs

1-1-1 ビュー3

  1. 依存関係をインストールする
npm install --save highlight.js
 
npm install --save @highlightjs/vue-plugin
  1. このページはプラグインのみを使用するため、main.ts でグローバルに使用する必要はありません。
    • プラグインはリアクティブ データをサポートしていないため、ref リアクティブ変数を使用しないでください。
    <template>
<highlightjs
    autodetect
    :code="jsonCode"
/>
</template>
 
<script>
import 'highlight.js/styles/stackoverflow-light.css';// 可以切换其它样式风格，例如黑色主题
import 'highlight.js/lib/common';
import hljsVuePlugin from "@highlightjs/vue-plugin";
 
export default {
        
        
    setup() {
        
        
        const jsonStr = [
            {
        
         'name': 'JSON', 'address': '北京市西城区', 'age': 25 }, 
            {
        
         'name': 'JSON', 'address': '北京市西城区', 'age': 25 }
        ];
        let jsonCode = JSON.stringify(jsonStr, null, 2); // 设置tab为两个空格
 
        return {
        
         
          jsonCode,
        };
    },
    components: {
        
        
        highlightjs: hljsVuePlugin.component
    }
}
</script>

1-1-2 ビュー2

  1. インストール
    npm install --save vue-highlightjs
npm install --save highlight.js
    • 2 つの依存関係:
      • Vue-highlight.jsはコードハイライトの機能を実現します
      • 実際のスタイリングのために、highlight.js をインストールします。
  2. エントリファイル main.js 内の参照依存関係
    import VueHighlightJS from 'vue-highlightjs'
import 'highlight.js/styles/atom-one-dark.css'
Vue.use(VueHighlightJS)
  3. 使用

<pre v-highlightjs=codeDate ><code class="java"></code></pre>

  • クラス内の Java は、強調表示されるスクリプト言語に対応します。
  • JavaScript :<code class="javascript "></code>

  1. バージョンに問題がある場合は、次のプロンプトが表示されます。
    npm install --save highlight.js/lib/highlight highlight.js/styles/github-gist.css

  2. jsonファイルのバージョンが依存バージョンと一致しているか比較し、一致していないバージョンを依存バージョンとしてインストールします

コードミラー公式サイト

以前に参照した関連記事:

1-2 強調表示されたコードを編集して入力し、コードミラー形式を標準化します

1-2-1 プレゼンテーション

入ることができます

ここに画像の説明を挿入

1-2-2 基本構成

  1. Web 側でオンライン コード コンパイルの効果を実現するには、CodeMirror を再パッケージ化するコンポーネント vue-codemirror を使用する必要があります。

    • コードのハイライトをサポート
    • モノカイなど62色のテーマカラー
    • json、sql、javascript、css、xml、html、yaml、マークダウンをサポート
    • Python編集モード、デフォルトはjsonです
    • クイック検索をサポート
    • オートコンプリートヒントのサポート
    • 括弧の自動マッチングをサポート

  2. ダウンロード環境

    npm install jshint
npm install jsonlint
npm install script-loader
npm install vue-codemirror

1-2-3使用

  1. プロジェクト内のコンポーネントに vue-codemirror を再パッケージ化できます。
    • vueCodemirror コンポーネント
<template>
  <div>
    <codemirror
      ref="myCm"
      :value="editorValue"
      :options="cmOptions"
      @changes="onCmCodeChanges"
      @blur="onCmBlur"
      @keydown.native="onKeyDown"
      @mousedown.native="onMouseDown"
      @paste.native="OnPaste"
    />

  </div>
</template>

<script>
import {
    
     codemirror } from 'vue-codemirror'
import 'codemirror/keymap/sublime'
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/mode/xml/xml.js'
import 'codemirror/mode/htmlmixed/htmlmixed.js'
import 'codemirror/mode/css/css.js'
import 'codemirror/mode/yaml/yaml.js'
import 'codemirror/mode/sql/sql.js'
import 'codemirror/mode/python/python.js'
import 'codemirror/mode/markdown/markdown.js'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/javascript-hint.js'
import 'codemirror/addon/hint/xml-hint.js'
import 'codemirror/addon/hint/css-hint.js'
import 'codemirror/addon/hint/html-hint.js'
import 'codemirror/addon/hint/sql-hint.js'
import 'codemirror/addon/hint/anyword-hint.js'
import 'codemirror/addon/lint/lint.css'
import 'codemirror/addon/lint/lint.js'
// import 'codemirror/addon/lint/json-lint'
import 'codemirror/addon/selection/active-line'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/anyword-hint.js'
require('script-loader!jsonlint')
import 'codemirror/addon/lint/javascript-lint.js'
import 'codemirror/addon/fold/foldcode.js'
import 'codemirror/addon/fold/foldgutter.js'
import 'codemirror/addon/fold/foldgutter.css'
import 'codemirror/addon/fold/brace-fold.js'
import 'codemirror/addon/fold/xml-fold.js'
import 'codemirror/addon/fold/comment-fold.js'
import 'codemirror/addon/fold/markdown-fold.js'
import 'codemirror/addon/fold/indent-fold.js'
import 'codemirror/addon/edit/closebrackets.js'
import 'codemirror/addon/edit/closetag.js'
import 'codemirror/addon/edit/matchtags.js'
import 'codemirror/addon/edit/matchbrackets.js'
import 'codemirror/addon/selection/active-line.js'
import 'codemirror/addon/search/jump-to-line.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/addon/display/autorefresh.js'
import 'codemirror/addon/selection/mark-selection.js'
import 'codemirror/addon/search/match-highlighter.js'
export default {
    
    
  name: 'VueCode',
  components: {
    
     codemirror },
  props: {
    
    
    cmTheme: {
    
    
      type: String,
      required: false,
      default: 'default'
    },
    cmMode: {
    
    
      type: String,
      required: false,
      default: ''
    },
    cmIndentUnit: {
    
    
      type: Number,
      required: false,
      default: 2
    },
    autoFormatJson: {
    
    
      type: Boolean,
      required: false,
      default: true
    },
    editorValue: {
    
    
      type: String,
      required: false,
      default: '{}'
    }
  },
  data() {
    
    
    return {
    
    
      cmOptions: {
    
    
        theme: !this.cmTheme || this.cmTheme === 'default' ? 'default' : this.cmTheme, // 主题
        mode: !this.cmMode || this.cmMode === 'default' ? 'application/json' : this.cmMode, // 代码格式
        tabSize: 2, // tab的空格个数
        indentUnit: !this.cmIndentUnit ? 2 : this.cmIndentUnit, // 一个块（编辑语言中的含义）应缩进多少个空格
        autocorrect: true, // 自动更正
        spellcheck: true, // 拼写检查
        lint: true, // 检查格式
        lineNumbers: true, // 是否显示行数
        lineWrapping: true, // 是否自动换行
        styleActiveLine: true, // line选择是是否高亮
        keyMap: 'default', // sublime编辑器效果
        matchBrackets: true, // 括号匹配
        autoCloseBrackets: true, // 在键入时将自动关闭括号和引号
        matchTags: {
    
     bothTags: true }, // 将突出显示光标周围的标签
        foldGutter: true, // 可将对象折叠，与下面的gutters一起使用
        gutters: [
          'CodeMirror-lint-markers',
          'CodeMirror-linenumbers',
          'CodeMirror-foldgutter'
        ],
        highlightSelectionMatches: {
    
    
          minChars: 2,
          style: 'matchhighlight',
          showToken: true
        }
      },
      enableAutoFormatJson: this.autoFormatJson == null ? true : this.autoFormatJson // json编辑模式下，输入框失去焦点时是否自动格式化，true 开启， false 关闭
    }
  },
  created() {
    
    
    try {
    
    
      if (!this.editorValue) {
    
    
        this.cmOptions.lint = false
        return
      }
      if (this.cmOptions.mode === 'application/json') {
    
    
        if (!this.enableAutoFormatJson) {
    
    
          return
        }
        this.editorValue = this.formatStrInJson(this.editorValue)
      }
    } catch (e) {
    
    
      console.log('初始化codemirror出错：' + e)
    }
  },
  methods: {
    
    
    resetLint() {
    
    
      if (!this.$refs.myCm.codemirror.getValue()) {
    
    
        this.$nextTick(() => {
    
    
          this.$refs.myCm.codemirror.setOption('lint', false)
        })
        return
      }
      this.$refs.myCm.codemirror.setOption('lint', false)
      this.$nextTick(() => {
    
    
        this.$refs.myCm.codemirror.setOption('lint', true)
      })
    },
    // 格式化字符串为json格式字符串
    formatStrInJson(strValue) {
    
    
      return JSON.stringify(
        JSON.parse(strValue),
        null,
        this.cmIndentUnit
      )
    },
    onCmCodeChanges(cm, changes) {
    
    
      this.$emit('sendCode', cm.getValue())
      this.resetLint()
    },
    // 失去焦点时处理函数
    onCmBlur(cm, event) {
    
    
      try {
    
    
        const editorValue = cm.getValue()
        if (this.cmOptions.mode === 'application/json' && editorValue) {
    
    
          if (!this.enableAutoFormatJson) {
    
    
            return
          }
          this.editorValue = this.formatStrInJson(editorValue)
        }
      } catch (e) {
    
    
        // 啥也不做
      }
    },
    // 按下键盘事件处理函数
    onKeyDown(event) {
    
    
      const keyCode = event.keyCode || event.which || event.charCode
      const keyCombination =
            event.ctrlKey || event.altKey || event.metaKey
      if (!keyCombination && keyCode > 64 && keyCode < 123) {
    
    
        this.$refs.myCm.codemirror.showHint({
    
     completeSingle: false })
      }
    },
    // 按下鼠标时事件处理函数
    onMouseDown(event) {
    
    
      this.$refs.myCm.codemirror.closeHint()
    },
    // 黏贴事件处理函数
    OnPaste(event) {
    
    
      if (this.cmOptions.mode === 'application/json') {
    
    
        try {
    
    
          this.editorValue = this.formatStrInJson(this.editorValue)
        } catch (e) {
    
    
          // 啥都不做
        }
      }
    }
  }
}
</script>

  <style scoped>
.CodeMirror {
    
    
  position: relative;
  height: 100vh;
  overflow: hidden;
  margin-top: 10px;
}
  </style>

<!-- <template>
  <div class="exercise">
    <codemirror
      v-model="codeSnippets"
      :options="cmOptions"
    />
  </div>
</template>
<script>
import {
    
     codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
export default {
    
    
  components: {
    
    
    codemirror
  },
  data() {
    
    
    return {
    
    
      cmOptions: {
    
    
        tabSize: 4,
        mode: 'text/javascript', // 模式
        theme: 'base16-dark', // 主题
        lineNumbers: true, // 是否显示行数
        line: true,
        viewportMargin: Infinity, // 处理高度自适应时搭配使用
        highlightDifferences: true,
        autofocus: false,
        indentUnit: 2,
        smartIndent: true,
        readOnly: true, // 只读
        showCursorWhenSelecting: true,
        firstLineNumber: 1
        // 更多配置查询 https://codemirror.net/doc/manual.html#config
      },
      codeSnippets:
        `for (var i = 0; i < 3; i++) {
          setTimeout(() => console.log(i), 1)
        }

        for (let i = 0; i < 3; i++) {
          setTimeout(() => console.log(i), 1)
        }`
    }
  }
}
</script>
  <style>  /* 注意：这里的样式需要全局，如果写了scoped会导致样式不生效 */
  .CodeMirror {
    
    
    border: 1px solid #eee;
    height: auto;  /* 编辑器盒子高度自适应 */
    width: 30%;
  }
  </style> -->
  1. 親コンポーネント:

データは親コンポーネントで管理されており、子コンポーネントにコードを記入した後、親コンポーネントにパラメータを渡す必要があります

  • 子コンポーネントが初期化されるときのコードには、親コンポーネントによって渡されるパラメータが必要です
   <vueCode
          ref="vueCode"
          :cm-mode="cmMode"
          :editor-value="form.yamlFile"
          @sendCode="(value) => {
    
    
            editorValue = value
            form.yamlFile = value
          }"
        />

import vueCode from './vueCodemirror'
// yarml代码的高亮
import 'codemirror/mode/yaml/yaml.js'

Vue + Codemirror ベースの SQL オンライン エディターを実現

おすすめ

転載: blog.csdn.net/hannah2233/article/details/129315981
おすすめ
ランキング
uni.request在接口状态码403等还是走success
Springboot は mybatisplus を統合しており、ページング クエリによって返される Page オブジェクトの合計は常に 0 です。
System.InvalidOperationExceptionが：「BuildWindowCoreは、子ウィンドウのハンドル搭乗を返しません。」
[Example 08] IPD system advancement: version naming rules for version management
カスタム NavigationBar -- UIView による描画
データとデータの移行を復元します（個人的なメモ、無用リーダー）
4. 2次元配列で検索する
vim的私人订制
Flutterのカスタムルーティング切り替えアニメーション
Javaコンテナの方法の簡単なアプリケーションのArrayList
アーカイブ
もっと
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)

コードワールド

© 2018 codetd.com