Samodzielnie wykonany edytor html/css

0

Proszę Państwa dumnie prezentuję edytor html.
(i oczywiście pokornie zgłaszam się po ocenę)

lInk do niego to

http://infinityhost.ct8.pl/test.html

Uruchamiany jest poprzez kliknięcie shift + enter

Uruchomienie jego to np:
//element pod który zostanie podpięta funkcja wywołująca, styl jak zostanie załadowany na starcie, nazwa w CSS, okno w którym będzie operował
addExt(document.body,ExtWindowSrc.default_style,'#body',window.top);
// i tutaj element i funkcja
document.body.showExtWindow();

Na nagraniu przestestowałem użycie go w operowaniu między ramkami
Nazwa (tutaj "body") jest w pełni edytowalna wię cały arkusz CSS jest tak samo edytowalny

1.jpg4.jpg

3

Jakie zastosowanie widzisz w tym "łamiącym grę" narzedziu?

2

Bardzo niewygodne i nieintuicyjne. Połowa przycisków służy do przesunięcia edytora na ekranie, czemu nie proste drag&drop?
Bardzo dużo błędów w konsoli, przez przypadek przytrzymałem ctrl+shift o chwilę za długo i dostałem alert "Tekst Left nie zostal znaleziony.", właściwie to nie wiem nawet do końca co uruchamiam tym shift+enbter

Nie widzę za bardzo potencjału, rozumiem że chciałeś coś w stylu edytora z podglądem na żywo, takie coś już jest w każdym IDE, np https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Jak chciałeś generator stron z tym swoim srwd to może lepiej to zrobić jako wtyczke do vs code

2

Nie wiem, jak z tego korzystać (to ma być edytor kodu czy edytor wizualny/low-code/WYSIWYG? Czy połączenie obydwu podejść? A nie chce mi się 20 minutowego filmiku obejrzeć, żeby tego się dowiedzieć).

Poza tym:

  • to ma być edytor, a nie ma takich podstaw jak podświetlanie składni czy automatyczna indentacja po enterze
  • całość wygląda i działa jakby było robione w latach 80, ale gorzej zrobione. Zobacz sobie, jak HyperCard potrafili zrobić. To też taki edytorek był, tylko że w latach 80 na miarę ówczesnych możliwości. Ale tam (z tego co widziałem na filmikach[1]) o coś konkretnego chodziło. A tutaj nie widzę jakby tego głównego przeznaczenia (czy to ma być alternatywa dla VSCode? Dla Wix?)

Proszę Państwa dumnie prezentuję edytor html.
(i oczywiście pokornie zgłaszam się po ocenę)

IMO to, co jest w tym fajne, że masz frajdę z zrobienia plus pewnie się uczysz czegoś nowego przy robieniu.

Natomiast moim zdaniem raczej nie jest to coś, z czego by ludzie faktycznie korzystali. W sumie nie wiem, po co to robisz, bo jeśli dla samej frajdy i samoedukacji, to jest to spoko motywacja, ale jeśli robisz coś, żeby faktycznie ktoś faktycznie korzystał, to raczej nie widzę zbytniej troski o końcowego użytkownika (nawet ten brak podświetlania składni w edytorze - mimo że przecież możesz użyć gotowej biblioteki do tego).

Pytanie więc, czy robisz to bardziej dla siebie czy dla innych. Czy bardziej jara cię robienie dla robienia, czy to, żeby ktoś z tego korzystał.

[1] np. tutaj filmik o HyperCard (jeszcze widziałem dłuższe filmiki, ale już nie będę tu ich wrzucał):

1

Problemy:

  • Shift+Enter działa tylko dla klawiatury numerycznej.
  • Brak interpretacji tego, co znajduje się w “CSS” (w postaci tekstowej styli ‘css’), by wyświetlić w “Styl”.
  • Nie wiadomo, jak obsługiwać “Atrybuty”.
  • Aktualizacja mogłaby być automatyczna.
  • I oczywiście dołączam się do przedmówców: brak odpowiedniej czcionki, formatowania i kolorowania składni.

Ciekawi mnie natomiast, z czego zrobiłeś wyświetlanie dymku z podpowiedziami.

0
overcq napisał(a):

