🎉 An Editor Used on the Browser Side.


Keywords
wscode, vscode, edit, web
License
MIT
Install
npm install wscode@2.0.1

Documentation

🎉 Web Studio Code - An Editor Used on the Browser Side.

Downloads Version License

Web Studio Code

如何使用

import WSCode from 'wscode';

var wscode = new WSCode({

    // 编辑器挂载点(必选)
    el: document.getElementById('wscode'),

    // 初始化文本(可选)
    content:"初始化文本内容",

    // 编辑器字体(可选,默认"新宋体")
    "font-family": string,

    // 编辑器字重(可选,默认600)
    "font-weight": number,

    // 着色方法(可选,默认不特殊着色)
    shader:function(textString, colors){
        return [
            [{
                content:"内容",
                color:"文字颜色"
            },
            ...],
            ...
        ];
    },

    // 格式化方法(可选)
    format:function(textString){
        return "格式化后的文本";
    },

    // 设置颜色(可选)
    color: {
        background:"#d6d6e4", /*编辑器背景*/
        text : "#000000", /*文本颜色*/
        number:"#888484", /*行号颜色*/
        edit:"#eaeaf1", /*编辑行背景色*/
        cursor:"#ff0000", /*光标颜色*/
        select:"#6c6cf155", /*选择背景*/
    },

    // 设置一个tab表示多少个空格(可选,默认4)
    tabSpace:number,

    // 除了通过传递shader和format的方式实现着色和格式化外
    // 你还可以使用内置提供的语言来实现
    // (特别提醒:shader和format的优先级均高于这里)
    lang:{

        // 目前支持的语言(默认值"normal",表示普通文本,无特殊处理)
        type:'normal',
        color:{
            
        }
    }

});

返回的wscode里面挂载着后续可控方法:

  • 格式化代码
wscode.format();
  • 获取当前编辑器代码
wscode.valueOf();

开源协议

MIT

Copyright (c) 2020 走一步 再走一步