Editor Test

Developer
Tom
Size
5,749 Kb
Views
14,168
  1. Editor Test Previews
  2. Editor Test HTML Codes
  3. Editor Test CSS Codes
  4. Editor Test JS Codes

How do I make an editor test?

What is a editor test? How do you make a editor test? This script and codes were developed by Tom on 19 November 2022, Saturday.

Editor Test Previews
IQ Test

Editor Test - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Editor Test</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/medium-editor/4.11.1/css/medium-editor.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <button id="save-layout" class="btn btn-blue"><i class="fa fa-save"></i> Save</button>
<div class="content"> <header id="header" class="bg"> <div class="overlay"> <div class="opac"> <span class="fa-stack fa-2x" title="Upload Background Image"> <i class="fa fa-circle-thin fa-stack-2x icon-background6"></i> <i class="fa fa-camera fa-stack-1x"></i> </span> <h1 data-editable="true">Some Text Here</h1> <p data-editable="true">Subtext short description</p> </div> </div> </header>
<section id="contentBlocks"> <section class="content-block" data-draggable="true" data-section="content"> <div class="block-wrapper"> <div> <h3 data-editable="true">Section Title</h3> <p data-editable="true">Short Description Here</p> </div> </div> </section> </section> <section class="content-block content-tools"> <div class="block-wrapper"> <h3>Add A New Section</h3> <div class="flex-wrap"> <div class="section-item"> <h3>Text Content Section</h3> <p><i class="fa fa-align-left fa-2x"></i></p> <button data-addsection="content" class="btn btn-green">Add Content</button> </div> <div class="section-item"> <h3>Contact Form Section</h3> <p><i class="fa fa-wpforms fa-2x"></i></p> <button data-addsection="contact" class="btn btn-green">Add Contact</button> </div> <div class="section-item"> <h3>Multi Column Section</h3> <p><i class="fa fa-columns fa-2x"></i></p> <button data-addsection="columns" class="btn btn-green">Add Columns</button> </div> <div class="section-item"> <h3>Call To Action Section</h3> <p><i class="fa fa-bullhorn fa-2x"></i></p> <button data-addsection="cta" class="btn btn-green">Add CTA</button> </div> <div class="section-item"> <h3>Customer Testimonial Section</h3> <p><i class="fa fa-quote-left fa-2x"></i></p> <button data-addsection="testimonial" class="btn btn-green">Add Testimonial</button> </div> <div class="section-item"> <h3>Business Location Section</h3> <p><i class="fa fa-map-marker fa-2x"></i></p> <button data-addsection="location" class="btn btn-green">Add Location</button> </div> <div class="section-item"> <h3>Promotional Video Section</h3> <p><i class="fa fa-video-camera fa-2x"></i></p> <button data-addsection="video" class="btn btn-green">Add Video</button> </div> </div> </section> <section class="content-block footer"> <div class="block-wrapper"> <p>Copyright &copy; 2016</p> </div> </section>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='http://cdn.jsdelivr.net/medium-editor/latest/js/medium-editor.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/Sortable/1.4.2/Sortable.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Editor Test - Script Codes CSS Codes

body { font-family: sans-serif; box-sizing:border-box; margin:0;
}
.content { position: relative; left: 0; z-index: 1; height: 100%; transition: transform .0s; min-height: 100vh; background: #ebedef;
}
#header { position: relative; background:url(https://d28w3xgz5vkvvm.cloudfront.net/images/000/076/138/large/6097bc9eb4a1f881cba1f1d138a88327ee032089.jpg?1460057021); background-size: cover; background-position: center center; animation: slideimg 1.4s ease-in-out; animation-iteration-count:1; animation-fill-mode: forwards; height:50vh; min-height: 380px; align-items: center; display: flex; padding: 60px 20px;
}
#header:before { content: ''; position: absolute; width: 100%; height: 100%; left: 0; right: 0; top: 0; bottom: 0; background: linear-gradient(to bottom, rgba(50,59,68,0.65) 0%, rgba(50,59,68,0.45) 50%, rgba(50,59,68,0.65) 100%);
}
#header .overlay { text-shadow: 0 1px 1px rgba(0,0,0,0.4); position: relative; max-width: 960px; margin: 0 auto; text-align: center;
}
#header .overlay .icon-background6 { color:#fff;
}
#header .overlay .fa-camera { color:rgba(255,255,255,1); cursor:pointer;
}
#header .overlay h1 { color: #fff; font: 600 42px/38px "Avenir Next", Avenir, Helvetica, Arial, sans-serif; margin:10px 0;
}
#header .overlay p { color: #fff; font-family:'Avenir Next', Avenir, Helvetica, Arial, sans-serif; font-size: 20px; font-weight:500; padding-bottom:10px; margin:0; line-height:24px;
}
#contentBlocks { background:#fff; height:100%;
}
.content-block { max-width: 100%; margin: 0px auto 0; padding: 60px 20px; background:rgba(255,255,255,1); position:relative; display:block; border-bottom:1px solid rgb(229, 234, 236);
}
.content-block.ghost { /* ghostClass */ opacity: .9; background: #C8EBFB;
}
.content-block.footer { border-bottom:0;
}
.block-wrapper { max-width: 540px; margin:0 auto; position:relative;
}
.block-wrapper h3 { font-family: "Avenir Next", Avenir, Helvetica, Arial, sans-serif; color: #262626; font-weight: 500; margin:0 0 20px 0; padding-bottom: 20px; font-size: 28px; line-height: 34px; position:relative; text-align:center;
}
.block-wrapper h3:before { content: ''; height: 1px; width: 60px; background: #e5eaec; position: absolute; left: 50%; transform:translateX(-50%); bottom: 0;
}
.block-wrapper p { font-weight:400; font-size:18px; line-height:28px; color: #666b6e; padding:0; margin:0;
}
.content-block.content-tools { background:#3ac569;
}
.content-block.content-tools h3 { color:#fff;
}
.content-block.content-tools .block-wrapper { max-width:960px;
}
.content-block.footer .block-wrapper { max-width:960px;
}
.content-block.footer .block-wrapper p { color: #949799; font-size:14px; line-height:22px; text-align:center; font-weight:300;
}
.flex-wrap { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: center; width:100%;
}
.section-item:first-child { margin-left:0;
}
.section-item:last-child { margin-right:0;
}
.section-item { flex: 0 1 0; align-self: auto; background: #fff; border-bottom: 1px solid #e5eaec; border-radius: 0 0 3px 3px; padding: 20px; text-align: center; word-wrap: break-word; box-shadow:0 3px 10px 2px rgba(0,0,0,0.04); min-width:19%; max-width:19%; margin:1%;
}
.section-item h3 { font-size: 20px; line-height: 26px; color:#262626 !important;
}
.section-item i { color:#3ac569;
}
/*
* Editor Styles
*/
[data-editable] { cursor:text; opacity:1; transition:opacity .3s ease-in-out;
}
[data-editable]:hover { opacity:0.5;
}
[data-editable]:hover:focus { opacity:1; border:0;
}
[data-draggable]:hover:before, .content-block.ghost:before { background-image: repeating-linear-gradient(-45deg, transparent, transparent 8%, rgba(0, 102, 204,0.5) 8%, rgba(0, 102, 204,0.5) 50%); width: 100%; height: 6px; content: ""; opacity: 0.4; display: block; background-size: 24px 24px; position: absolute; left: 0; top: 2px;
}
[data-draggable]:hover:after, .content-block.ghost:after { background-image: repeating-linear-gradient(-45deg, transparent, transparent 8%, rgba(0, 102, 204,0.5) 8%, rgba(0, 102, 204,0.5) 50%); width: 100%; height: 6px; content: ""; opacity: 0.4; display: block; background-size: 24px 24px; position: absolute; left: 0; bottom: 2px;
}
[data-medium-focused="true"] { outline:0; border:0;
}
.bar { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,1); opacity:0.25; color:rgba(255,255,255,1); text-align:center; padding:0px; display:block; overflow:hidden;
}
.action-bar { left:0; border-radius:0 6px 6px 0;
}
.move-bar { border-radius:6px 0 0 6px; right:0;
}
.move-bar:hover { opacity:0.9; cursor:move;
}
.bar i { transition:transform .3s ease-in-out; transition-delay:.15s;
}
.bar div:hover i { transform:rotateZ(-45deg);
}
.action-bar:hover { opacity:0.9; cursor:pointer;
}
.bar div span { opacity:0; max-width:0; overflow: hidden; vertical-align: middle; transition:all .3s ease-in-out; display:inline-block; font: 700 14px/30px "Avenir Next", Avenir, Helvetica, Arial, sans-serif; white-space: nowrap;
}
.bar div:hover span { max-width: 400px; opacity: 1; overflowX: auto; overflowY:hidden; width:auto; margin-right:5px; vertical-align:middle;
}
.bar div { display:inline-block; width:auto; padding:10px;
}
.move-bar div:hover span { margin-right:0; margin-left:5px;
}
.btn-green { background:#3ac569;
}
.btn-blue { background:#03A9F4;
}
.btn { border: 0 none; border-radius: 24px; padding: 12px 18px; margin: 10px; cursor: pointer; justify-content: center; align-items: center; flex: 0 0 160px; text-align: center; line-height: 1.3; font-size: 14px; color: #fff; text-transform: none; font-weight: 500; transition: all 60ms ease-in-out; outline:0;
}
.btn:hover { opacity: .95; transition: all 60ms ease;
}
.btn:active { opacity: .75; transform: scale(.97); transition: all 60ms ease;
}
#save-layout { position:fixed; top:0; right:0; z-index:99999999999999;
}
/*Overlay & Loader*/
.over { position:fixed; background:rgba(0,0,0,.950); top:0; left:0; height:100%; width:100%; z-index:9999999999999999999999999999;
}
.loader-container { width: 200px; height: 200px; color: white; margin: 0 auto; position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); border: 5px solid #3498db; border-radius: 50%; animation: borderScale 1s infinite ease-in-out;
}
.loader-text { font-weight: bold; font-size: 2em; position: absolute; top: 50%; left: 50%; display:block; transform: translate(-50%, -100%);
}
.loader-text span { white-space:no-wrap;
}
@keyframes borderScale { 0% { border: 5px solid white; } 50% { border: 25px solid rgba(0,0,0,.01); } 100% { border: 5px solid white; }
}
@keyframes widthFlex { from { text-indent: 0px; } to { text-indent: -200px; }
}

