По мотивам одной из статей на Хабре
Какой самый компактный офисный пакет вы можете придумать? Старые версии Microsoft Office? Какой-нибудь опен-сорсный офис? Облачные решения? На самом деле самый компактный - это тот, который уже есть у вас, ваш браузер.
Но ведь браузер он для просмотра информации? Нет, можно и редактировать, если в коде страницу указано contenteditable.
К сожалению, все ссылки, которые указаны ниже я не могу оформить как ссылки, так как Zen добавляет лишние символы в начале :( Нужно копировать и вставлять вручную.
Word
Можете проверить сами - вставьте ссылку data:text/html,<html contenteditable> в строку бразуера и можете редактировать текст. Ссылку можно добавить в "избранное", и сохранить у себя в браузере.
Да, работать с пустым листом может показаться непривычно, но зато, ничего и не отвлекает.
Хотите форматирования? Пожалуйста, можно и с форматированием:
data:text/html,<script>function bt(e){document.execCommand(e,false,null);}</script><button onclick="bt('bold');">B</button><button onclick="bt('italic');">I</button><button onclick="bt('InsertOrderedList');">1</button><button onclick="bt('InsertUnorderedList');">*</button><h2 contenteditable>Title</h2><div contenteditable style="line-height:1.5;font-size:20px;">Your text</div>
Буфер обмена работает в обе стороны, через него возможна даже вставка картинок.
Power Point
Таким же образом можно сделать и Power Point. В самом начале в "for (let i=0; i<10;..." указано количество слайдов.
data:text/html,<body><script>for (let i=0; i<10; i++)document.body.innerHTML+= `<div style="position:relative;width:90%;padding-top:60%;margin:3%;border:1px solid silver;page-break-after:always;"><div contenteditable style="outline:none;position:absolute;right:10%;bottom:5%;left:10%;top:5%;font-size:5vmin;"><h2 contenteditable style="border:1px dashed silver">Title</h2><div contenteditable>Text</div></div></div>`;};function bt(e){document.execCommand(e,false,null);}</script><div style="position:fixed;overflow:hidden;z-index:2400;top:0px;><button onclick="bt('bold');">B</button><button onclick="bt('italic');">I</button><button onclick="bt('InsertOrderedList');">1</button><button onclick="bt('InsertUnorderedList');">*</button></div>
Excel
При желании можно и подобие Excel сдлеать таким образом! Вот пример такого редактора: https://codepen.io/oliviale/pen/rPjgmB
Вряд ли кому-то придет в голову работать в таком интерфейсе, но ради разминки можно попробовать.
А этот пример может и не так красив, но зато функционален и может даже справляться с формулами типа =A1+B2
data:text/html,<table id=t><script>z=Object.defineProperty,p=parseFloat;for(I=[],D={},C={},q=_=>I.forEach(e=>{try{e.value=D[e.id]}catch(e){}}),i=0;i<101;i++)for(r=t.insertRow(-1),j=0;j<27;j++)c=String.fromCharCode(65+j-1),d=r.insertCell(-1),d.innerHTML=i?j?"":i:c,i*j&&I.push(d.appendChild((f=>(f.id=c+i,f.onfocus=e=>f.value=C[f.id]||"",f.onblur=e=>{C[f.id]=f.value,q()},get=_=>{v=C[f.id]||"";if("="!=v.charAt(0))return isNaN(p(v))?v:p(v);with(D)return eval(v.slice(1))},a={get},z(D,f.id,a),z(D,f.id.toLowerCase(),a),f))(document.createElement`input`)))</script><style>#t{border-collapse:collapse}td{border:1px solid gray;text-align:right}input{border:none;width:4rem;text-align:center}</style>
Напоследок, оставляю статью на репозиторий автора с Хабра с мини-приложениями: http://github.com/zserge/awfice
