simple code editor

Простой кодировщик для Vue.js 3

Поддержка Vue.js 3

Веб-сайт: Simple-Code-editor.vicuxd.com

Он прост в использовании, как только для чтения, так и режим редактирования с 200+ темами, вы можете напрямую использовать его в браузере или импортировать его через пакет NPM.

Использование

Есть 2 общих способа, которыми вы можете использовать пакет simple-code-editor :

1. В браузере
2. VUE через NPM

1. Vue в браузере

Шаг 1. Добавьте файлы CSS.

 < link rel =" stylesheet " href =" themes.css " />
< link rel =" stylesheet " href =" themes-base16.css " />
< link rel =" stylesheet " href =" simple-code-editor.css " />

Шаг 2. Добавьте файлы JavaScript после файла vue.js

 < 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 >

2. Использование с VUE через NPM

Шаг 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 >

V-модель

Описание: варьируется в зависимости от значения элемента входов формы или вывода компонентов

 < 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 >

Строка Lang-List- String

По умолчанию: 110px

Описание: Список ширины языка

 < CodeEditor lang-list-width =" 150px " > </ CodeEditor >

Lang-List-High String

По умолчанию: auto

Описание: высота списка языка

 < CodeEditor lang-list-height =" 70px " > </ CodeEditor >

Lang-List-Display Boolean

По умолчанию: false

Описание: Включить список языков, чтобы показать по умолчанию или нет

 < CodeEditor :lang-list-display =" true " > </ CodeEditor >

Z-Index String

По умолчанию: 0

 < CodeEditor z-index =" 6 " > </ CodeEditor >

Автофокус Boolean

По умолчанию: false

Описание: Включить Textarea, чтобы сфокусироваться по умолчанию или нет

 < CodeEditor :autofocus =" true " > </ CodeEditor > 

Событие

@lang

Описание: передать текущий языки как аргумент

 < 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

Описание: передавать элемент Textarea в качестве аргумента

 < CodeEditor @textarea =" focus " > </ CodeEditor > 

 focus ( node ) {
  node . focus ( ) ;
}