Editor Test - Script Codes JS Codes

$(window).scroll(function(e){ parallax($('#contentBlocks').offset().top);
});
function parallax(offset){ var scrolled = $(window).scrollTop(); if(scrolled <= offset) { $('.bg').css('transform', 'translate3d(0px, '+(scrolled * 0.5)+'px, 0px) scale(1)'); $('.bg .opac').css('opacity', (1-(scrolled * 0.002))); }
}
$(document).ready(function(e){ initEditable(); Sortable.create(contentBlocks, { handle: '.move-sect', animation: 150, ghostClass: 'ghost', }); draggableContainer(); addnewSection(); headerUpload(); saveJson();
});
function draggableContainer() { $(document).on('mouseenter','[data-draggable]', function(e) { $(this).append('<div class="bar action-bar"><div class="move-sect"><span>Move Section</span><i class="fa fa-arrows fa-lg"></i></div><div><span>Upload Background Image</span> <i class="fa fa-picture-o fa-lg"></i></div><div class="del-sect"><span data-action="delete">Delete</span><i class="fa fa-trash fa-lg"></i></div></div>'); }); $(document).on('mouseleave','[data-draggable]', function(e) { $(this).children('.move-bar').remove(); $(this).children('.action-bar').remove(); }); $(document).on('click','.del-sect',function(){ var el = $(this).parent().parent('.content-block'); el.fadeOut(500); setTimeout(function(){ el.remove(); },600); });
}
function addnewSection() { $(document).on('click','button[data-addsection]', function(e){ var type = $(this).attr('data-addsection'); var x = $('<section class="content-block" style="display:none;" data-draggable="true" data-section="'+type+'"><div class="block-wrapper"><div></div></div></section>'); switch(type) { case 'content': var content = $('<h3 data-editable="true">Section Title</h3>' +'<p data-editable="true">Short Description Here</p>'); break; case 'contact': var content = $(); break; case 'columns': var content = $(); break; case 'cta': var content = $(); x.addClass('cta-bar'); break; case 'testimonial': var content = $(); break; case 'location': var content = $(); break; case 'video': var content = $(); break; } x.find('.block-wrapper div').append(content); $('#contentBlocks').append(x); x.fadeIn(500); initEditable(); });
}
function initEditable() { var options = { 'toolbar': false, 'spellcheck': true, } var editor = new MediumEditor('[data-editable]', options);
}
function headerUpload() { $('.opac span').on('mouseover', function() { $(this).addClass('animated shake'); }); $('.opac span').on('mouseleave',function() { $(this).removeClass('animated shake'); });
}
function saveJson() { $(document).on('click','#save-layout', function() { var loader = $('' +'<div class="over">' +'<div class="loader-container">' +'<p class="loader-text">Saving</p>' +'</div>'
+'</div>'); $('body').prepend(loader); var savedata = { 'headerBackground': $('#header').attr('data-image'), 'headerTitle': $('#header h1[data-editable]').text(), 'headerSub': $('#header p[data-editable]').text(), 'content': [], } var i = 1; $('.content-block[data-section]').each(function() { var content = { 'order': i, 'type': $(this).attr('data-section'), 'elements': [], } $(this).find('[data-editable]').each(function() { var tag = $(this).prop("tagName").toLowerCase(); var text = $(this).text(); var elem = { 'tag': tag, 'text': text, } content.elements.push(elem); }); savedata.content.push(content); i++; }); setTimeout(function() { loader.remove(); console.log(JSON.stringify(savedata)); },5000); });
}
Editor Test - Script Codes
Editor Test - Script Codes
Home Page Home
Developer Tom
Username TomJ1588
Uploaded November 19, 2022
Rating 3
Size 5,749 Kb
Views 14,168
Do you need developer help for Editor Test?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tom (TomJ1588) Script Codes
Name
A Pen by Tom
Left Side Slide Out Push Nav
UI Test 2
Pure CSS Only Snackbar
Pure CSS Animated Modals
CSS Only Line Animated Modal
Swing In Social Links
ESPN Style Navigation
Luke ROTJ Lightsaber
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!