1.2.3 • Published 5 years ago

codemirror-sdk v1.2.3

Weekly downloads
11
License
MIT
Repository
github
Last release
5 years ago

codemirror-sdk

基于CodeMirror 封装 在线编程

Browser

查看支持情况

支持情况

目前编辑器 支持前端语言在线编译（scss less es6 typescript vue react）
注意 vue react 只能以下面例子方式运行
后台语言支持 java python2 pyton3
注意 后台语言 只能通过接口后台编译

vue:
//在html
<div id="app">
  {{ message }}
</div>
//在js中
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

react:
//html中
<div id="root">
</div>
//js中
ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

Use

npm install codemirror-sdk --save  
or
yarn add codemirror-sdk

import 'codemirror-sdk/dist/css/sdk.min.css'
let codemirrorSdk = require('codemirror-sdk').codemirrorSDK;
var Online_Programming = new codemirrorSdk({});


Browser:
/按自己目录位置确定
<link rel="stylesheet" href="/dist/css/sdk.min.css">
<script src="/dist/js/sdk.min.js"></script>
var Online_Programming = new codemirrorSDK.OnlineProgramming({})

start

yarn install
yarn start

extraKeys

Tab //智能提示
Ctrl-/: //注释
F11: //全屏 退出全屏
Ctrl-J:  //跳转匹配标签
Ctrl-F / Cmd-F //开始搜索    (Ctrl-F  输入内容  回车)
Ctrl-G / Cmd-G //找下一个  (Ctrl-F 匹配内容后   Ctrl-G查找下一个)
Shift-Ctrl-G / Shift-Cmd-G //找到上一个   (Ctrl-F 匹配内容后  Shift-Ctrl-G查找上一个)
Shift-Ctrl-F / Cmd-Option-F //更换  (Shift-Ctrl-F 出現搜索框  輸入要替換内容  回車)
Shift-Ctrl-R / Shift-Cmd-Option-F //全部替换
ALT-G //跳到指定位置  10：80

Options

id

String 容器ID
必须参数 id:'test'

readOnly

boolean 编辑器是否可输入
readOnly:true

isPaste

boolean 编辑器是否可粘贴
isPaste:true

currentMode

string 编辑器初始语言
currentMode:'java'

disabledForSelect

boolean 是否可以切换语言
disabledForSelect:true

disabledForInput

boolean 是否禁用 外部链接输入框
disabledForInput:false

styleAreaIsShow

boolean 是否生成样式展示区
styleAreaIsShow:true

iconSettingIsShow

boolean 是否生成设置按钮
iconSettingIsShow:true

cssPreprocessor

string css 默认处理器

//eg:
cssPreprocessor: 'less'   //less scss   注意：less(ie11)  scss(不支持ie)

jsPreprocessor

string js 默认处理器

//eg:
jsPreprocessor: 'es6'   //es6 typescript

defaultExternalLink

object 默认引入的外部链接

//eg
defaultExternalLink: {  //默认引入的外部链接
                'css': [
                    'http://fedcdn.open.com.cn/fedcdn/OnlineCode/bootstrap.min.css'
                ],
                'js': [
                    'http://fedcdn.open.com.cn/fedcdn/OnlineCode/vue.js',
                    'http://fedcdn.open.com.cn/fedcdn/OnlineCode/jquery.min.js'
                ]
            },

externalLink

object 外部链接可选范围 

//请按照例子给定格式传入
externalLink: {
		'js': [
			{
				name: 'vue',
				version: '2.0',
				link: 'https://cdn.bootcss.com/vue/2.6.4/vue.js'
			},
			{
				name: 'react',
				version: '16.04',
				link: 'https://cdn.staticfile.org/react/16.4.0/umd/react.development.js'
			},
			{
				name: 'react-dom',
				version: '16.04',
				link: 'https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js'
			},
			{
				name: 'jquery',
				version: '3.3.1',
				link: 'https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js'
			},
			{
				name: 'bootstrap',
				version: '3.0.0',
				link: 'https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js'
			}
		],
		'css': [
			{
				name: 'bootstrap',
				version: '3.0.0',
				link: 'https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css'
			}
		]
	}

button

array 底部按钮表现形势 如果不传 则 不显示 

button: [
		{
			text: '点击运行',
			style: 'background: #ff0000'
		},
		{
			text: '重置编码',
			style: 'background: #ff6600'
		}
	]

Api

SetEditorVal()

编辑器赋值

参数：

eg:
SetEditorVal(
	[
		{
			key: 'html',
			val: '<div>123</div>'
		},
		{
			key: 'css',
			val: 'html{color:#fff;}'
		},
		{
			key: 'js',
			val: 'console.log("123")'
		}
	]
)

SetEditorVal(
	[
		{
			key: 'java',
			val: 'value'
		}
	]
)

GetEditorVal()

获取编辑器内容

获取内容格式
[
	{
		html: '<div>123</div>'
	},
	{
		css: 'html{color:#fff;}'
	},
	{
		js: 'console.log("123")'
	}
]

[
	{
		java: 'value'
	}
]

ResetContent()

重置代码

RequestStyleSetVal()

展示区 展示
参数:array
注意：传入参数数据格式 要和获取内容返回的数据格式保持一致
html css js 语言可以直接展示，后端语言需要调用接口编译后 修改对应语言的val展示

[
	{
		html: '<div>123</div>'
	},
	{
		css: 'html{color:#fff;}'
	},
	{
		js: 'console.log("123")'
	}
]

