作为一个前端开发工程师,时不时需要写个demo来测试一下,或者写了个demo测试完了,需要保存。 这个时候应该用什么编辑器呢? notepad++? 没有智能提示 Webstorm? 打开要太久了 Vscode能秒开? 没有实时预览 HbuildX有实时预览? 不能在线保存
这个时候,使用一个 web在线编辑器,基本都可以解决了
下载
npm i yanzi_editor
使用示例
<template>
<div id="app">
<!-- 使用示例 -->
<yanziEditor></yanziEditor>
</div>
</template>
<script>
import "yanzi_editor/lib/yanzi_editor.css";// 引入基本样式
import yanziEditor from "yanzi_editor/lib/yanzi_editor.umd.min.js";// 引入核心文件
export default {
name: "App",
components: {
yanziEditor//注册组件
}
};
</script>
具体使用
<yanziEditor
ref="yanzi-editor"
:options="options"
:value.sync="value"
@save="save"
@focus="focus"
@blur="blur"
@change="change"
@initSuccess="initSuccess"
></yanziEditor>
属性说明
<yanziEditor
ref="yanzi-editor"
:options="options" -- 编辑器配置参数
:value.sync="value" -- 编辑器内容,单向绑定(修改编辑器内容),如需获取编辑器最新内容,请使用 getValue() 方法获取,或者在 change事件中获得
@save="save" -- 键盘事件—— ctrl + S 的回调
@focus="focus" -- 编辑器获得焦点回调
@blur="blur" -- 编辑器失去焦点的回调
@change="change" -- 编辑器内容修改的监听回调
@initSuccess="initSuccess" -- 编辑器初始化完成的回调
></yanziEditor>
属性名称 | 说明 | 类型 | 必填 | 默认值 |
---|---|---|---|---|
value | 编辑器内容 | String | true | 初始 |
options | 编辑器配置 | Object | true | - |
配置名称 | 说明 | 类型 | 必填 | 默认值 | 可选值 |
---|---|---|---|---|---|
width | 编辑器宽度 | String | true | auto | |
height | 编辑器高度 | String | true | 226px | |
isTools | 是否显示工具栏 | Boolean | false | ||
readOnly | 是否只读 | Boolean/String | true|false|"nocursor" |
事件名称 | 说明 | 回调参数 |
---|---|---|
initSuccess | 编辑器初始化完成 | 编辑器对象 |
change | 内容改变事件 | 编辑器内容 |
focus | 获得焦点 | 当前光标位置 |
blur | 失去焦点 | 当前光标位置 |
save | 保存 | 编辑器内容 |
方法名称 | 说明 | 参数 |
---|---|---|
getValue | 获取编辑器中的内容 | - |
goPageUp | 上一页 | - |
goPageDown | 下一页 | - |
goDocStart | 到文档开头 | - |
goDocEnd | 到文档末尾 | - |
format | 格式化 | - |
reset | 重置内容 | - |
clear | 清空内容 | - |
setOptions | 设置一个配置参数 | k=参数名,v=参数值 |
undo | 撤销一次操作\ ctrl + Z | - |
redo | 恢复,重做一次操作 ctrl + shift + Z | - |