如何將c#在線編輯器嵌入自己項(xiàng)目

首先我們需要介紹一下這個(gè)在線編輯器，當(dāng)前的在線編輯器支持c#的代碼編譯運(yùn)行，并且無需后臺服務(wù)，基于WebAssembly實(shí)現(xiàn)的在瀏覽器端去執(zhí)行我們的c#代碼，基于Roslyn提供的Api封裝一套簡單的編譯，并且封裝了js的支持，讓嵌入的方式更簡單。

使用現(xiàn)有項(xiàng)目嵌入在線編輯器

最簡單的嵌入方式是使用別人已經(jīng)部署好的界面去嵌入到自己的項(xiàng)目當(dāng)中，這樣的好處就是代碼量極少，但是強(qiáng)依賴于他人的項(xiàng)目，下面我將提供一個(gè)簡單的案例在react中嵌入已經(jīng)存在的編輯器，我將使用自己的博客項(xiàng)目，在博客項(xiàng)目中嵌入在線編輯器。

啟動項(xiàng)目

yarn start

我在我的項(xiàng)目中添加了編輯器的單獨(dú)頁面，下面是完整的代碼，

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>
        )
    }
}

看到上面的實(shí)現(xiàn)方式，是通過iframe直接嵌入的，當(dāng)然這是因?yàn)槲姨峁┑木W(wǎng)站并沒有做跨域限制，所以可以直接嵌入，也可以供大家一快使用。

效果如圖所示。

然后右鍵編輯區(qū)域，會出現(xiàn)執(zhí)行按鈕，點(diǎn)擊執(zhí)行

將在下面的輸出中顯示輸出信息

這樣就非常簡單的將在線編輯器嵌入到自己博客中

嵌入獨(dú)有的編輯器

當(dāng)然，也有人覺得嵌入他人的博客會受制于他人，如果別人的站點(diǎn)掛了就無法使用，所以想知道是否可以自己搭建

這里提供倆個(gè)方案，一個(gè)使用現(xiàn)成的docker鏡像，直接部署一個(gè)使用，另一個(gè)就是使用sdk功能自己實(shí)現(xiàn)界面編輯，只需要使用sdk提供的編譯功能

docker部署

這是提供的基本的鏡像registry.cn-shenzhen.aliyuncs.com/gotrays/web-actuator:latest，由阿里云的免費(fèi)鏡像倉庫提供。
可以使用一下命令拉起執(zhí)行一個(gè)簡單的倉庫

docker run -p 8888:80 --name web-actuator registry.cn-shenzhen.aliyuncs.com/gotrays/web-actuator:latest

使用SDK功能

項(xiàng)目將簡單的介紹在JavaScript中使用動態(tài)編輯c#的SDK。

實(shí)現(xiàn)我們需要拉去SDK的代碼

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

然后使用vs打開WebActuator.sln解決方案，

選中WebActuator.WebAssembly項(xiàng)目進(jìn)行發(fā)布

發(fā)布以后打開發(fā)布的文件夾，打開_framework 文件夾，然后刪除文件夾下面的*.gz文件，因?yàn)槟J(rèn)使用的br壓縮，所以不需要使用*.gz

下面是發(fā)布的根目錄，我們需要復(fù)制除了index.html的文件到我們自己的項(xiàng)目當(dāng)中

嵌入項(xiàng)目截圖

打開我們的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>

將以上代碼添加的我們項(xiàng)目的index.html中

然后在我們需要實(shí)現(xiàn)的界面進(jìn)行編譯初始化

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);提供默認(rèn)需要編譯的程序集

await window.exportManage.SetReferences(assemblys);的代碼是在exportManage.js中提供的api

這是用于初始化編譯所需要的程序集，基本默認(rèn)就這些，當(dāng)然也可以添加其他的程序集，

監(jiān)聽Console輸出

window.OnWriteLine = (message: string) => {
            console.log(message);
    }

window.OnDiagnostic = (json: string) => {
		console.log(json);
    }

上面是SDK提供的控制臺攔截器，

OnWriteLine是控制臺的輸出

OnDiagnostic是早編譯的錯(cuò)誤和日志

創(chuàng)建了倆個(gè)監(jiān)聽器然后就可以調(diào)用編輯方法了，調(diào)用

await window.exportManage.RunSubmission(`Console.WriteLine("hello world");`, false);

執(zhí)行編譯，然后我們就可以在瀏覽器控制臺中看到編譯輸出了

如果你想要重復(fù)寫那么多代碼可以修改WebActuator.Web項(xiàng)目當(dāng)中的ClientApp的代碼

項(xiàng)目提供了基于monaco實(shí)現(xiàn)的簡單的編輯器。

APIs列表：

// 獲取當(dāng)前引用
window.exportManage.Using()

// 添加默認(rèn)引用
window.exportManage.SetUsing(using)
 
 // 刪除指定引用
window.exportManage.RemoveUsing(using)

// 清空全局引用
window.exportManage.ClearUsing()

// 獲取當(dāng)前編譯的語言版本
window.exportManage.LanguageVersion()

// 修改編譯的語言版本
window.exportManage.SetLanguageVersion(languageVersion)

// 獲取當(dāng)前依賴的程序集URL
window.exportManage.References()

// 添加編譯依賴的程序集
window.exportManage.SetReferences(references)

// 只編譯代碼
window.exportManage.TryCompile(source, concurrentBuild)

// 執(zhí)行編譯代碼
window.exportManage.RunSubmission(code, concurrentBuild)

以上只是當(dāng)前版本的APIs，后續(xù)還會優(yōu)化并且更新，打造一個(gè)好用方便的在線編譯c#代碼的編輯器。

結(jié)尾

來自token的分享

倉庫地址：https://github.com/239573049/WebActuator 歡迎PR和star

技術(shù)交流群：737776595文章來源地址http://www.zghlxwxcb.cn/news/detail-436107.html

到了這里，關(guān)于如何將c#在線編輯器嵌入自己項(xiàng)目的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！