grapesjs实现一个在线html代码本地打开可视化拖拽编辑下载保存到本地代码-html代码-BFW代码库

grapesjs实现一个在线html代码本地打开可视化拖拽编辑下载保存到本地代码

代码语言：html

所属分类：其他

代码描述：grapesjs实现一个在线html代码本地打开可视化拖拽编辑下载保存到本地代码，类似于以前的Dreamweaver，打开本地html代码，编辑后下载到本地。

代码标签： grapesjs 在线 html 代码本地打开可视化拖拽编辑下载保存

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/grapes.0.21.1.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/grapes.0.21.1.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/filesaver.js"></script>

</head>

<body>


    <input type="file" id="fileopen" accept=".html" onchange="importFromLocal(event)" />
    <button id="save">保存</button>
    <div id="gjs"></div>

    <script>
        var filename="unamed.html";
        var tempscript="";
          var editor = grapesjs.init({
            container: '#gjs',
            fromFile: true,
    
           
          });
    
    
    
    
          // Function to import local file
          function importFromLocal(event) {
            var file = event.target.files[0];
            
            filename=file.name;
     
            var reader = new FileReader();
            reader.onload = function() {
                var html=reader.result.trim();
                
                // 创建一个虚拟的HTML元素
    
    
    // 获取body内容
    var matches = html.match(/<body[^>]*>([\s\S]*?)<.........完整代码请登录后点击上方下载按钮下载查看