html编辑工具（可视化编辑工具）

html编辑工具（可视化编辑工具）npm install我们首先进行第一步 打开idea的终端（terminal）窗口，然后输入git clone https://github.com/rxdrag/rxeditor.git下载完成之后我们打开项目看下项目的结构，这是一个典型的vue项目。接下来我们用开发工具打开项目，我这里用的是idea，你也可以用其他工具。打开界面如下图，可以看到默认打开readme文档，其中有三个步骤。分别代表装配、启动、编译打包。

最近逛GitHub的时候发现了一个有意思的项目，是一款HTML的可视化编辑工具，基于Bootstrap实现，可视化界面使用的是vue。具体作用把每个组件都可视化了，那你只需要按照你的想法拖动到指定位置就可以自动生成HTML源代码，可以帮助你直观的了解每个组件的作用。接下来给大家介绍下它的下载和安装方法。

首先是GitHub地址

https://github.com/rxdrag/rxeditor

大家打开GitHub复制图中的链接，然后在电脑上找一个合适的位置clone代码（打开Git bash窗口，如下图），输入下面的代码。

git clone https://github.com/rxdrag/rxeditor.git

下载完成之后我们打开项目看下项目的结构，这是一个典型的vue项目。

接下来我们用开发工具打开项目，我这里用的是idea，你也可以用其他工具。打开界面如下图，可以看到默认打开readme文档，其中有三个步骤。分别代表装配、启动、编译打包。

我们首先进行第一步 打开idea的终端（terminal）窗口，然后输入

npm install

等待它下载完依赖即可，需要注意的是，这个操作只需要你在第一次打开项目的时候完成，后续不用继续装配。

然后是第二步，在同样窗口输入

npm run dev

当你看到project is running at http://localhost:8080的时候说明项目已经启动了。

我们在浏览器输入这个地址就可以看到它的主界面了。需要重点注意的地方我用箭头指了出来，当你点击工具箱的时候，页面右侧会出现很多常用的组件，你可以按照自己的想法拖动到屏幕中间，完成这些之后点击图中方框的部分就可以看到源代码了，是不是很方便。

以上就是可视化HTML编辑器的介绍，希望对你有帮助。