Editor

Developer
Zivcos
Size
3,118 Kb
Views
42,504
  1. Editor Previews
  2. Editor HTML Codes
  3. Editor CSS Codes
  4. Editor JS Codes

How do I make an editor?

What is a editor? How do you make a editor? This script and codes were developed by Zivcos on 08 September 2022, Thursday.

Editor Previews
IQ Test

Editor - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Editor</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="outer"> <span class="black">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias ad voluptate quas non cumque eum sed aperiam earum repudiandae nostrum qui consectetur ipsam ab. Possimus sint adipisci doloribus sapiente commodi.</span> <span class="red_selected">some red text</span> <span class="black"> Text </span> <div class="red_selected">this is a red DIV </div> <span class="black">some text comes here....</span> <span class="red_selected">Some other text comes here</span> <span class="black"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur recusandae deserunt dignissimos ipsam quos debitis tempora officiis. Rerum commodi dolor provident autem accusamus facilis quo ea eius non fugit perferendis.</span> <span class="red_selected">red text</span> <span class="black">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium nihil dolore labore quam eos debitis explicabo ut laborum quo mollitia sit consequuntur nisi aperiam laudantium veniam minus nesciunt ipsum est </span><span>.</span>
</div>
<div class="console"> <span class="no">0.</span> Console Initialized
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Editor - Script Codes CSS Codes

html body{ padding: 0; margin: 0; font-size:30px; font-family: Arial; font-weight: bold;
}
.outer{ border:1px solid #ccc; padding: 10px; height: 250px; overflow:scroll; white-space: pre-warp;
}
.outer span{ white-space: pre-warp;
}
.outer span:last{ margin-left:30px;
}
.red,
.red_selected{ color:red; display: inline;
}
.black{ display: inline;
}
/* Div content editable */
div:focus,
span:focus,
.red:focus{ border:1px solid blue;
}
/* Console */
.console{ background: rgba(0,0,0,.8); font-size: 16px; font-family: courier; color:#fff; padding: 20px;
}
.console .no{ min-width:50px; color:#777;
}

Editor - Script Codes JS Codes

$(document).ready(function(){ $.msgCount = 0; $(document).keypress(function(e) { if(e.which == 13) { trace('You pressed enter!'); } }); initEditableDiv(); //alert("ziv is testing"); initEmpty(); initNotesHtml(); $('.red_selected').click(function(){ window.getSelection().empty(); var selection = $(this).get(0).firstChild; var noteLength = $(this).get(0).firstChild.length; var range = document.createRange(); range.setStart(selection, 0); range.setEnd(selection, noteLength); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); sel.removeRange(range); }); $("span").focusin(function(){ var element = $(this).prop('outerHTML'); //trace('Focus in: '+$(this).prop('outerHTML').toString()); traceHtml($(this)); });
})
function initEditableDiv(){ $(".black").attr("contenteditable", "true"); $(".red_selected").attr("contenteditable", "true"); $(".red").attr("contenteditable", "true");
}
function initNotesHtml(){ var header = $('<div class="header"></div>'); $('.notes').parent().prepend(header); $('.notes').parent().parent().addClass('notesBG');
}
function initEmpty(){ /**/ $('html').click(function(){ var content = $('.tinyview').text().replace(/ /g,''); var idLength = $('.tinyview span[id]').length; //alert($('.tinyview').html()); if(content == '' && $('.tinyview').children().length == 0){ //alert('if Y'); var markup = $("<div contenteditable='true' class='black'></div>"); $('.tinyview').empty().append(markup); //$('.tinyview').append(markup); markup.focus(); }else{ //alert('if N'); //$('.tinyview div').last().focus(); $('.tinyview *[contenteditable]').last().focus(); } }); // prevent html.click event when clicking on divs inside tinyview $('.tinyview div, .tinyview span').click(function(e){ e.stopPropagation(); });
}
function trace(msg){ $.msgCount++; var entry = $("<div><span class='no'>"+ ($.msgCount) +".</span> "+ msg +" </div>"); $(".console").append(entry);
}
/**/
function traceHtml(target){ $.msgCount++; var entry = $("<div><span class='no'>"+ ($.msgCount) +".</span> <span class='txt'></span></div>"); entry.find('.txt').text(target.html()); $(".console").append(entry);
}
Editor - Script Codes
Editor - Script Codes
Home Page Home
Developer Zivcos
Username zivcos
Uploaded September 08, 2022
Rating 3
Size 3,118 Kb
Views 42,504
Do you need developer help for Editor?

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!

Zivcos (zivcos) Script Codes
Name
A Pen by zivcos
Editor one Click with dropdowns
Editor one Click alternative
Random Background Generator
HTML5 Video Autoplay
Create amazing blog posts 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!