justcaliturner / simple-code-editor

Simple code editor for Vue.js

Simple CodeEditor for Vue.js 3

Support for Vue.js 3

website: simple-code-editor.vicuxd.com

It's easy to use, both support read-only and edit mode with 200+ themes, you can directly use it in the browser or import it via the NPM package.

Usage

There are 2 common ways that you can use the simple-code-editor package:

1. Vue in the browser
2. Vue via NPM

1. Vue in the Browser

Step 1. Add the CSS files.

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

Step 2. Add the JavaScript files after the vue.js file.

<script src="highlight.min.js"></script>
<script src="simple-code-editor.js"></script>

Step 3. Declaring the component, and using the customized tag into the HTML template.

const app = Vue.createApp({
  components: {
    "code-editor": CodeEditor,
  },
});

<code-editor></code-editor>

2. Usage with Vue via NPM

Step 1. Install the package from NPM:

npm install simple-code-editor

Step 2. Importing the modules and registration.

import hljs from 'highlight.js';
import CodeEditor from "simple-code-editor";
export default {
  components: {
    CodeEditor,
  },
};

<CodeEditor></CodeEditor>

Props

read-only Boolean

Default: false

Description: enable editable or not

<CodeEditor :read-only="true"></CodeEditor>

value String

Default: unset

Description: static content setting. If requiring data binding, please use the property: v-model

<CodeEditor value="console.log(13)"></CodeEditor>

v-model

Description: varies based on the value of form inputs element or output of components

<CodeEditor v-model="demo"></CodeEditor> <CodeEditor v-model="demo"></CodeEditor>

line-nums Boolean

Default: false

Description: enable line numbers to show or not, but unable in wrap text mode

<CodeEditor :line-nums="true"></CodeEditor>

languages Array

Default: [["javascript", "JS"]]

Description: [["language name", "display name"], ["language name", "display name"], ...]. Multiple languages setting will enable the language selector automatically, the language name is necessary, and the display name is optional

<CodeEditor :languages="[['cpp', 'C++']]" />

Multiple languages:

<CodeEditor :languages="[['cpp', 'C++'],['python', 'Python'],['php', 'PHP']]" />

tab-spaces Number

Default: 2

<CodeEditor :tab-spaces="4"></CodeEditor>

wrap Boolean

Default: false

Description: enable wrap text or not

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

header Boolean

Default: true

Description: enable header to show or not

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

display-language Boolean

Default: true

Description: enable language name to show or not

<CodeEditor :display-language="false"></CodeEditor>

copy-code Boolean

Default: true

Description: enable copy icon to show or not

<CodeEditor :copy-code="false"></CodeEditor>

theme String

Default: github-dark

Description: freely switching between 200+ themes, check all the themes

<CodeEditor theme="github-dark"></CodeEditor>

font-size String

Default: 17px

<CodeEditor font-size="20px"></CodeEditor>

width String

Default: 540px

<CodeEditor width="100%"></CodeEditor>

height String

Default: auto

Description: the height of the container is adaptive by default, it also can be set as a specific value, and the scroll bar will work with overflow

<CodeEditor height="150px"></CodeEditor>

min-width String

Default: unset

<CodeEditor min-width="200px"></CodeEditor>

min-height String

Default: unset

<CodeEditor min-height="200px"></CodeEditor>

max-width String

Default: unset

<CodeEditor max-width="1000px"></CodeEditor>

max-height String

Default: unset

<CodeEditor max-height="200px"></CodeEditor>

padding String

Default: 20px

<CodeEditor padding="30px"></CodeEditor>

border-radius String

Default: 12px

<CodeEditor border-radius="4px"></CodeEditor>

lang-list-width String

Default: 110px

Description: the width of language list

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

lang-list-height String

Default: auto

Description: the height of the language list

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

lang-list-display Boolean

Default: false

Description: enable language list to show by default or not

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

z-index String

Default: 0

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

autofocus Boolean

Default: false

Description: enable textarea to get focused by default or not

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

Event

@lang

Description: pass the current languange as an argument

<CodeEditor @lang="getLanguage"></CodeEditor>

getLanguage(lang) {
  console.log("The current language is: " + lang);
}

@content

Description: pass the static content as an argument

<CodeEditor @content="getContent"></CodeEditor>

getContent(content) {
  console.log("The content is: " + content);
}

@textarea

Description: pass the textarea element as an argument

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

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

simple-code-editor's Issues

While the :line-nums is on it will cause this