Problemy:

  • Shift+Enter działa tylko dla klawiatury numerycznej.
  • Brak interpretacji tego, co znajduje się w “CSS” (w postaci tekstowej styli ‘css’), by wyświetlić w “Styl”.
  • Nie wiadomo, jak obsługiwać “Atrybuty”.
  • Aktualizacja mogłaby być automatyczna.
  • I oczywiście dołączam się do przedmówców: brak odpowiedniej czcionki, formatowania i kolorowania składni.

Ciekawi mnie natomiast, z czego zrobiłeś wyświetlanie dymku z podpowiedziami.

Shift - enter dałem od niechcenia. Możesz dać <body onClick="element-jaki-sobie-wybierzesz. showExtWindow();> - czym wywołasz element..showExtWindow(); to Twoja sprawa.
Jak byś nie zauważył - w okienku chwytam element (być może wygenerowany w nim samym przez html , dodaję addExt(..) - potem wywołuję. To samo co shift -enter tylko przyciskiem automatycznie.

Atrybuty - ? wpisujesz nazwę, co ma być wykonane i dajesz "zapisz" to wszystko.
1.jpg2.jpg

O ten dymek? 4.jpg
To najbardziej podstawowe style CSS z najbardziej podstawowymi wartościami.
Taka ramka
1.jpg
To jest automatycznie wygenerowany taki kod HTML

<html id="html" onkeypress="if(event.shiftKey &amp;&amp; event.keyCode=='13'){document.body.showExtWindow();}"><head>
  <style>#body{display:flex;align-items:center;justify-content:center;background:linear-gradient(to right, #0000DD, #000033);}#ramka{width:50%;height:50%;border-radius:12px;}</style>
 </head>
<body id="body"><iframe id="ramka"></iframe></body></html>

I to zajmuje sekundę.

1

@johnny_Be_good: Podpowiem, że jeżeli chciałbyś mieć kolorowanie składni i inne funkcjonalności przyspieszające edycję, a nie umiesz ich zrobić samemu, to możesz użyć biblioteki CodeMirror.

2

@Manna5: Oj kolego nie wiesz z kim rozmawiasz, johnny jest najlepszym programistą w PL

0

54 minuty (wraz z poprawkami biblioteki) mi zajęło to co wcześniej 2 dni rzeźbiłem.

1.jpg

<html id="html" onClick="if(event.shiftKey){document.body.showExtWindow();}">
<head>
  <style>#body{display:flex;flex-direction:row;margin:0px;}#lewy_div_id{display:flex;flex-direction:column;width:49vw;border:1px solid blue;}#panel_kontrolny_id{height:5%;}#panel_zrodla_id{height:78%;}#panel_konsoli_id{height:20%;}#prawy_div_id{width:50.7vw;border:1px solid red;}#panel_dysku_id{width:99.5%;height:99vh;}#panel_pomocy_id{position:absolute;top:10%;left:15%;width:70%;height:80%;border:1px solid blue;border-radius:8px;background-color:lightGrey;display:none;}#panel_dysku_id{width:99.5%;height:99vh;}#panel_ascii_id{position:absolute;top:10%;left:15%;width:70%;height:80%;border:1px solid blue;border-radius:8px;background-color:lightGrey;display:none;}#panel_ustawien_id{position:absolute;top:10%;left:15%;width:70%;height:80%;border:1px solid blue;border-radius:8px;background-color:lightGrey;display:none;}</style>
 </head>
<body id="body" onLoad="addExt(document.body,ExtWindowSrc.default_style,'#body',window.top);document.querySelectorAll('SCRIPT')[0].remove();">

<script src="testowy.js"></script>
<div id="lewy_div_id">
                      <iframe id="panel_kontrolny_id"></iframe>
                      <iframe id="panel_zrodla_id"></iframe>
                      <iframe id="panel_konsoli_id"></iframe></div>
<div id="prawy_div_id">
                      <iframe id="panel_dysku_id" srcdoc="prawy_div"></iframe>
</div>

      <iframe id="panel_ustawien_id" srcdoc="ustawienia"></iframe>
      <iframe id="panel_ascii_id" srcdoc="ascii"></iframe>
      <iframe id="panel_pomocy_id" srcdoc="pomoc"></iframe>

<script>


function init(){
                
                tWindow = window.top;

                lewy_div = window.top.document.getElementById('lewy_div_id');
                panel_kontrolny = window.top.document.getElementById('panel_kontrolny_id');
                panel_zrodla = window.top.document.getElementById('panel_zrodla_id');
                panel_konsoli = window.top.document.getElementById('panel_konsoli_id');

                prawy_div = window.top.document.getElementById('prawy_div_id');
                panel_dysku = window.top.document.getElementById('panel_dysku_id');

                panel_pomocy = window.top.document.getElementById('panel_pomocy_id');
                panel_ustawien = window.top.document.getElementById('panel_ustawien_id');
                panel_ascii = window.top.document.getElementById('panel_ascii_id');

                prawy_div.style.display = "flex";}



 init();

panel_kontrolny.setAttribute(`srcdoc`,`<html id="html"><style>#body{margin:0%;display:flex;flex-direction:row;}#kompuluj_id{display:flex;align-items:center;justify-content:center;font:24px italic arial,serif;height:99.5%;cursor:pointer;width:19%;border-radius:4px;}#format_id{display:flex;align-items:center;justify-content:center;font:24px italic arial,serif;width:19%;border-radius:4px;cursor:pointer;}#widok_id{display:flex;justify-content:center;align-items:center;font:24px italic arial,serif;border-radius:4px;width:5.3%;cursor:pointer;}#ascii_id{display:flex;align-items:center;justify-content:center;font:24px italic arial,serif;cursor:pointer;width:19%;border-radius:4px;}#ustaw_id{display:flex;align-items:center;justify-content:center;font:24px italic arial,serif;cursor:pointer;border-radius:4px;}#pomoc_id{display:flex;align-items:center;justify-content:center;cursor:pointer;font:24px italic arial,serif;width:19%;border-radius:4px;}</style><body id="body" onLoad="init();window.top.addExt(document.body,window.top.ExtWindowSrc.default_style,'#body',window.top.document.getElementById('panel_kontrolny_id').contentWindow);"><button id="kompuluj_id" onclick="document.body.showExtWindow();">Kompiluj</button><button id="format_id">Format C:</button><button id="ascii_id" onClick="panel_ascii.switch();">Ascii</button><button  id="ustaw_id" onclick="panel_ustawien.switch();">Ustawienia</button><button id="pomoc_id" onClick="panel_pomocy.switch();">Pomoc</button><button id="widok_id" onClick="prawy_div.switch();"><></button>\<\script>`+window.top.init+`;\<\/script></body></html>`);

panel_kontrolny.contentWindow.init = window.top.init;


panel_ustawien.switch=function(){
                                       if(this.style.display=='flex'){
                                                                      this.style.display='none';
                                                                }else{
                                                                      tWindow.ukryjPomoc();this.style.display='flex';}}

panel_pomocy.switch = panel_ustawien.switch;
panel_ascii.switch = panel_ustawien.switch;
prawy_div.switch = panel_ustawien.switch;

ukryjPomoc = function(){
                        panel_pomocy.style.display='none';
                        panel_ustawien.style.display='none';
                        panel_ascii.style.display='none';}





</script>
</body>
</html>

This it, the apocalypse.. xD

2

Myślę, że lepiej wyjdziesz na tym wszystkim jak zaczniesz robić mniejsze projekciki czytać dokumentację HTML, JS i CSS.
W tej chwili zarówno w kodzie jak i w narzędziu, które pokazałeś widać Twój upór ale niestety też brak wiedzy i doświadczenia.

Stworzyłeś "pokraczne" narzędzie nie mając podstawowych umiejętności posługiwania się narzędziami t.j. JavaScript i CSS i wyszło jak wyszło.
Zapewne jesteś dumny z dzieła i wiele się nauczyłeś podczas pisania ale trzeba powiedzieć wprost... To się nie nadaje do użytku.
Oczywiście to kwestia gustu ale nawet wygląd jest odrażający i można go niewielkim nakładem ucywilizować.

Gwrantuję Ci, że nawet przeciętny ale ogarnięty programista korzystając z sensownego edydora HTML choćby darmowego VSCode czy NetBeans stworzy stronę dużo szybciej i lepszej jakości niż Ty we wsłasnym narzędziu, które rzekomo ma ułatwiać pracę.

Jakaś ideaa Ci przyświecała ale raczej zbłądziłeś.

1 użytkowników online, w tym zalogowanych: 0, gości: 1