1 | <p align="center"><a href="https://github.com/yelloxing/Web-Studio-Code" target="_blank" rel="noopener noreferrer">
|
2 | <img width="400" src="https://yelloxing.github.io/Web-Studio-Code/logo.png" alt="Web Studio Code"></a></p>
|
3 |
|
4 | # 🎉 Web Studio Code - An Editor Used on the Browser Side.
|
5 |
|
6 | <p align="center">
|
7 | <a href="https://yelloxing.github.io/npm-downloads/?interval=7&packages=wscode"><img src="https://img.shields.io/npm/dm/wscode.svg" alt="Downloads"></a>
|
8 | <a href="https://packagephobia.now.sh/result?p=wscode"><img src="https://packagephobia.now.sh/badge?p=wscode" alt="install size"></a>
|
9 | <a href="https://www.jsdelivr.com/package/npm/wscode"><img src="https://data.jsdelivr.com/v1/package/npm/wscode/badge" alt="CDN"></a>
|
10 | <a href="https://www.npmjs.com/package/wscode"><img src="https://img.shields.io/npm/v/wscode.svg" alt="Version"></a>
|
11 | <a href="https://github.com/yelloxing/Web-Studio-Code/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/wscode.svg" alt="License"></a>
|
12 | </p>
|
13 |
|
14 | <p align="center"><a href="https://yelloxing.github.io/Web-Studio-Code/Web-Studio-Code.html" target="_blank" rel="noopener noreferrer">
|
15 | <img width="500" src="https://yelloxing.github.io/Web-Studio-Code/snipping.png" alt="Web Studio Code"></a></p>
|
16 |
|
17 | > 温馨提示:使用过程中,你可以查看 [版本历史](./CHANGELOG) 来了解是否需要升级!
|
18 |
|
19 | > 兼容Chrome、Safari、Edge、Firefox、Opera和IE(9+)等常见浏览器!
|
20 |
|
21 | ## 如何引入
|
22 |
|
23 | 我们推荐你使用npm的方式安装和使用:
|
24 |
|
25 | ```bash
|
26 | npm install --save wscode
|
27 | ```
|
28 |
|
29 | 当然,你也可以通过CDN的方式引入:
|
30 |
|
31 | ```html
|
32 | <script src="https://cdn.jsdelivr.net/npm/wscode"></script>
|
33 | ```
|
34 |
|
35 | ## 如何使用
|
36 |
|
37 | - 特别注意:当前最后一个可用版本(非beta和alpha版本)请查看master分支的说明!
|
38 |
|
39 | ```js
|
40 | import WSCode from 'wscode';
|
41 |
|
42 | var wscode = new WSCode({
|
43 |
|
44 | // 编辑器挂载点(必选)
|
45 | el: document.getElementById('wscode'),
|
46 |
|
47 | // 初始化文本(可选)
|
48 | content: "初始化文本内容",
|
49 |
|
50 | // 编辑器字体(可选,默认"新宋体")
|
51 | "font-family": string,
|
52 |
|
53 | // 编辑器字重(可选,默认600)
|
54 | "font-weight": number,
|
55 |
|
56 | // 着色方法(可选,默认不特殊着色)
|
57 | shader: function(textString){
|
58 | return [
|
59 | [{
|
60 | content:"内容",
|
61 | color:"文字颜色"
|
62 | },
|
63 | ...],
|
64 | ...
|
65 | ];
|
66 | },
|
67 |
|
68 | // 格式化方法(可选)
|
69 | format: function(textString, tabNumber){
|
70 | return "格式化后的文本";
|
71 | },
|
72 |
|
73 | // 辅助输入(可选)
|
74 | input: function(dom, options, contentArray){
|
75 | /*
|
76 | 1.其中dom和contentArray分别表示辅助的悬浮结点和内容数组;
|
77 | 2.options的一些重要的辅助信息,是一个json,包括以下内容:
|
78 | {
|
79 | leftNum:光标前面有多少个字符
|
80 | lineNum:当前行之前有多少行
|
81 | x:光标left坐标
|
82 | y:光标top坐标
|
83 | lineHeight:一行文本的高
|
84 | }
|
85 | */
|
86 |
|
87 | // 返回的是键盘操作,可以有任意多个(可选)
|
88 | return {
|
89 | // keyString可以取:
|
90 | // ”up“:按下键盘向上键
|
91 | // ”down“:按下键盘向下键
|
92 | // 等
|
93 | // 具体的查看这里: https://yelloxing.github.io/core.js/tools-api/index.html#keyString
|
94 | "keyString":function(){
|
95 |
|
96 | // 最后返回true或false,默认false表示阻止默认行为(或原有行为)
|
97 | return boolean;
|
98 | },
|
99 | ...
|
100 | };
|
101 | },
|
102 |
|
103 | // 设置颜色(可选)
|
104 | color: {
|
105 | background: "#d6d6e4", /*编辑器背景*/
|
106 | text : "#000000", /*文本颜色*/
|
107 | number: "#888484", /*行号颜色*/
|
108 | edit: "#eaeaf1", /*编辑行背景色*/
|
109 | cursor: "#ff0000", /*光标颜色*/
|
110 | select: "#6c6cf1", /*选择背景*/
|
111 | },
|
112 |
|
113 | // 设置一个tab表示多少个空格(可选,默认4)
|
114 | tabSpace: number,
|
115 |
|
116 | // 是否只读(默认false,如果设置true表示当前编辑器可以选择复制等操作,不可以进行内容修改)
|
117 | readonly:boolean,
|
118 |
|
119 | // 行号是否隐藏(默认false,如果设置true表示当前编辑器行号隐藏)
|
120 | noLineNumber:boolean
|
121 |
|
122 | });
|
123 | ```
|
124 |
|
125 | 返回的wscode里面挂载着后续可控方法:
|
126 |
|
127 | - 格式化代码
|
128 |
|
129 | ```js
|
130 | wscode.format();
|
131 | ```
|
132 |
|
133 | - 获取当前编辑器代码
|
134 |
|
135 | ```js
|
136 | wscode.valueOf();
|
137 | ```
|
138 |
|
139 | - 编辑器管理的文本发生改变后会主动触发callback方法
|
140 |
|
141 | ```js
|
142 | wscode.updated(callback);
|
143 | ```
|
144 |
|
145 | - 在当前光标位置输入新的内容
|
146 |
|
147 | ```js
|
148 | // cursor和length默认都是0,前者表示光标偏移量,后者表示替换个数
|
149 | wscode.input(content[, cursor, number]);
|
150 | ```
|
151 |
|
152 | - 触发编辑器命令
|
153 |
|
154 | ```js
|
155 | /**
|
156 | * 参数:terminalString 字符串类型,表示命令语句,有以下可选:
|
157 | * 1.'ctrl+a':全选
|
158 | * 2.'ctrl+c':复制
|
159 | * 3.'ctrl+x':剪切
|
160 | * 4.'delete':删除当前选中的内容
|
161 | *
|
162 | * 温馨提示:需要注意的是,部分命令需要用户交互触发才可以成功,这主要是安全性问题导致的!
|
163 | */
|
164 | wscode.terminal(terminalString);
|
165 | ```
|
166 |
|
167 | ## 相关项目
|
168 |
|
169 | - [wscode-prettify](https://github.com/yelloxing/wscode-prettify):通用的代码着色器
|
170 | - [Open-Code-Editor](https://github.com/yelloxing/Open-Code-Editor):一个小巧且可个性化配置的代码编辑器
|
171 |
|
172 | ## 开源协议
|
173 |
|
174 | [MIT](https://github.com/yelloxing/Web-Studio-Code/blob/master/LICENSE)
|
175 |
|
176 | Copyright (c) 2020 走一步 再走一步
|