Web-Studio-Code 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
Web-Studio-Code 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
Web-Studio-Code 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
Web-Studio-Code 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
Web-Studio-Code 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !

软件简介

一款基本的Web编辑器,可以基于此二次开发更具有针对性的编辑器或富文本编辑器。

如何引入

我们推荐你使用npm的方式安装和使用:

npm install --save wscode

当然,你也可以通过CDN的方式引入:

<script src="https://cdn.jsdelivr.net/npm/wscode"></script>

如何使用

  • 特别注意:当前最后一个可用版本(非beta和alpha版本)请查看master分支的说明!
import WSCode from 'wscode';

var wscode = new WSCode({

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

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

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

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

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

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

    // 辅助输入(可选)
    input: function(dom, options, contentArray){
        /*
        1.其中dom和contentArray分别表示辅助的悬浮结点和内容数组;
        2.options的一些重要的辅助信息,是一个json,包括以下内容:
            {
                leftNum:光标前面有多少个字符
                lineNum:当前行之前有多少行
                x:光标left坐标
                y:光标top坐标
                lineHeight:一行文本的高
            }
        */

       // 返回的是键盘操作,可以有任意多个(可选)
       return {
            // keyString可以取:
            //    ”up“:按下键盘向上键
            //    ”down“:按下键盘向下键
            //    等
            // 具体的查看这里: https://yelloxing.github.io/core.js/tools-api/index.html#keyString
            "keyString":function(){

                // 最后返回true或false,默认false表示阻止默认行为(或原有行为)
                return boolean;
            },
            ...
       };
    },

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

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

});
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (1)

加载中
心叶软件作者
如果希望获得最新支持,可以使用派生软件代替: https://github.com/hai2007/Open-Web-Editor
01/23 11:58
回复
举报
更多评论
暂无内容
发表于程序人生专区
2020/01/12 10:56

Web 版 VS Code (Visual Studio Online) 即将来临!

今天(北京时间 2019 年 5 月 7 日),在微软Build 2019开发者大会上,微软宣布了 Web 版本的 VS Code - Visual Studio Online。 相信读者们对Web 版 VS Code 期待已久了。对 VS Code 熟悉的朋友应该知道,VS Code 是基于 Electron 开发的,而 Electron 是使用 Web 技术栈(JavaScript, HTML 和 CSS)来开发跨平台桌面应用的。所以,把 VS Code 搬到浏览器中,则是必然的趋势。 此次 Build 大会上,微软发布了 Visual Studio On...

0
0
2020/05/25 09:05

Web 版 VS Code (Visual Studio Online) 即将来临!

今天(北京时间 2019 年 5 月 7 日),在微软Build 2019开发者大会上,微软宣布了 Web 版本的 VS Code - Visual Studio Online。 相信读者们对Web 版 VS Code 期待已久了。对 VS Code 熟悉的朋友应该知道,VS Code 是基于 Electron 开发的,而 Electron 是使用 Web 技术栈(JavaScript, HTML 和 CSS)来开发跨平台桌面应用的。所以,把 VS Code 搬到浏览器中,则是必然的趋势。 此次 Build 大会上,微软发布了 Visual Studio On...

0
0
发表于开发技能专区
2020/07/09 23:25

Web Template Studio 发布!在 VS Code 中轻松创建 Web 应用

作为一个 Web 应用开发者,Scaffolding Tool(脚手架工具)一定是在创建项目时的重要工具。许多开发者会习惯于使用基于 CLI 的脚手架工具来创建 Web 应用,也有许多开发者喜欢使用类似于 VS IDE 的基于 UI 的 Wizard 向导。 近期(2019 年 5 月 15 日),微软发布了 Web Template Studio for VS Code,使得开发者在 VS Code 中可以通过基于 UI 的 Wizard 向导,快速地创建 Web 应用。 下面我们就来看看,如何使用 Web Template...

0
0
发表了博客
2016/11/28 18:05

Visual Studio Code

1.安装cpptools插件 2.安装 code runner插件 3.安装 native debug 插件,用于gdb图形化调试你的C/C++程序 Visual Studio Code 和GCC共同调试C/C++程序 调试C/C++程序 添加头文件索引路径。在hello.c中,你会发现include头文件那一行下面有红色色的波浪线,代表vs code的cpptools插件找不到相应路径,将鼠标移到这一行点击。 "configurations": [{ "name": "Mac", "includePath": [ "${...

0
0
发表了博客
2018/08/31 12:29

Visual Studio Code -VS Code

VS Code 免费开源的编辑器,支持 windows、 mac、 Linux。 微软出品 官网:https://code.visualstudio.com/ 下载地址:https://code.visualstudio.com/download 刚安装好 就会提示你安装中文语言包,然后实现界面全中文化。 不愧是微软出品 选择打开文件夹 来打开项目 打开终端:control + ` 常用插件: vscode-icons 安装后 重新加载并不生效,需要在 Code->首选项->文件图标主题中 选择安装的主题 Auto Rename Tag 改变html标...

0
0
发表了博客
2018/12/14 10:37

Visual Studio和Visual Studio Code的区别

一、含义不一样 (1)Visual Studio(简称VS)是美国微软公司的开发工具包系列产品,是一个基本完整的开发工具集,它包括了整个软件生命周期中所需要的大部分工具,如UML工具、代码管控工具、集成开发环境(IDE)等。通俗的讲,是一款编译器。 (2)Visual Studio Code是美国微软公司的一个项目:运行于 Mac OS X、Windows和 Linux 之上的,针对于编写现代 Web 和云应用的跨平台源代码编辑器(像Notepad++)。通俗地讲,是一款编辑...

0
0
发表于数据库专区
2020/12/04 22:00

对于Web开发最棒的22个Visual Studio Code插件

翻译    原文作者:James Quick    原文地址:https://scotch.io/bar-talk/22-best-visual-studio-code-extensions-for-web-development 文章目录 1. Debugger for chrome 2. Javascript (ES6) Code Snippets 3. ESLint 4. Live server 5. Bracket Pair Colorizor 6. Auto Rename Tag 7. Quokka 8. Path Intellisense 9. Project Manager 10. Editor Config 11. Sublime Text Keymap 12. Browser Preview 13. Git Lens 14. ...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
1 评论
8 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部