如何让用户自定义Javascript和CSS文件，然后导出为嵌入代码？

Question

Im interested in starting a small service where users can sign into a dashboard, customize, and then export a age verification pop up for their site. I've downloaded a base file to work off of:

 /*! * Simple Age Verification (https://github.com/Herudea/age-verification)) */ var modal_content, modal_screen; // Start Working ASAP. $(document).ready(function() { av_legality_check(); }); av_legality_check = function() { if ($.cookie('is_legal') == "yes") { // legal! // Do nothing? } else { av_showmodal(); // Make sure the prompt stays in the middle. $(window).on('resize', av_positionPrompt); } }; av_showmodal = function() { modal_screen = $('<div id="modal_screen"></div>'); modal_content = $('<div id="modal_content" style="display:none"></div>'); var modal_content_wrapper = $('<div id="modal_content_wrapper" class="content_wrapper"></div>'); var modal_regret_wrapper = $('<div id="modal_regret_wrapper" class="content_wrapper" style="display:none;"></div>'); // Question Content var content_heading = $('<h2>Are you 21 or older?</h2>'); var content_buttons = $('<nav><ul><li><a href="#nothing" class="av_btn av_go" rel="yes">Yes</a></li><li><a href="#nothing" class="av_btn av_no" rel="no">No</a></li></nav'); var content_text = $('<p>You must verify that you are 21 years of age or older to enter this site.</p>'); // Regret Content var regret_heading = $('<h2>We\\'re Sorry!</h2>'); var regret_buttons = $('<nav><small>I hit the wrong button!</small> <ul><li><a href="#nothing" class="av_btn av_go" rel="yes">I\\'m old enough!</a></li></ul></nav'); var regret_text = $('<p>You must be 21 years of age or older to enter this site.</p>'); modal_content_wrapper.append(content_heading, content_buttons, content_text); modal_regret_wrapper.append(regret_heading, regret_buttons, regret_text); modal_content.append(modal_content_wrapper, modal_regret_wrapper); // Append the prompt to the end of the document $('body').append(modal_screen, modal_content); // Center the box av_positionPrompt(); modal_content.find('a.av_btn').on('click', av_setCookie); }; av_setCookie = function(e) { e.preventDefault(); var is_legal = $(e.currentTarget).attr('rel'); $.cookie('is_legal', is_legal, { expires: 30, path: '/' }); if (is_legal == "yes") { av_closeModal(); $(window).off('resize'); } else { av_showRegret(); } }; av_closeModal = function() { modal_content.fadeOut(); modal_screen.fadeOut(); }; av_showRegret = function() { modal_screen.addClass('nope'); modal_content.find('#modal_content_wrapper').hide(); modal_content.find('#modal_regret_wrapper').show(); }; av_positionPrompt = function() { var top = ($(window).outerHeight() - $('#modal_content').outerHeight()) / 2; var left = ($(window).outerWidth() - $('#modal_content').outerWidth()) / 2; modal_content.css({ 'top': top, 'left': left }); if (modal_content.is(':hidden') && ($.cookie('is_legal') != "yes")) { modal_content.fadeIn('slow') } }; 

 /*! * Age verification CSS to go with the JS that can be found at (https://github.com/Herudea/age-verification) */ #modal_screen { position: fixed; top:0; left: 0; height: 100%; width: 100%; z-index: 1100; background-color: rgba(0,0,0,.8); } #modal_screen.nope { background-color: #1e0924; } #modal_content { position: fixed; z-index: 1101; margin: 0 auto; background-color:#fff; border:4px solid #444; border-radius: 100%; font-size: 12px; width:290px; height: 290px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; background-position: center 2em; background-repeat: no-repeat; background-size: 90px auto; background-image: url(data:image/svg+xml;base64,+DQo8cGF0aCBmaWxsPSIjMzMzMzMzIiBkPSJNMTAwLDEyYzAtNi42LTUuNC0xMi0xMi0xMkgxMkM1LjQsMCwwLDUuNCwwLDEydjc2YzAsNi42LDUuNCwxMiwxMiwxMmg3NmM2LjYsMCwxMi01LjQsMTItMTJWMTJ6IE0zMiw1NGgtOQ0KCVY0NGgzdjloNlY1NHogTTQ3LDUzaC0ydjFoLTd2LTFoLTJ2LThoMnYtMWg3djFoMlY1M3ogTTYwLDQ1aC03djhoNHYtM2gtMXYtMmg0djVoLTF2MWgtOHYtMWgtMXYtOGgxdi0xaDlWNDV6IE03NCw1M2gtMnYxaC03di0xDQoJaC0ydi04aDJ2LTFoN3YxaDJWNTN6Ii8+DQo8L3N2Zz4NCg==); } #modal_content .content_wrapper { padding-top: 8em; margin:3em auto 0; text-align: center; } #modal_content h2 { margin: 0 0 0 0; font:normal 15px/1.3em 'Gill Sans W01 Medium', Helvetica,arial,sans-serif; } #modal_content p { max-width: 75%; margin: 1.2em auto 0; font:11px/1.5em "proxima-nova", Helvetica,arial,sans-serif; } #modal_content nav {font-size: 16px; display:table; width: 282px;} #modal_content nav ul {display:table-row; width: 100%; margin:0; padding:0;} #modal_content nav li {display: table-cell; text-align: right; width: auto;} #modal_content nav:after { content: ""; display: block; clear: both; } #modal_content nav small { display: block; text-align: center; color: #888; margin: 1em 0 0; } #modal_content nav a.av_btn { display:block; text-align:center; width: 65px; border-radius: 23px; margin:1em auto 0; text-decoration: none; padding:1em; color: #fff; font:normal .7em/1em 'AmericanTypwrterITCW01- 731031'; text-transform: none; letter-spacing: 0; } #modal_content nav .av_go { background-color: #7fbf4d; } #modal_content nav .av_no { background-color: #938d95; } #modal_content nav .av_btn:hover { background-color: #1e0924; } #modal_content #modal_regret_wrapper nav a.av_btn { margin-top:0; width:130px; font-size: 0.8em; } @media (min-width: 688px) { #modal_content { top: 10em; top: 30vh; left: 30vw; width: 90%; max-width: 500px; height:500px; padding:3em; border-radius: 100%; background-position: center 3em; background-size: 160px auto; font-size: 16px; } #modal_content .content_wrapper { padding-top: 150px; margin:3em auto 0; text-align: center; } #modal_content h2 { margin: 0 0 0 0; font-size: 1.875em; } #modal_content p { font-size: 1em; line-height: 1.9em; } #modal_content nav {width: 396px;} #modal_content nav a.av_btn { padding:1em 2.5em; margin:1.6em auto 0; font-size: 1em; } } 

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>Age Verification Demo</title> <!-- Bootstrap Core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Custom CSS --> <link href="css/round-about.css" rel="stylesheet"> <!-- Age Verification CSS --> <link href="css/age-verification.css" rel="stylesheet"> <!-- HTML5 Shim for HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <![endif]--> </head> <body> <!-- Navigation --> <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Start Bootstrap</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li> <a href="#">About</a> </li> <li> <a href="#">Services</a> </li> <li> <a href="#">Contact</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container --> </nav> <!-- Page Content --> <div class="container"> <!-- Introduction Row --> <div class="row"> <div class="col-lg-12"> <h1 class="page-header">About Us <small>It's Nice to Meet You!</small> </h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, explicabo dolores ipsam aliquam inventore corrupti eveniet quisquam quod totam laudantium repudiandae obcaecati ea consectetur debitis velit facere nisi expedita vel?</p> </div> </div> <!-- Team Members Row --> <div class="row"> <div class="col-lg-12"> <h2 class="page-header">Our Team</h2> </div> <div class="col-lg-4 col-sm-6 text-center"> <img class="img-circle img-responsive img-center" src="http://placehold.it/200x200" alt=""> <h3>John Smith <small>Job Title</small> </h3> <p>What does this team member to? Keep it short! This is also a great spot for social links!</p> </div> <div class="col-lg-4 col-sm-6 text-center"> <img class="img-circle img-responsive img-center" src="http://placehold.it/200x200" alt=""> <h3>John Smith <small>Job Title</small> </h3> <p>What does this team member to? Keep it short! This is also a great spot for social links!</p> </div> <div class="col-lg-4 col-sm-6 text-center"> <img class="img-circle img-responsive img-center" src="http://placehold.it/200x200" alt=""> <h3>John Smith <small>Job Title</small> </h3> <p>What does this team member to? Keep it short! This is also a great spot for social links!</p> </div> <div class="col-lg-4 col-sm-6 text-center"> <img class="img-circle img-responsive img-center" src="http://placehold.it/200x200" alt=""> <h3>John Smith <small>Job Title</small> </h3> <p>What does this team member to? Keep it short! This is also a great spot for social links!</p> </div> <div class="col-lg-4 col-sm-6 text-center"> <img class="img-circle img-responsive img-center" src="http://placehold.it/200x200" alt=""> <h3>John Smith <small>Job Title</small> </h3> <p>What does this team member to? Keep it short! This is also a great spot for social links!</p> </div> <div class="col-lg-4 col-sm-6 text-center"> <img class="img-circle img-responsive img-center" src="http://placehold.it/200x200" alt=""> <h3>John Smith <small>Job Title</small> </h3> <p>What does this team member to? Keep it short! This is also a great spot for social links!</p> </div> </div> <hr> <!-- Footer --> <footer> <div class="row"> <div class="col-lg-12"> <p>Copyright &copy; Your Website 2014</p> </div> <!-- /.col-lg-12 --> </div> <!-- /.row --> </footer> </div> <!-- /.container --> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="http://cdn.jsdelivr.net/jquery.cookie/1.4.1/jquery.cookie.min.js"></script> <script src="js/age-verification.js"></script> </body> </html> 

How can I make it where users can change these attributes in a dashboard and then export that finished code as an embed code?

(note: I understand my question isn't very specific for one main problem)

Answer 1

You can use <textarea> element for visitor to upload, paste, or set their code at the element using JavaScript.

Create a data URI of the original or edited content, use <a> element with download attribute or window.open() to offer user file for download.

 textarea { width:200px; height:100px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <textarea data-type="text/html" data-file-name="document.html" class="html"><!DOCTYPE html><html><head><script>console.log("abc")</script></head><body>HTML</body></html></textarea><button>save</button><br> <textarea data-type="text/css" data-file-name="document.css" class="css">body {color:blue}</textarea><button>save</button><br> <textarea data-type="text/javascript" data-file-name="document.js" class="javascript">console.log(123)</textarea><button>save</button><br> <script> $("button").on("click", function() { var content = $(this).prev("textarea"); var dataURI = `data:${content.data().type},${content.val()}`; var a = $("<a>", { download: content.data().fileName, href: dataURI, on: {click: function() {this.remove()}} }).appendTo(document.body)[0]; a.click() }) </script>