EventForButton()

底部操作按钮事件注册
参数：array
注意：请按照 下面例子格式传入 text 要与配置的按钮名称一致

eg:
EventForButton(
	[
		{
			text: '点击运行', //这里text 要与上面传入的button text一致
			callback: function () {
				console.log('点击运行');
			}
		},
		{
			text: '重置编码',
			callback: function () {
				console.log('重置编码');
			}
		}
	]
)

我们举一个大栗子

        var Online_Programming = new codemirrorSDK.OnlineProgramming({
            id: 'editor-box', //容器ID
            readOnly: false,//禁用编辑器
            isPaste: false,//是否 禁用粘贴
            currentMode: 'html/css/js',//编辑器 默认 表现形势
            disabledForSelect: false,//是否禁用 select -->是否可以切换 编辑器模式
            disabledForInput: false,//是否禁用 input  -->是否 可以 允许 用户 增加 外部链接
            styleAreaIsShow: true,//是否生成样式展示区
            iconSettingIsShow: true,//是否生成设置按钮
            cssPreprocessor: 'less',//css 默认处理器
            jsPreprocessor: '',//js 默认处理器
            defaultExternalLink: {  //默认引入的外部链接
                'css': [
                    'http://fedcdn.open.com.cn/fedcdn/OnlineCode/bootstrap.min.css'
                ],
                'js': [
                    'http://fedcdn.open.com.cn/fedcdn/OnlineCode/vue.js',
                    'http://fedcdn.open.com.cn/fedcdn/OnlineCode/jquery.min.js'
                ]
            },
            externalLink: { //支持外部链接
                'js': [
                    {
                        name: 'vue',
                        version: '2.0',
                        //link: 'https://cdn.bootcss.com/vue/2.6.4/vue.js'
                        link: 'http://fedcdn.open.com.cn/fedcdn/OnlineCode/vue.js'
                    },
                    {
                        name: 'react',
                        version: '16.4.0',
                        //link: 'https://cdn.staticfile.org/react/16.4.0/umd/react.development.js'
                        link: 'http://fedcdn.open.com.cn/fedcdn/OnlineCode/react.development.js'
                    },
                    {
                        name: 'react-dom',
                        version: '16.4.0',
                        //link: 'https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js'
                        link: 'http://fedcdn.open.com.cn/fedcdn/OnlineCode/react-dom.development.js'
                    },
                    {
                        name: 'jquery',
                        version: '1.8.1',
                        //link: 'https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js'
                        link: 'http://fedcdn.open.com.cn/fedcdn/OnlineCode/jquery.min.js'
                    },
                    {
                        name: 'bootstrap',
                        version: '3.3.7',
                        //link: 'https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js'
                        link: 'http://fedcdn.open.com.cn/fedcdn/OnlineCode/bootstrap.min.js'
                    }
                ],
                'css': [
                    {
                        name: 'bootstrap',
                        version: '3.3.7',
                        //link: 'https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css'
                        link: 'http://fedcdn.open.com.cn/fedcdn/OnlineCode/bootstrap.min.css'
                    }
                ]
            },
            button: [ //底部按钮表现形势    如果不传  则 不显示
                {
                    text: '点击运行',
                    style: 'background: #ff0000'
                },
                {
                    text: '重置编码',
                    style: 'background: #ff6600'
                }
            ]
        });
        //编辑器 模式内容
        Online_Programming.SetEditorVal(
            [
                {
                    key: 'html',
                    val: '<div>123</div>'
                },
                {
                    key: 'css',
                    val: 'html{color:#fff;}'
                },
                {
                    key: 'js',
                    val: 'alert("123")'
                }
            ]
        )
        //编辑器 底部 按钮事件注册
        Online_Programming.EventForButton(
            [
                {
                    text: '点击运行', //这里text 要与上面传入的button text一致
                    callback: function () {
                        // console.log('点击运行');
                        var val = Online_Programming.GetEditorVal(); //获取编辑器内容
                        // console.log(val)
                        Online_Programming.RequestStyleSetVal(val) //展示区 展示   注意：不要改变val 的数据格式
                    }
                },
                {
                    text: '重置编码',
                    callback: function () {
                        // console.log('重置编码');
                        Online_Programming.ResetContent(); //重置代码

                        // Online_Programming.SetEditorVal(  //重置后 是否要显示 默认值
                        //     [
                        //         {
                        //             key: 'html',
                        //             val: '<div>123</div>'
                        //         },
                        //         {
                        //             key: 'css',
                        //             val: 'html{color:#fff;}'
                        //         },
                        //         {
                        //             key: 'js',
                        //             val: 'alert("123")'
                        //         }
                        //     ]
                        // )
                    }
                }
            ]
        )


console.log(Online_Programming)
codemirrorsdk
codemirrorsortablejs
@everything-registry/sub-chunk-1350
1.2.3

5 years ago

1.2.2

5 years ago

1.2.1

5 years ago

1.2.0

5 years ago

1.1.8

5 years ago

1.1.7

5 years ago

1.1.6

5 years ago

1.1.5

5 years ago

1.1.4

5 years ago

1.1.3

5 years ago

1.1.2

5 years ago

1.1.1

5 years ago

1.1.0

5 years ago

1.0.9

5 years ago

1.0.8

5 years ago

1.0.7

5 years ago

1.0.6

5 years ago

1.0.5

5 years ago

1.0.4

5 years ago

1.0.3

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago