介绍四款浏览器中拖拽设计网页的js插件VvvebJs、GrapesJS、ContentBuilder

介绍几款浏览器中拖拽设计网页的js插件

编写html网页可以通过html代码,但是对于不太熟悉html语言的朋友如何设计网页呢,今天我推荐几款直接在浏览器中拖拽设计生成html网页的js插件。

一、VvvebJs

VvvebJs是一个免费开源的拖拽网页设计生成插件,使用 jQuery 和 Bootstrap 4 构建。体验地址:http://repo.bfw.wiki/bfwtool/webdesign/index.html

介绍几款浏览器中拖拽设计网页的js插件

二、GrapesJS

GrapesJS 是一个开源、多用途的 Web 构建器框架,它结合了不同的工具和功能,旨在帮助您(或您的应用程序的用户)在没有任何编码知识的情况下构建 HTML 模板。它是替换常见的 WYSIWYG 编辑器的完美解决方案,这些编辑器适用于内容编辑但不适用于创建 HTML 结构。您可以在官方演示中看到它的运行情况 ,但使用它的 API, 您可以构建自己的编辑器。

官网地址:https://grapesjs.com/

体验地址:https://grapesjs.com/demo-newsletter-editor.html

代码示例:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>GrapesJS</title>
    <link rel="stylesheet" href="https://grapesjs.com/stylesheets/grapes.min.css?v0.16.27">
    <script src="https://grapesjs.com/js/grapes.min.js?v0.16.27"></script>

    <style>
        body,
        html {
            height: 100%;
            margin: 0;
        }
    </style>
</head>

<body>
<div id="gjs" style="height:0px; overflow:hidden;">
     <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css"/>
<div class="container">
  <div class="row">
    <div class="col-md-6 mx-auto calculate-form">
      <div class="card card-body text-center mt-5">
        <h1 class="heading display-5 pb-3">贷款计算器
        </h1>
        <form id="loan-form">
          <div class="form-group">
            <div class="inp...

点击查看剩余70%

{{collectdata}}

网友评论0