将在线编辑器嵌入自己项目

用微信扫码二维码

分享至好友和朋友圈

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

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

启动项目

yarn start

我在我的项目中添加了编辑器的单独页面，下面是完整的代码，

import React, { Component } from 'react'import './index.css';export default class Ide extends Component { render() { return ( ) }}

看到上面的实现方式，是通过直接嵌入的，当然这是因为我提供的网站并没有做跨域限制，所以可以直接嵌入，也可以供大家一快使用。

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

项目将简单的介绍在中使用动态编辑c#的。

JavaScript

SDK

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

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

然后使用打开解决方案，

vs

WebActuator.sln

选中项目进行发布

WebActuator.WebAssembly

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

_framework

*.gz

br

*.gz

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

index.html

嵌入项目截图

打开我们的

index.html

特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。

Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.