1.0.5 • Published 4 years ago

yanzi_editor v1.0.5

Weekly downloads
-
License
-
Repository
github
Last release
4 years ago

燕子在线编辑器

作为一个前端开发工程师,时不时需要写个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>

注意: image.png

具体使用

<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编辑器内容Stringtrue初始
options编辑器配置Objecttrue-

编辑器配置

配置名称说明类型必填默认值可选值
width编辑器宽度Stringtrueauto
height编辑器高度Stringtrue226px
isTools是否显示工具栏Booleanfalse
readOnly是否只读Boolean/Stringtrue|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-
1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago