Editor one Click alternative

Developer
Zivcos
Size
4,131 Kb
Views
38,456
  1. Editor one Click alternative Previews
  2. Editor one Click alternative HTML Codes
  3. Editor one Click alternative CSS Codes
  4. Editor one Click alternative JS Codes

How do I make an editor one click alternative?

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

Editor one Click alternative Previews
IQ Test

Editor one Click alternative - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Editor one Click alternative</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="outer"> <span class="readonly">Read only text is not interactive</span> <span class="black">1 Lorem ipsum</span> <span class="red_selected">(ENTER text)</span> <span class="black"> 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="readonly"> This is some read only text</span> <span class="red_selected">(ENTER some red text)</span> <span class="black"> Lorem ipsum dolor sit amet</span> <span class="readonly">Read only text alternative look</span> <span class="red_selected">this is a red span </span> <span class="black">some text comes here....</span> <span class="red_selected ">(ENTER Some other text 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 </span><span class="red_selected">(ENTER Text)</span> <span class="readonly"> Read only alternative look</span> <span class="black">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='http://cdn.jsdelivr.net/jquery.hammerjs/1.1.2/jquery.hammer-full.js'></script> <script src="js/index.js"></script>
</body>
</html>

Editor one Click alternative - Script Codes CSS Codes

html body{ padding: 10px; margin: 0; font-size:30px; font-family: Arial; font-weight: bold;
}
.outer span:last{ margin-left:30px;
}
.black{ display: inline;
}
/* 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;
}
/* Additions */
.red_selected.focus{ position:absolute; left:-5000px;
}
.readonly{ color:#999;
}
.red,
.red_selected{ color:red; display: inline; border-left:3px solid #fff; border-right:3px solid #fff;
}
.red_selected.selected{ background:#ccdded; color:#cc1121; border-left:3px solid #146fe1; border-right:3px solid #146fe1;
}
.red_selected.selected:before,
.red_selected.selected:after{ display:inline; position:absolute; /*content:'•';*/ content:''; width: 11px; height: 11px; border-radius:50px; background: #146fe1; color:#146fe1; font-size:48px;
}
/*
.red_selected.selected:before{ margin-top:-34px; margin-left:-11px;
}
.red_selected.selected:after{ margin-top:13px; margin-left:-7px;
}
*/
.red_selected.selected:before{ margin-top:-10px; margin-left:-7px;
}
.red_selected.selected:after{ margin-top:33px; margin-left:-4px;
}
.red_selected.cursor,
.red_selected.selected.cursor{ color:red; background:none; -webkit-animation: blink 0.5s step-end infinite alternate; animation: blink 0.5s step-end infinite alternate; /* border-right:3px solid #4e53d7; border-left:0; */
}
.red_selected.cursor:before,
.red_selected.cursor:after,
.red_selected.selected.cursor:before,
.red_selected.selected.cursor:after{ display:none;
}
@-webkit-keyframes blink { 0% {border-right:3px solid #146fe1; border-left:3px solid #fff;} 50% {border-right:3px solid #fff; border-left:3px solid #fff;}
}
@keyframes blink { 0% {border-right:3px solid #146fe1; border-left:3px solid #fff;} 50% {border-right:3px solid #fff; border-left:3px solid #fff;}
}

Editor one Click alternative - Script Codes JS Codes

$(document).ready(function(){ $.msgCount = 0; $.redFlagNotSelected = true; $.disableRedClick = false; /* $("span").focusin(function(){ var element = $(this).prop('outerHTML'); //trace('Focus in: '+$(this).prop('outerHTML').toString()); traceHtml($(this)); }); */ initEditableDiv(); initPreselect(); initKeyControl(); // keep keyboard up fix var input = $("<input id='keyboardUp' type='text' style='top:-500px; position:absolute; opacity:0;'/>"); $('body').prepend(input); // init value on when loose focus $('#keyboardUp').focusout(function(){ $(this).val(''); $('.cursor').removeClass('cursor'); });
})
function initKeyControl(){ $(document).keydown(function(e) { if($.redFlagNotSelected == true){ return; }else{ /* //e.preventDefault(); $.redFlagNotSelected = false; var target = $('.selected'); target.removeClass('selected'); target.attr("contenteditable", "true"); //alert(target.html()); //target.empty().focus(); */ //alert(String.fromCharCode(e.which)); /* // working var target = $('.selected'); target.removeClass('selected'); target.attr("contenteditable", "true"); //target.empty().text(String.fromCharCode(e.which));//.focus(); //var charTyped = String.fromCharCode(e.which); target.text(String.fromCharCode(e.which)).focus(); //target.text("").focus(); setCursorToEnd(target.get(0)); $.redFlagNotSelected = true; //target.addClass('cursor'); //target.html($('#keyboardUp').val()); */ $.redFlagNotSelected = true; $('.red_selected.selected').remove(); $('.focus').removeClass('focus'); $('.red_selected').unbind('click'); initPreselect(); } });
}
function setCursorToEnd(ele){ var range = document.createRange(); var sel = window.getSelection(); range.setStart(ele, 1); range.collapse(true); sel.removeAllRanges(); sel.addRange(range); ele.focus();
}
function initPreselect(){ var options = { //preventDefault: true }; // Long Press Timer /* var timer; $('.red_selected').on("touchstart", function(){ timer = setTimeout(function(){ //alert("Long Press"); $.disableRedClick = true; $('.selected').attr("contenteditable", "true").focus().removeClass('selected'); },1500); }).on("touchend",function(){ $.disableRedClick = false; clearTimeout(timer); }); */ /* $('.red_selected').on('touchend', function(e){ $('.red_selected').removeClass('cursor'); $('#keyboardUp').focus(); $('.red_selected').removeClass('selected'); $(this).addClass('selected'); $.redFlagNotSelected = false; }); */ /* //Working .... $('.red_selected').click(function(){ if($.disableRedClick){ }else{ $('.red_selected').removeClass('cursor'); $('#keyboardUp').focus(); $('.red_selected').removeClass('selected'); $(this).addClass('selected'); $.redFlagNotSelected = false; } }); */ // Mix Selection with editable div $('.red_selected').click(function(){ var isSelected = $(this).hasClass('selected'); //alert(thisClass); var str = $(this).text(); if(str.match("^.ENTER")){ if(isSelected){ // $('#keyboardUp').focus(); $('.focus').focus(); return; }else{ /* $('.red_selected').removeClass('selected').removeAttr("contenteditable"); $('#keyboardUp').focus(); $(this).addClass('selected'); $.redFlagNotSelected = false; */ $.redFlagNotSelected = false; $('.focus').remove(); $('.selected').removeClass('selected'); $(this).addClass('selected'); $( "<span autocapitalize='none' class='red_selected focus' contenteditable='true'></span>" ).insertBefore( ".red_selected.selected" ); $('.focus').focus(); } }else{ $('.red_selected').removeClass('selected'); $(this).attr("contenteditable","true").focus(); } }); /* var hammertime = new Hammer($('.red_selected'), options); hammertime.on("tap", function(ev){ //alert('hammertime'); $('.red_selected').removeClass('cursor'); $('#keyboardUp').focus(); $('.red_selected').removeClass('selected'); $(this).addClass('selected'); $.redFlagNotSelected = false; }); */ /* $('.red_selected').on("tap", function(event){ //event.preventDefault(); $('.red_selected').removeClass('cursor'); $('#keyboardUp').focus(); $('.red_selected').removeClass('selected'); $(this).addClass('selected'); $.redFlagNotSelected = false; }); */ /* $('.red_selected').on('doubletap', function(event){ event.preventDefault(); $('body').css('background','green'); })*/
}
function initEditableDiv(){ $(".black").attr("contenteditable", "true"); $(".black").focusin(function(){ $('.red_selected').removeClass('selected').removeClass('cursor'); $.redFlagNotSelected = true; }); //$(".red_selected").attr("contenteditable", "true"); //$(".red").attr("contenteditable", "true");
}
Editor one Click alternative - Script Codes
Editor one Click alternative - Script Codes
Home Page Home
Developer Zivcos
Username zivcos
Uploaded September 08, 2022
Rating 3
Size 4,131 Kb
Views 38,456
Do you need developer help for Editor one Click alternative?

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
Random Background Generator
Editor
Editor one Click with dropdowns
A Pen by zivcos
HTML5 Video Autoplay
Create amazing marketing copy 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!