matt-oconnell / Vue Monaco Editor
Licence: mit
Monaco Editor Vue Component
Stars: â 187
Projects that are alternatives of or similar to Vue Monaco Editor
Vue Quill Editor
ðĄ@quilljs editor component for @vuejs
Stars: â 6,874 (+3575.94%)
Mutual labels: editor-plugin, editor
Vue Monaco
MonacoEditor component for Vue.js
Stars: â 471 (+151.87%)
Mutual labels: editor, monaco-editor
Monaco Editor
A browser based code editor
Stars: â 27,382 (+14542.78%)
Mutual labels: editor, monaco-editor
Ueditor Plus
Create By Xie Xianbin. RePackage ueditor for spring and other object storage service.
Stars: â 71 (-62.03%)
Mutual labels: editor-plugin, editor
React Monaco Editor
Monaco Editor for React.
Stars: â 2,536 (+1256.15%)
Mutual labels: editor, monaco-editor
Intellij Elixir
Elixir plugin for JetBrain's IntelliJ Platform (including Rubymine)
Stars: â 1,488 (+695.72%)
Mutual labels: editor-plugin, editor
Orchestra
One language to be RegExp's Successor. Visually readable and rich, technically safe and extended, naturally scalable, advanced, and optimized
Stars: â 103 (-44.92%)
Mutual labels: editor, monaco-editor
Custom Work For Brackets
<involuntarily lost source code> ____ Adds toolbar it include buttons show/hide with tabs of active documents on the top of the editor.
Stars: â 126 (-32.62%)
Mutual labels: editor-plugin, editor
Ngx Inline Editor
Native UI Inline-editor Angular (4.0+) component
Stars: â 172 (-8.02%)
Mutual labels: editor
Flutter image editor
Flutter plugin, support android/ios.Support crop, flip, rotate, color martix, mix image, add text. merge multi images.
Stars: â 181 (-3.21%)
Mutual labels: editor
Notepad Plus Plus
ð§ðŧââïļ Dark theme for Notepad++
Stars: â 170 (-9.09%)
Mutual labels: editor
Smartblock
intuitive block based wysiwyg editor built with React and ProseMirror
Stars: â 173 (-7.49%)
Mutual labels: editor
Pixel Editor
An online canvas based Pixel Art creation tool for Lospec.com
Stars: â 180 (-3.74%)
Mutual labels: editor
Richtexteditor
Rich text editor lib for android. (Img support) - åŊææŽįžčūåĻïžæŊæåūįïž
Stars: â 172 (-8.02%)
Mutual labels: editor
Edit Text
Collaborative rich text editor for the web. Written in Rust + WebAssembly.
Stars: â 171 (-8.56%)
Mutual labels: editor
Vscodium
binary releases of VS Code without MS branding/telemetry/licensing
Stars: â 14,639 (+7728.34%)
Mutual labels: editor
Tui.editor
ðð Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.
Stars: â 14,016 (+7395.19%)
Mutual labels: editor
Unityheapexplorer
A Memory Profiler, Debugger and Analyzer for Unity 2019.3 and newer.
Stars: â 179 (-4.28%)
Mutual labels: editor
vue-monaco-editor
!!!! This is not maintained !!!!
Monaco Editor Vue Component
Based off React Monaco Editor
Setup
npm install vue-monaco-editor --save
Simple Vue Use
import MonacoEditor from 'vue-monaco-editor'
// use in component
export default {
components: {
MonacoEditor
}
}
Component Props
Option | Type | Default | Description |
---|---|---|---|
language | String | javascript |
|
height | Number/String | 100% |
|
width | Number/String | 100% |
|
code | String | // code \n |
Initial code to show |
theme | String | vs-dark |
vs, hc-black, or vs-dark |
highlighted | Array[Object] | [{ number: 0, class: ''}] |
Lines to highlight with numbers and .classes
|
changeThrottle | Number(ms) | 0 |
throttle codeChange emit |
srcPath | String | "" |
see Webpack Use below |
editorOptions | Object | Merged with defaults below | See Monaco Editor Options |
Editor Default Options
defaults: {
selectOnLineNumbers: true,
roundedSelection: false,
readOnly: false,
cursorStyle: 'line',
automaticLayout: false,
glyphMargin: true
}
Component Events
These events are available to parent component
Event | Returns | Description |
---|---|---|
mounted |
editor [editor instance] |
Emitted when editor has mounted |
codeChange |
editor [editor instance] |
Emitted when code has changed |
Example
Component Implementation
<MonacoEditor
height="600"
language="typescript"
:code="code"
:editorOptions="options"
@mounted="onMounted"
@codeChange="onCodeChange"
>
</MonacoEditor>
Parent
module.exports = {
components: {
Monaco
},
data() {
return {
code: '// Type away! \n',
options: {
selectOnLineNumbers: false
}
};
},
methods: {
onMounted(editor) {
this.editor = editor;
},
onCodeChange(editor) {
console.log(editor.getValue());
}
}
};
Webpack Use
By default, monaco-editor is loaded from a cdn asyncronously using require
. To use a local copy of monaco-editor
with webpack, we need to expose the dependency in our build directory:
npm install copy-webpack-plugin --save-dev
Add this to your webpack.config.js:
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
plugins: [
new CopyWebpackPlugin([
{
from: 'node_modules/monaco-editor/min/vs',
to: 'vs',
}
])
]
};
Then, specify the build directory path in the srcPath
prop. See src/App.vue
for an example.
Dev Use
git clone [this repo] .
npm install
npm run dev
Edit src/App.vue
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].