在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:Open-Web-Editor开源软件地址:https://gitee.com/hai2007/Open-Web-Editor开源软件介绍:Open Web Editor - ✍️ Web版本的可扩展代码编辑器
Issues使用的时候遇到任何问题或有好的建议,请点击进入issue,欢迎参与维护!
如何引入我们推荐你使用npm的方式安装和使用: npm install --save open-web-editor 当然,你也可以通过CDN的方式引入: <script src="https://cdn.jsdelivr.net/npm/open-web-editor@0"></script> 如何使用
import OpenWebEditor from 'open-web-editor';var owe = new OpenWebEditor({ // 编辑器挂载点(必选) el: document.getElementById('owe'), // 初始化文本(可选) 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“:按下键盘向下键 // 等 "keyString":function(){ // 最后返回true或false,默认false表示阻止默认行为(或原有行为) return boolean; }, ... }; }, // 设置颜色(可选) color: { background: "#d6d6e4", /*编辑器背景*/ text : "#000000", /*文本颜色*/ number: "#888484", /*行号颜色*/ edit: "#eaeaf1", /*编辑行背景色*/ cursor: "#ff0000", /*光标颜色*/ select: "#6c6cf1", /*选择背景*/ }, // 设置一个tab表示多少个空格(可选,默认4) tabSpace: number, // 是否只读(默认false,如果设置true表示当前编辑器可以选择复制等操作,不可以进行内容修改) readonly:boolean, // 行号是否隐藏(默认false,如果设置true表示当前编辑器行号隐藏) noLineNumber:boolean}); 返回的owe里面挂载着后续可控方法:
owe.format();
// 如果content传递了,会先设置内容owe.valueOf([content]);
// 成功回调和错误回调都非必输owe.copy(callback,errorback);
owe.updated(callback);
// cursor和length默认都是0,前者表示光标偏移量,后者表示替换个数owe.input(content[, cursor, number]); 内置着色器对于上面的选项 new OpenWebEditor({ ... // lang是一个字符串,表示需要着色的语言 // colors可选,表示使用的色彩 // 此外,colors具体有多项,都可选,配置你希望修改的即可,其余自动使用默认值 shader:[lang,colors] ...}); 下面来列举出所有可选的语言: htmlshader:['html',{ "text": "#000000",/*文本颜色*/ "annotation": "#6a9955",/*注释颜色*/ "insign": "#ffffff",/*符号颜色*/ "node": "#1e50b3",/*结点颜色*/ "attrKey": "#1e83b1",/*属性名称颜色*/ "attrValue": "#ac4c1e",/*属性值颜色*/ "css":{ // 查看后续css语言部分 }, "javascript":{ // 查看后续javascript语言部分 }}] cssshader:['css',{ "annotation": "#6a9955",/*注释颜色*/ "insign": "#ffffff",/*符号颜色*/ "selector": "#1e50b3",/*选择器*/ "attrKey": "#1e83b1",/*属性名称颜色*/ "attrValue": "#ac4c1e"/*属性值颜色*/}] javascriptshader:['javascript',{ "text": "#000000",/*文本颜色*/ "annotation": "#6a9955",/*注释颜色*/ "insign": "#ffffff",/*符号颜色*/ "key": "#ff0000",/*关键字颜色*/ "string": "#ac4c1e",/*字符串颜色*/ "funName": "#1e50b3",/*函数名称颜色*/ "execName": "#1e83b1"/*执行方法颜色*/}] 开源协议Copyright (c) 2020-2022 hai2007 走一步,再走一步。 |
请发表评论