simple code editor
2.0.9
Vue.js 3のサポート
ウェブサイト：Simple-Code-Editor.vicuxd.com
簡単に使用できます。また、200以上のテーマで読み取り専用と編集モードの両方をサポートします。ブラウザで直接使用するか、NPMパッケージを介してインポートできます。
simple-code-editorパッケージを使用できる2つの一般的な方法があります。
ステップ1。CSSファイルを追加します。
< link rel =" stylesheet " href =" themes.css " />
< link rel =" stylesheet " href =" themes-base16.css " />
< link rel =" stylesheet " href =" simple-code-editor.css " />ステップvue.jsファイルの後にJavaScriptファイルを追加します。
< script src =" highlight.min.js " > </ script >
< script src =" simple-code-editor.js " > </ script >ステップ3。コンポーネントを宣言し、カスタマイズされたタグをHTMLテンプレートに使用します。
const app = Vue . createApp ( {
components : {
"code-editor" : CodeEditor ,
} ,
} ) ; < code-editor > </ code-editor >ステップ1。NPMからパッケージをインストールします：
npm install simple-code-editorステップ2。モジュールと登録のインポート。
import hljs from 'highlight.js' ;
import CodeEditor from "simple-code-editor" ;
export default {
components : {
CodeEditor ,
} ,
} ; < CodeEditor > </ CodeEditor > Booleanデフォルト： false
説明：編集可能かどうかを有効にします
< CodeEditor :read-only =" true " > </ CodeEditor >Stringデフォルト： unset
説明：静的コンテンツ設定。データバインディングが必要な場合は、プロパティ： v-modelを使用してください
< CodeEditor value =" console.log(13) " > </ CodeEditor >説明：フォーム入力要素の値またはコンポーネントの出力に基づいて変化します
< CodeEditor v-model =" demo " > </ CodeEditor > < CodeEditor v-model =" demo " > </ CodeEditor >Booleanデフォルト： false
説明：ライン番号を表示できるかどうかを有効にしますが、ラップテキストモードではできません
< CodeEditor :line-nums =" true " > </ CodeEditor >Arrayデフォルト： [["javascript", "JS"]]
説明：[["言語名"、 "ディスプレイ名"]、["言語名"、 "ディスプレイ名"]、...]。複数の言語設定は、言語セレクターを自動的に有効にし、言語名が必要であり、表示名はオプションです
< CodeEditor :languages =" [['cpp', 'C++']] " />複数の言語：
< CodeEditor :languages =" [['cpp', 'C++'],['python', 'Python'],['php', 'PHP']] " />Numberデフォルト： 2
< CodeEditor :tab-spaces =" 4 " > </ CodeEditor >Booleanデフォルト： false
説明：ラップテキストを有効かどうか
< CodeEditor :wrap =" true " > </ CodeEditor >Booleanデフォルト： true
説明：ヘッダーが表示できるかどうかを有効にします
< CodeEditor :header =" true " > </ CodeEditor >Booleanデフォルト： true
説明：言語名を表示するかどうかを有効にします
< CodeEditor :display-language =" false " > </ CodeEditor >Booleanデフォルト： true
説明：コピーアイコンに表示できるかどうかを有効にします
< CodeEditor :copy-code =" false " > </ CodeEditor >Stringデフォルト： github-dark
説明：200以上のテーマを自由に切り替えるには、すべてのテーマを確認してください
< CodeEditor theme =" github-dark " > </ CodeEditor >Stringデフォルト： 17px
< CodeEditor font-size =" 20px " > </ CodeEditor >Stringデフォルト： 540px
< CodeEditor width =" 100% " > </ CodeEditor >Stringデフォルト： auto
説明：コンテナの高さはデフォルトで適応性があり、特定の値として設定することもでき、スクロールバーはオーバーフローで動作します
< CodeEditor height =" 150px " > </ CodeEditor >Stringデフォルト： unset
< CodeEditor min-width =" 200px " > </ CodeEditor >Stringデフォルト： unset
< CodeEditor min-height =" 200px " > </ CodeEditor >Stringデフォルト： unset
< CodeEditor max-width =" 1000px " > </ CodeEditor >Stringデフォルト： unset
< CodeEditor max-height =" 200px " > </ CodeEditor >Stringデフォルト： 20px
< CodeEditor padding =" 30px " > </ CodeEditor >Stringデフォルト： 12px
< CodeEditor border-radius =" 4px " > </ CodeEditor >Stringデフォルト： 110px
説明：言語リストの幅
< CodeEditor lang-list-width =" 150px " > </ CodeEditor >Stringデフォルト： auto
説明：言語リストの高さ
< CodeEditor lang-list-height =" 70px " > </ CodeEditor >Booleanデフォルト： false
説明：言語リストがデフォルトで表示できるかどうかを有効にします
< CodeEditor :lang-list-display =" true " > </ CodeEditor >Stringデフォルト： 0
< CodeEditor z-index =" 6 " > </ CodeEditor >Booleanデフォルト： false
説明：テキストアレアがデフォルトで集中できるかどうかを有効にします
< CodeEditor :autofocus =" true " > </ CodeEditor > 説明：現在のランゲンジを引数として渡します
< CodeEditor @lang =" getLanguage " > </ CodeEditor > getLanguage ( lang ) {
console . log ( "The current language is: " + lang ) ;
}説明：静的コンテンツを引数として渡します
< CodeEditor @content =" getContent " > </ CodeEditor > getContent ( content ) {
console . log ( "The content is: " + content ) ;
}説明：Textarea要素を引数として渡します
< CodeEditor @textarea =" focus " > </ CodeEditor > focus ( node ) {
node . focus ( ) ;
}
