Closed redisviewer closed 7 months ago
有可复现的最小例子么,像这样:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UMD Example</title>
<script src="https://unpkg.com/vue@3.3.7/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue-demi@0.14.6/lib/index.iife.js"></script>
<script src="https://unpkg.com/@monaco-editor/loader@1.4.0/lib/umd/monaco-loader.js"></script>
<script src="https://unpkg.com/@guolao/vue-monaco-editor@1.4.0/lib/umd/monaco-vue.js"></script>
<style>
html,
body,
#app {
margin: 0;
padding: 0;
height: 100%;
}
</style>
</head>
<body>
<div id="app">
<!-- Will render here -->
</div>
</body>
<script>
const { createApp, ref, shallowRef } = Vue
const { VueMonacoEditor } = monaco_vue
const app = createApp({
components: {
VueMonacoEditor,
},
template: `
<vue-monaco-editor
v-model:value="code"
theme="vs-dark"
:options="MONACO_EDITOR_OPTIONS"
@mount="handleMount"
/>
`,
setup() {
const MONACO_EDITOR_OPTIONS = {
automaticLayout: true,
formatOnType: true,
formatOnPaste: true,
}
const code = ref('// some code...')
const editorRef = shallowRef()
const handleMount = editor => (editorRef.value = editor)
return {
MONACO_EDITOR_OPTIONS,
code,
editorRef,
handleMount,
}
}
})
app.mount('#app')
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UMD Example</title>
<script src="https://unpkg.com/vue@3.3.7/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue-demi@0.14.6/lib/index.iife.js"></script>
<script src="https://unpkg.com/@monaco-editor/loader@1.4.0/lib/umd/monaco-loader.js"></script>
<script src="https://unpkg.com/@guolao/vue-monaco-editor@1.4.0/lib/umd/monaco-vue.js"></script>
<style>
html,
body,
#app {
margin: 0;
padding: 0;
height: 100%;
}
</style>
</head>
<body>
<div id="app">
<!-- Will render here -->
</div>
</body>
<script>
const { createApp, ref, shallowRef } = Vue
const { VueMonacoEditor } = monaco_vue
const app = createApp({
components: {
VueMonacoEditor,
},
template: `
<vue-monaco-editor
v-model:value="code"
theme="vs-dark"
:options="MONACO_EDITOR_OPTIONS"
@mount="handleMount"
/>
`,
setup() {
const MONACO_EDITOR_OPTIONS = {
automaticLayout: true,
formatOnType: true,
formatOnPaste: true,
readOnly: true,
readOnlyMessage: "只读!这段提醒显示不出来",
}
const code = ref('// some code...')
const editorRef = shallowRef()
const handleMount = editor => (editorRef.value = editor)
return {
MONACO_EDITOR_OPTIONS,
code,
editorRef,
handleMount,
}
}
})
app.mount('#app')
</script>
</html>
`
建议看看 monaco-editor 的文档。
// from https://microsoft.github.io/monaco-editor/docs.html#interfaces/IMarkdownString.html#value
{
readOnlyMessage?: IMarkdownString;
}
{
readOnlyMessage: {
value: '只读'
},
}
感谢,太大意了 T T
:options配置的readOnlyMessage不识别