当前位置:主页 > JavsScript库 > 文本 >

iblize 最小 HTML/CSS/JavaScript 代码编辑器 - iblize
栏目分类:文本   发布日期:2021-08-21   浏览次数:

iblize 是一个最小的干净代码编辑器,支持超过 250 种语言。

特点:

  • 语法高亮。

  • 移动友好。

  • 6个美丽的主题。

  • 支持 250 多种语言。

  • 行号。

  • 只读模式。

  • 自定义标签大小。

  • 自动结束括号和报价。

  • 自动添加新行缩进。

  • 撤消和重做功能。

使用:

1. 加载文档中的 iblize.css 和 iblize.js 文件。

<link rel="stylesheet" href="dist/iblize.css" />
<script src="dist/iblize.js"></script>

2. 或者使用 NPM 安装并导入 iblize。

# NPM
$ npm i iblize --save
import Iblize from "iblize";
import "iblize/dist/iblize.css";

3. 初始化 iblize 以创建默认的 JavaScript 代码编辑器。

<div id="editor"></div>
const iblize = new Iblize("#editor");

4. 指定语言。您可以在./dist/languages文件夹下找到所有支持的语言。

const iblize = new Iblize("#editor",{
      language: 'css'
});

5. 确定是否显示行号。默认值:true。

const iblize = new Iblize("#editor",{
      lineNumber: false
});

6. 启用只读模式。默认值:false。

const iblize = new Iblize("#editor",{
      readOnly: true
});

7. 自定义标签大小。默认值:2。

const iblize = new Iblize("#editor",{
      tabSize: 4
});


8. 更改默认主题。所有可用的主题:

  • iblize-light

  • iblize-dark

  • okaidia

  • solarized-light

  • tomorrow-night

  • twilight

const iblize = new Iblize("#editor",{ 
      theme: "iblize-light"
});

9. API 方法。

// 获取编辑器内容
blize.getValue();
 
// 设置编辑器内容并确定是否将值记录到历史记录中。
blize.setValue( value: String, record: Boolean);
 
// 获取/设置选项
iblize.getOptions();
iblize.setOptions({
  // 选项
});
 
// 获取选择
// 返回 { start, end, dir }
iblize.getSelection();
 
// 设置选择
iblize.setSelection(start: Number, end: Number[, dir: String]);
 
// 获取当前光标位置
iblize.getCursor();
 
// 设置光标位置
iblize.setCursor(pos: Number);
 
// 获取当前活动行
iblize.getActiveLine();
 
// 获取总行数
iblize.getTotalLine();
 
// 从特定行获取值
iblize.getLineValue(line: Number);
 
// 插入一个标签
iblize.insertTab();
 
// 插入文本
iblize.insertText(from: Number, text: String [, options: Object]);
 
// 移除文本
iblize.removeText(from: Number, to: Number [, options: Object]);
 
// 撤销/重做
iblize.undo();
iblize.redo();

10.当编辑器更新时执行一个函数。

iblize.onUpdate((value) => {
  // 做点什么事情
});



官方网站:https://github.com/mcanam/iblize

相关热词: iblize代码编辑器

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库