ERROR
Cannot read properties of undefined (reading 'firstChild')
TypeError: Cannot read properties of undefined (reading 'firstChild')
at Proxy.getLineNum (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/simple-code-editor/CodeEditor.vue?vue&type=script&lang=js:231:52)
at Proxy.updated (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/simple-code-editor/CodeEditor.vue?vue&type=script&lang=js:252:14)
at callWithErrorHandling (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:6651:18)
at callWithAsyncErrorHandling (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:6659:17)
at hook.__weh.hook.__weh (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:2120:19)
at flushPostFlushCbs (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:6838:41)
at flushJobs (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:6880:5)

Dont' see text highlight

Hello. I'm testing the library in nuxt 2 (2.17.0) and I don't see the text, the text area is fine and the copy function is fine too, but the text is not visible I think the styles are not being applied, how can I fix it?

code:

<script> import hljs from 'highlight.js'; import CodeEditor from 'simple-code-editor'; console.log(hljs) export default { components: { CodeEditor } } </script>

nuxt 3 error import

If import simple-code-editor, throw error:
Cannot read properties of undefined (reading 'disabled')

Help me pls

can you add linenumbers show?thanks!

can you add linenumbers show? thanks!

Issue when using tab key on readOnly code editor

When using the tab key on a readOnly editor, this error occurs:

Uncaught TypeError: this.content is undefined
    tab CodeEditor.vue:283

To solve it, we need to change these lines:
https://github.com/justcaliturner/simple-code-editor/blob/master/npm-package/CodeEditor.vue#L282-L283

+ if (this.content) {
    this.content =
       this.content.substring(0, cursorPosition) + this.tabWidth + this.content.substring(cursorPosition); 
+ }

or another option, do a:
if (this.readOnly) return
as the first line of the tab method.

copy is no work

Hello! Clipboard （copy code）doesnt work on Chrome 103.0.5060.53
but firefox is work

firefox：

my code

PS: I have a Q，Can this editor be embedded in a quill ?

how to disable the auto corrector? it keeps red-underlying my code snippets

here is a picture that describes the problem

Set and read the language programmatically

Hi

Firstly: great thing you wrote here 😃

For a small side project of mine im trying to save and set the language, which is selected per dropdown, programmatically.
Is this in any way possible?

I've seen that there is the mark and languageClass property inside of the component but it doesn't seems accessible.

is there any way to get the console content in order to output it in the document?

I'm building a js code editor, i need in somehow to get any content that logs to the console so i can output it in somehow.

can i do this in this editor?

the cursor is always above the code text

invalid array length

ViteJS Vue3 import error

I use vitejs with vue3 and want to use the simple-code-editor.

However, I do a import in my .vue file like this: import CodeEditor from "simple-code-editor" but this fails with following error:

[plugin:vite:import-analysis] Failed to resolve import "./Dropdown" from "node_modules/simple-code-editor/CodeEditor.vue". Does the file exist?
/Users/prutheus/WebstormProjects/xxx/xxx/xxx/node_modules/simple-code-editor/CodeEditor.vue:3:25
1  |  
2  |  import hljs from "highlight.js";
3  |  import Dropdown from "./Dropdown";
   |                          ^
4  |  import CopyCode from "./CopyCode";
5  |
    at formatError (/Users/prutheus/WebstormProjects/xxx/xxx/xxx/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:42189:46)
    at TransformContext.error (/Users/prutheus/WebstormProjects/xxx/xxx/xxx/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:42185:19)
    at normalizeUrl (/Users/prutheus/WebstormProjects/xxx/xxx/xxx/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:67284:26)
    at async TransformContext.transform (/Users/prutheus/WebstormProjects/xxx/xxx/xxx/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:67424:57)
    at async Object.transform (/Users/prutheus/WebstormProjects/xxx/xxx/xxx/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:42396:30)
    at async doTransform (/Users/prutheus/WebstormProjects/xxx/xxx/xxx/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:56801:29
Click outside or fix the code to dismiss.
You can also disable this overlay by setting server.hmr.overlay to false in vite.config.js.

Why does this happen and how I can solve this?

height="auto" doesn't work with max-height and scroll overflow

I am using the following

<code-editor
    v-model="code"
    font-size="16px"
    :header="false"
    height="auto"
    :line-nums="true"
    max-height="900vh"
    theme="base16-materia"
    width="100%"></code-editor>

But it ends up with a display that has code overflowing the container.

plz update highlight

Please allow me to put colors on the keyboard cursor line and on the keyboard cursor linens.

Import error

Hi,
i have this error using this package:
SyntaxError: The requested module '/node_modules/highlight.js/lib/index.js?v=a76deadf' does not provide an export named 'default' (at index.js?v=a76deadf:2:8)
I use vite.
I have currently removed lang = "ts" from my script (I saw it doesn't support it).
I imported the component in a simple way:

import CodeEditor from 'simple-code-editor'

The highlight ceases to exist when the input field is edited.

The highlight ceases to exist when the input field is edited.
It also stops working when I change the language.

When this occurs, I receive the following message in the browser console:

Element previously highlighted. To highlight again, first unset `dataset.highlighted`.
<code class=​"hljs language-json" style=​"top:​ 0px;​ left:​ 0px;​ font-size:​ 13px;​ padding:​ 0px 20px 20px;​" data-highlighted=​"yes">​{ "Hello": "World" } ​</code>​

Gravacao.de.Tela.2023-10-10.as.13.01.45.mov

Here is the snippet of my code:

<CodeEditor
  :class="hljs"
  font-size="13px"
  :languages="[
    ['json', 'JSON'],
    ['yml', 'YAML']
  ]"
  v-model="value"
  width="100%"
  @lang="getLanguage"
/>

// <script setup> // Composition API
import hljs from 'highlight.js'
import CodeEditor from 'simple-code-editor'

Could anyone tell me if I'm missing something?
@justcaliturner, any ideas?

v-model doesn't allow two-way sync

Vue.js 2.6.11

The following only works one-way (if code has a value, it's populated in the editor, but input is never emitted

<CodeEditor v-model="code"  />

Looking at the source code, I was able to make it work by doing this:

<CodeEditor :modelValue.sync="code"  />

Why is this? Is this a recent change? I obviously have concerns about stability. Or am I doing something entirely wrong?

Highlighting not working

The code highlighting function, and thus the application of theme colors, is not working.

Every time I type a new character in the text area, I receive a log like this:

This is how the simple-code-editor component looks:

package.json:

"simple-code-editor": "^2.0.9",
"vue": "^3.4.27",

Is there a way to get the value of the selected language ( the String ) .

I'd like to get the value of the language that I selected ( without having to use vanillaJS because I'm having VDOM and I don't want to interact with the dom directly ) . The code-editor doesn't offer an attribute to get the selected value of the programming language. Is there a way to do that?

Typescript support

Any ways to use with Typescript?

How can I make the editor shrinkable?

Binding the width doesn't seem to work and the editor can grow when I'm shrinking elements around it but then I can't grow the elements around it back because the editor won't shrink.
Also, the editor's width is shrinkable when the vertical scrollbar is visible.

:line-nums | Invalid array length

                <CodeEditor
                    class="border"
                    v-model="code"
                    :languages="[['php', 'PHP']]"
                    theme="a11y-light"
                    font-size="14px"
                    width="100%"
                    height="140px"
                    border-radius="0"
                    :line-nums="true"
                />

if I use the editor inside the collapse, then after opening I will have an error:

How to fix it?

Nuxt.js usage

Hey!

Firstly, thanks so much for this library. If it works once I get it set up it looks like an excellent and straightforward way to include code editors.

I'm struggling to get this set up with Nuxt. I have installed the npm package, imported and registered it:

<script>
import CodeEditor from 'simple-code-editor'

export default {
    components: {
        CodeEditor
    }
}
</script>

And used it as per the docs:

<CodeEditor value="console.log(13)" />

When I load the page, I get an error:

Any suggestions would be super welcome. Cheers!

Is this module compatible with nuxt 3?

Is this mod compatible with nuxt 3? If not, what mode could I use?

I tried to install this module and I get this error
Uncaught SyntaxError: The requested module '/_nuxt/node_modules/highlight.js/lib/index.js?v=f8fda8bf' does not provide an export named 'default' (at index.js?v=f8fda8bf:2:8)

Hello! Clipboard doesnt work on Chrome browser. Pls pay attention to this problem too

Hello! Clipboard doesnt work on Chrome browser. Pls pay attention to this problem,too
my chrome ver is : 版本 100.0.4896.75（正式版本） (x86_64)
firefox is working

Usage without highlight.js

I dont need highlight.js and I dont want to use it. However it seems the component is not able to work without it.

Cursor Problem

its one step down

Only renders lines within original height

Content stops rendering when you reach the bottom of the editor, any lines after scrolling are invisible.

The rendering has actually stopped in the middle of that line (you can see the bottom of the number 16 has been cut off)

Lines below the 16 are invisible but still there:

:read_only="true" stops copy_code from working

when :read_only is set to true copy code doesn't work, always shows up blank.
even when enforcing :copy_code="true" it doesn't select any text and copy anything

code inside editor is not getting highlighted despite declaring theme and language

The code in my vue component --> I have declared the theme.

output -->

Warning in console -->

I haven't done any changes in anything, today only I ran NPM Update, Composer Update (I have a Laravel Inertia + Vue project)

Please help if anyone facing this issue

Code Highlight is not working in Nuxt Project

Followed the instructions to add the editor to my Nuxt2 project, but the code is not visible, when i dug deeper i could see that the pre tag is never populated.
Can you guide me to a solution for this issue.

Uncaught (in promise) TypeError: Cannot set property HighlightJS of #<Object> which has only a getter at pre.2432dfad.js:9:85709

Do simple-code-editor support to Vue2?.

Do simple-code-editor support to Vue2?.

Cannot read properties of undefined (reading 'disabled')

simple-code-editor/website/src/SimpleCodeEditor/Dropdown.vue

Line 6 in 4a6894b

v-if="!this.disabled"

It seems that this cannot be referenced.
Removing it solved the error.
Am I using it incorrectly?

environment:
I'm trying to use it for Astro 4

node v20.11.1
npm v10.2.4
yann v1.22.15

I'm so familiar with the Vue3 Composition API that I forgot about the Option API.

the cursor/actual text is always above the colored code text

The selected text is different from and above the colored text.

Using vue 3 / vuetify latest / vite
Nothing printed to the console.
Maybe related: Isn't the github theme supposed to have a white background?

SyntaxError: indirect export not found: HighlightJS

First of, I love this component! It looks and works really nice 🙂 Since we went from the Vue-CLI to Vite I'm getting an error when I use this component however. This logs to the console:

When I click on the second error I get the following statement:

I tried testing it with a custom component and it seems to work when you upgrade the hightlight.js package to the latest version.

Isuue with copy functionality

Description

The copy code functionality stopped working.
Basically, what happens is, the previous information copied stays forever, no matter the changes to the binded value attribute. Also, the copy feature does not work if something else is already copied.

I investigated and found that it might be an issue caused due to a recent Chrome update because the functionality was working perfectly on the previous versions and interestingly it works fine on Firefox browser.

Sample code that I tested on vue sandbox

import the simple-code-editor by adding the dependency

<template>
  <span>static value</span>
  <code-editor value="console.log(10)"></code-editor>
  <br />
  <span>value keeps changing</span>
  <code-editor :value="somevalue"></code-editor>
</template>

<script>
import CodeEditor from "simple-code-editor";

export default {
  name: "App",
  components: {
    CodeEditor: CodeEditor,
  },
  data() {
    return {
      somevalue: "console.log(1)",
    };
  },

  mounted() {
    setInterval(this.changevalue, 10000);
  },

  methods: {
    changevalue() {
      this.somevalue = `console.log(${Math.random()})`;
    },
  },
};
</script>

versions

• simple-code-editor: 1.2.0
• chrome: 101.0.4951.54 (Official Build) (x86_64)
• firefox: 100.0 (64-bit)

Plans for integration hljs.highlightAuto()?

Any plans to implement hljs.highlightAuto() from highlight.js for auto detection of the language?
If not, plans to make a searchable language selector, as alternative?

I'm working on a local Snippet database tool. Having all languages available makes the dropdown list long and not 'easy' to pick the right language.

I'm now doing it as below, which works quite decent for already stored snippets, but feels kind of 'hackish' and does not work when writing a new snippet (yet).

const detectedLanguage = hljs.highlightAuto(props.resource.content)['language']
const language = [[detectedLanguage]]

Clipboard Safari problem

Hello! Clipboard doesnt work on Safari browser. Pls pay attention to this problem

Input is not transferred from textarea to the code element

Hi I'm trying to use this in my Nuxt project I imported it as a plugin and everything seemed to work except when I type anything in the code editor it doesn't get displayed. The text cursor does move and when I initialize the v-model with some text that does get displayed.

<template>
<div>
  <CodeEditor width="100%" height="100%" :languages="[['html', 'HTML']]" v-model="content"></CodeEditor>
</div>
</template>

<script lang="ts">

import { Component, Vue } from 'nuxt-property-decorator';
import CodeEditor from '~/plugins/simple-code-editor.js'

@Component({
  components: {
    CodeEditor,
  },
})
export default class Index extends Vue {
  public content: string = '<div></div>';
}
</script>

contents of '~/plugins/simple-code-editor.js'

import Vue from 'vue'
import CodeEditor from 'simple-code-editor'

Vue.use(CodeEditor)
export default CodeEditor

Am I missing something? Thanks in advance.

how to set up a default language for the editor?

is there any kind of way to set up a default language for the editor? javascript keeps being the default language no matter what i did.