如何将c#在线编辑器嵌入自己项目
WebAssembly实现的在浏览器端去执行我们的c#代码，基于Roslyn提供的Api封装一套简单的编译，并且封装了js的支持，让嵌入的方式更简单。
使用现有项目嵌入在线编辑器
启动项目
yarn start
我在我的项目中添加了编辑器的单独页面，下面是完整的代码，
import React, { Component } from 'react'
import './index.css';
export default class Ide extends Component {
render( {
return (
<iframe style={{height:"100%",width:'100%'}} src='https://webassembly.tokengo.top:8843/'></iframe>
}
}
看到上面的实现方式，是通过iframe直接嵌入的，当然这是因为我提供的网站并没有做跨域限制，所以可以直接嵌入，也可以供大家一快使用。
然后右键编辑区域，会出现执行按钮，点击执行
嵌入独有的编辑器
当然，也有人觉得嵌入他人的博客会受制于他人，如果别人的站点挂了就无法使用，所以想知道是否可以自己搭建
docker镜像，直接部署一个使用，另一个就是使用sdk功能自己实现界面编辑，只需要使用sdk提供的编译功能
docker部署
registry.cn-shenzhen.aliyuncs.com/gotrays/web-actuator:latest，由阿里云的免费镜像仓库提供。
可以使用一下命令拉起执行一个简单的仓库
docker run -p 8888:80 --name web-actuator registry.cn-shenzhen.aliyuncs.com/gotrays/web-actuator:latest
使用SDK功能
项目将简单的介绍在JavaScript中使用动态编辑c#的SDK。
git clone https://github.com/239573049/WebActuator.git
然后使用vs打开WebActuator.sln解决方案，
WebActuator.WebAssembly项目进行发布
_framework 文件夹，然后删除文件夹下面的*.gz文件，因为默认使用的br压缩，所以不需要使用*.gz
index.html的文件到我们自己的项目当中
index.html
<script src="_framework/blazor.webassembly.js" autostart="false"></script>
<script type="module">
import { BrotliDecode } from './decode.min.js';
import * as exportManage from './exportManage.js';
window.exportManage = exportManage;
Blazor.start({
loadBootResource: function (type, name, defaultUri, integrity {
if (type !== 'dotnetjs' {
return (async function ( {
const response = await fetch(defaultUri + '.br', { cache: 'no-cache' };
if (!response.ok {
throw new Error(response.statusText;
}
const originalResponseBuffer = await response.arrayBuffer(;
const originalResponseArray = new Int8Array(originalResponseBuffer;
const decompressedResponseArray = BrotliDecode(originalResponseArray;
const contentType = type ===
'dotnetwasm' ? 'application/wasm' : 'application/octet-stream';
return new Response(decompressedResponseArray,
{ headers: { 'content-type': contentType } };
}(;
}
}
};
</script>
将以上代码添加的我们项目的index.html中
let assemblys=["https://assembly.tokengo.top:8843/System.dll",
"https://assembly.tokengo.top:8843/System.Buffers.dll",
"https://assembly.tokengo.top:8843/System.Collections.dll",
"https://assembly.tokengo.top:8843/System.Core.dll",
"https://assembly.tokengo.top:8843/System.Linq.Expressions.dll",
"https://assembly.tokengo.top:8843/System.Linq.Parallel.dll",
"https://assembly.tokengo.top:8843/mscorlib.dll",
"https://assembly.tokengo.top:8843/System.Linq.dll",
"https://assembly.tokengo.top:8843/System.Console.dll",
"https://assembly.tokengo.top:8843/System.Runtime.dll",
"https://assembly.tokengo.top:8843/System.Net.Http.dll",
"https://assembly.tokengo.top:8843/System.Private.CoreLib.dll",
"https://assembly.tokengo.top:8843/System.Console.dll"]
await window.exportManage.SetReferences(assemblys;
使用 await window.exportManage.SetReferences(assemblys;提供默认需要编译的程序集
await window.exportManage.SetReferences(assemblys;的代码是在exportManage.js中提供的api
监听Console输出
window.OnWriteLine = (message: string => {
console.log(message;
}
window.OnDiagnostic = (json: string => {
console.log(json;
}
上面是SDK提供的控制台拦截器，
OnWriteLine是控制台的输出
OnDiagnostic是早编译的错误和日志
await window.exportManage.RunSubmission(`Console.WriteLine("hello world";`, false;
执行编译，然后我们就可以在浏览器控制台中看到编译输出了
WebActuator.Web项目当中的ClientApp的代码
monaco实现的简单的编辑器。
APIs列表：
// 获取当前引用
window.exportManage.Using(
// 添加默认引用
window.exportManage.SetUsing(using
// 删除指定引用
window.exportManage.RemoveUsing(using
// 清空全局引用
window.exportManage.ClearUsing(
// 获取当前编译的语言版本
window.exportManage.LanguageVersion(
// 修改编译的语言版本
window.exportManage.SetLanguageVersion(languageVersion
// 获取当前依赖的程序集URL
window.exportManage.References(
// 添加编译依赖的程序集
window.exportManage.SetReferences(references
// 只编译代码
window.exportManage.TryCompile(source, concurrentBuild
// 执行编译代码
window.exportManage.RunSubmission(code, concurrentBuild
以上只是当前版本的APIs，后续还会优化并且更新，打造一个好用方便的在线编译c#代码的编辑器。
结尾
仓库地址：https://github.com/239573049/WebActuator 欢迎PR和star
技术交流群：737776595