EditorCode
代码编辑器。
#属性
- 属性说明:
参数名 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
value | string | 否 | 空字符串 | 编辑器里面的内容 |
width | string, number | 否 | 编辑器的宽 | |
height | string, number | 否 | 400 | 编辑器的高 |
language | string | 否 | javascript | 编辑器里面的支持的语言,javascript、java、css、sql、html、markdown |
使用方法
代码示例:
// 在script标签中按需引入 import { EditorCode } from '@jecloud/ui'; export default { components: { EditorCode }, setup() { const value = ref(); const language = ref("javascript"); // Ctrl + S const onSave = function (value) { console.log('保存成功:', value); }; const onInit = function ($editor) { console.log('初始化:', $editor, editor.value.getEditor()); }; const onChange = function (value, evt) { console.log('数据变动:', value, evt); }; return { value, options, editor, language, onSave, onInit, onChange }; } }; // 在vue的template标签中 <EditorCode ref="editor" v-model:value="value" v-model:language="language" height="400" width="800" @save="onSave" @init="onInit" @change="onChange" />
事件脚本示例:
const { EditorCode } = JE.useUi(); const { h, ref }= JE.useVue(); const values = ref(""); return h(EditorCode, {style: {width: "800px",height: "400px"}, value: values.value, onSave: function(value){ console.log('保存成功:', value); }, onInit: function(){ console.log('初始化:', $editor); }, onChange: function(value, ev){ console.log('数据变动:', value, evt); } },);
最后编辑: 秦永莲 文档更新时间: 2024-07-26 14:15 作者:秦永莲