怎样才能在编辑器里嵌入自己项目

我会带着你远行 2024-03-22 13:46 97阅读 0赞

首先我们需要介绍一下这个在线编辑器，当前的在线编辑器支持c\#的代码编译运行，并且无需后台服务，基于`WebAssembly`实现的在浏览器端去执行我们的`c#`代码，基于`Roslyn`提供的`Api`封装一套简单的编译，并且封装了`js`的支持，让嵌入的方式更简单。

### 使用现有项目嵌入在线编辑器 ###

最简单的嵌入方式是使用别人已经部署好的界面去嵌入到自己的项目当中，这样的好处就是代码量极少，但是强依赖于他人的项目，下面我将提供一个简单的案例在react中嵌入已经存在的编辑器，我将使用自己的博客项目，在博客项目中嵌入在线编辑器。

启动项目

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`直接嵌入的，当然这是因为我提供的网站并没有做跨域限制，所以可以直接嵌入，也可以供大家一快使用。

![120131542cfb60a3c8cf2d9901bf9f3e.png][]

效果如图所示。

然后右键编辑区域，会出现执行按钮，点击执行

![d8f06420e37bf027ed366c486885ae7c.png][]

将在下面的输出中显示输出信息

![6c4d55191fc2f5d21a12480decf85b20.png][]

这样就非常简单的将在线编辑器嵌入到自己博客中

### 嵌入独有的编辑器 ###

当然，也有人觉得嵌入他人的博客会受制于他人，如果别人的站点挂了就无法使用，所以想知道是否可以自己搭建

这里提供俩个方案，一个使用现成的`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`。

实现我们需要拉去SDK的代码

git clone https://github.com/239573049/WebActuator.git

然后使用`vs`打开`WebActuator.sln`解决方案，

选中`WebActuator.WebAssembly`项目进行发布

发布以后打开发布的文件夹，打开`_framework` 文件夹，然后删除文件夹下面的`*.gz`文件，因为默认使用的`br`压缩，所以不需要使用`*.gz`

下面是发布的根目录，我们需要复制除了`index.html`的文件到我们自己的项目当中

![535a0b715f3dbb7d16268d7b4256d890.png][]

嵌入项目截图

![3500b257c58d8a7b09aaa74988768aff.png][]

打开我们的`index.html`

将以上代码添加的我们项目的`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)

[120131542cfb60a3c8cf2d9901bf9f3e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/495f258ad454421eb9986afaef54b023.png
[d8f06420e37bf027ed366c486885ae7c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/7562254278144b1c82413ab4d012931c.png
[6c4d55191fc2f5d21a12480decf85b20.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/bd114c4b8ac5412ba034eb9255f209d6.png
[535a0b715f3dbb7d16268d7b4256d890.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/e2d0077fb7f94022af8726b509c315cd.png
[3500b257c58d8a7b09aaa74988768aff.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/39f49ca5bd094b0c82931550b03dd1e5.png