Cu siguranță, ați întâlnit de multe ori editori vizuali, permițându-vă să formați destul de convenabil aspectul paginilor sau a unor mesaje, de exemplu, pe un forum. Și nu cu coduri BB, dar obținând imediat un rezultat specific. Există o mulțime de acești editori pe Internet. Una dintre cele mai populare este TinyMCE cu toate acestea, sunt un susținător al propriilor mele scenarii și cred asta trebuie să existe o soluție pentru fiecare sarcină mai degrabă decât universală. Prin urmare, în acest articol vă voi spune, cum se creează editor vizualîn JavaScript.

Imediat dau un cod destul de bine comentat:

La prima vedere, codul pare a fi foarte complex. Și așa este, dar dacă o luăm în considerare în ceea ce privește elementele de bază, atunci nu este nimic complicat. Există forma obisnuitași câmpul ascuns unde este salvat editorul rezultat cod HTML... Editorul în sine este un cadru obișnuit, adică un obișnuit Pagina HTML, în care putem scrie text ( designMode = "pornit"). Și diverse formatări sunt create folosind metoda execCommand () care execută comanda specificată în parametru. Și cred că nu vă va fi dificil să creați butoane noi și să le atașați handlere similare.

Nu este nimic de prisos în acest scenariu, doar cel mai important și de bază și poate fi luat ca bază pentru crearea propriului editor vizual în JavaScript, în care nu va fi nimic de prisos, ci doar ceea ce ai nevoie.

Îmi poate sugera cineva vreo bibliotecă în Editorul de documente javascript (sfârșit client) unde utilizatorul poate vizualiza și edita documente precum doc, docx, odf etc.

1 Răspuns

1

Cel mai bun pariu este să căutați convertoare și apoi să editați conținutul convertit.

Caut o soluție de lucru de câteva săptămâni și cea mai bună pe care am găsit-o până acum este docx2html.

În funcție de platforma dvs. de dezvoltare, puteți utiliza și Google „ONLYOFFICE Document Server Ediția comunitară". Au editori de pagini pentru Word, Excel și Powerpoint - dar sunt asp. Este o platformă open source și disponibilă pe Github. S-ar putea să merite totuși o privire.

Este posibil să convertiți doc / docx în html folosind jquery / javascript?

Trebuie să convertesc doc/docx în html. Am fișiere stocate în Amazon s3. Trebuie să îl văd și să îl editez într-un browser. În acest moment, folosesc Apache POI pentru...

Generarea documentelor docx din șablonul docx javascript

Caut o bibliotecă în javascript care să poată genera documente docx din șablonul docx și să poată înlocui etichetele cu valorile lor și să înlocuiască imaginile cu alte imagini Am găsit numele bibliotecii...

cum să judeci dacă un fișier doc sau docx este în POI

Titlul poate fi puțin confuz. Cea mai simplă metodă ar trebui să se bazeze pe numele extensiei, la fel ca: // este reprezintă InputStream if (filePath.endsWith (doc)) (WordExtractor ex = nou...

doc sau docx: există o cale sigură pentru a identifica tipul din „cereri” în python3?

1) Cum pot distinge fișierele doc și docx de solicitări? a) de exemplu, dacă am url = "https://www.iadb.org/Document.cfm?id=36943997" r = requests.get (url, timeout = 15) ...

Importarea fișierelor doc și docx în .Net și C #

Scriu editor de textși vreau să adaug posibilitatea de a importa fișiere .doc și .docx. Știu că pot folosi automatizarea OLE, dar dacă folosesc biblioteca OLE recentă, nu va...

Editarea documentelor (DOC, DOCX, RTF, TXT) în Webforms

Dezvolt o aplicație web folosind asp.net 3.5. Această aplicație are multe documente, cum ar fi .doc, .docx, .rtf, .pdf, .txt, etc ... și uneori utiliza trebuie să editeze aceste documente. V...

Convertiți DOC / DOCX în HTML semantic

Aș dori să convertesc documentele doc / docx în HTML semantic. Câteva dorințe/cerințe: HTML semantic astfel încât titlurile din document să fie

,

etc., tabele -...

Pachete Golang pentru a converti doc în docx și docx în pdf?

Scriu o aplicație web în Golang unde utilizatorul poate încărca un fișier doc sau docx. O parte din conținutul fișierului va fi modificat conform unui format predefinit. Ulterior utilizator...

Încărcați documentul Rich Word în RichText Editor Telerik Editor

Am un formular în care încarc un fel de document Word și îl salvez în DB. Mai târziu trebuie să fac niște etichete ale acestor documente. Momentan nu am gasit nimic pentru...

Convertiți fișierul doc în format docx

Am convertit fișierul docx în html, deoarece este în format Zip. dar trebuie să convertesc și fișierele doc. Există vreo modalitate de a schimba fișierul doc în docx folosind cod (prefer java) Vă rugăm...

Am realizat cu succes codul pentru a afișa PDF-ul în browser în loc de dialogul de deschidere/salvare. Acum sunt blocat încercând să afișez un document Word într-un browser. Vreau să afișez un document Word în Firefox, IE7 +, Chrome etc.

poate cineva ajuta? Primesc întotdeauna un dialog de deschidere/salvare când afișez cuvântul doc în browser. Vreau să implementez această funcționalitate cu JavaScript.

6 răspunsuri

totuși, dacă preferați să aveți suport încorporat, în majoritatea, dacă nu în toate browserele, aș recomanda resalvarea .doc / .docx ca PDF, acestea pot fi redate și independent folosind formatul PDF.js al Mozilla.

Răspunsurile lui Brandon și fatbotdesigns sunt ambele corecte, dar implementate previzualizare google docs, am găsit mai multe fișiere .docx care nu au putut fi procesate de google. Am trecut la previzualizarea online MS Office și funcționează ca un farmec.

Https://view.officeapps.live.com/op/embed.aspx?src=http://remote.url.tld/path/to/document.doc "

se pare că există niște biblioteci js care pot gestiona .docx (nu .doc) pentru a converti html-ul din partea clientului (într-o anumită ordine):

https://github.com/lalalic/docx2html - docx în html, majoritatea elementelor sunt acceptate

https://github.com/mwilliamson/mammoth.js - Acceptă anteturi, liste, tabele, note de subsol, note de subsol, imagini și casete de text! - 1 ->

https://www.npmjs.com/package/docx2html - conversia documentelor HTML în DOCX în browser

https://github.com/artburkart/docx2html - se pare că funcționează în browser

Notă: Dacă sunteți în căutarea Cel mai bun mod convertiți fișierul doc / docx partea client, atunci probabil răspunsul este nu este nevoie... Dacă chiar trebuie să o faci, fă-o. pe partea de server, adică cu libreoffice în modul headless, apache-poi sau orice bibliotecă este cea mai potrivită pentru tine.

ViewerJS este util pentru vizualizarea / încorporarea formatului openoffice precum odt, odp, ods, precum și pdf.

pentru încorporarea documentului openoffice / pdf

/ ViewerJS / este calea ViewerJS

# .. / demo / ohm2013 - adăugați calea fișierului dvs

Acest lucru va elimina orice dependențe de rulare din servicii Googleși Microsoft (de exemplu, dacă au fost sau ați fi limitat la ele).

De asemenea, are avantajul că vă puteți extinde la alte tipuri de fișiere dacă doriți (PPTX, XLS, DOC etc.)

Un editor de cod este un instrument la îndemână pentru fiecare programator. Și fiecare alege pentru sine: cineva apreciază funcționalitatea, mobilitatea cuiva, pentru cineva principalul lucru este designul și comoditatea. Unii oameni chiar le place să scrie cod în Notepad, dar este ca și cum ai încerca să construiești o casă cu un ciocan.

JavaScript este un limbaj puternic și capricios. Pe de o parte, există multe cadre și biblioteci, pe de altă parte, nu sunt cele mai simple sintaxe și pericole asociate cu „dinamica”. Prin urmare, este important să alegeți un editor care să lucreze cu el. Alegerea potrivitaîți păstrează codul curat, de mare viteză dezvoltare, greseli minime si placere de la munca. Va dura mult timp să alegeți unul dintre sutele de editori existenți, așa că am făcut o parte din muncă pentru dvs. Iată primele 5.

WebStorm

WebStorm de la JetBrains este excelent în ambele manifestări: ca IDE, acceptă lucrul cu sisteme de control al versiunilor, vă permite să implementați cod de la distanță, ca un editor - facilități standard, cum ar fi evidențierea sintaxelor, completarea automată, navigarea.

Avantaje:

• LiveEdit - vizualizați modificările aduse codului fără a fi nevoie să îl salvați;
• interacțiunea cu cadre precum React, Angular, Meteor;
• peste o sută de teste încorporate pentru detectarea erorilor;
• integrare cu Mocha, Protractor, Jest, Karma pentru teste unitare;
• depanator complet pentru codul de depanare pe partea serverului și a clientului;
• navigare pentru lucrul simultan cu mai multe fișiere;
• completarea codului, evidențierea sintaxei.

Dezavantaje:

• costă 129 USD pentru primul an de funcționare;
• pentru programatorii începători, funcționalitatea este redundantă.

Codul Visual Studio

Un furk al IDE-ului Visual Studio axat pe lucrul cu cod. Este ușor de învățat, ușor de utilizat și funcțional în același timp.

Avantaje:

• autocompletare contextuală, atât sintaxă, cât și variabile utilizate, module, funcții etc.;
• depanare cu puncte de întrerupere, stivă de apeluri, consolă interactivă;
• suport pentru fragmente și șabloane;
• integrare cu Git;
• interfață convenabilă și simplă;
• editor gratuit.

Dezavantaje:

• câteva plugin-uri.

Text sublim

Un editor multiplatform convenabil și testat în timp, cu o interfață personalizabilă și capacitatea de a efectua acțiuni triviale folosind taste rapide.

Avantaje:

• Taste rapide;
• navigarea prin cod sub forma unei mini-harti;
• capacitatea de a schimba tema vizuală;
• suport pentru fragmente;
• evidențierea, completarea variabilelor și a sintaxelor;
• editări multiple datorită utilizării indicatoarelor;
• suport pentru sisteme de construire;
• verificarea sintaxei chiar în momentul introducerii;
• salvare automata.

Dezavantaje:

• versiunea completa costă 70 USD;
• lipsa unui analizor de cod pentru plasarea link-urilor.

Atom Editor

Introdus în 2015, un editor de cod Git care copiază designul Sublime Text și împachetat în Chromium.

Avantaje:

• peste 50 de module deschise;
• interfață convenabilă și plăcută;
• liber;
• completarea și evidențierea codului;
• manager de pachete, dintre care sunt deja peste 3,5 mii;
• setări flexibile pentru editor, pachete de plug-in, teme de interfață;
• editare și navigare folosind taste rapide.

Dezavantaje:

• productivitate scăzută;
• pachet gol „din cutie”.

Paranteze

În 2014, Brackets a speriat programatorii cu erori și defecte, dar acum revine treptat încrederea cu noi funcționalități de înaltă calitate.

Avantaje:

• pachet bogat „din cutie”;
• Modul Live Preview - previzualizați editările în browser în timp real;
• manager de pachete;
• afișarea imaginilor și culorilor utilizate în cod;
• autocompletare și evidențierea sintaxelor;
• analizor de coduri;
• liber.

Dezavantaje:

• accent strict pe web și HTML + CSS + JavaScript;
• dezvoltare lentă;
• performanță lentă datorită funcțiilor de previzualizare.

Scrie un mesaj Cod JavaScript puteți folosi, de asemenea, un „Notepad” obișnuit - doar salvați rezultatul cu extensia .js și nu numai că se va conecta la site, ci chiar va funcționa. Cu toate acestea, utilizarea unui astfel de editor limitat ar încetini foarte mult dezvoltarea. Prin urmare, este mai bine să luați ceva specializat. Există mai multe criterii principale după care să alegeți un editor pentru lucrul cu codul JavaScript.

Mai întâi, aveți nevoie de evidențierea sintaxelor: numele, operatorii și caracterele speciale trebuie afișate diferit, astfel încât să puteți citi rapid codul.

Evidențierea sintaxei în Notepad ++

În al doilea rând, aveți nevoie de autocompletare: atunci când introduceți numele unei funcții sau variabile, editorul ar trebui să ofere mai multe opțiuni pentru comenzile pe care probabil doriți să le introduceți. Este de dorit ca acesta să arate și indicii pentru componenta selectată - de exemplu, argumentele necesare, tipul variabilei, scurta descriere etc.

Completare automată în Notepad ++

În al treilea rând, aveți nevoie de capacitatea de a ascunde blocuri individuale. Când lucrați la proiecte mari, acest lucru este util, deoarece nu trebuie să parcurgeți bucăți uriașe de cod pentru a-l găsi pe cel de care aveți nevoie.

Ascunderea blocurilor în Visual Studio Code

Este de dorit ca erorile să fie evidențiate - atunci le puteți observa și corecta imediat:

Afișarea erorilor în codul Visual Studio

Bonusurile bune vor fi capacitatea de a lucra cu mai multe fișiere într-o singură fereastră, un manager de proiect, o alegere de teme, instalarea de pluginuri și așa mai departe.

Există un numar mare de editori care îndeplinesc aceste cerințe și sunt potriviți pentru lucrul cu JavaScript. Pe ce să scrieți cod este treaba privată a tuturor, dar mulți au probleme în alegerea programului potrivit, așa că am compilat o listă cu 6 instrumente bune.

Notepad ++

Notepad ++ este un editor open source simplu și ușor de utilizat. Are evidențiere de sintaxă pentru mai multe limbi, inclusiv JS, formatare automată și completare automată. Există navigare sub formă de file, manager de fișiereși hărți de cod.

Disponibil pentru a lucra cu diferite codificări, conectarea compilatoarelor, utilizarea pluginurilor și altele funcții utile... De exemplu, adăugarea QuickText va îmbunătăți completarea automată încorporată.

Notepad ++ este actualizat în mod regulat, astfel încât remediază rapid erorile și adaugă funcții noi. Din păcate, funcționează doar pe Windows.

Vim

Editorul Vim a fost mult timp un clasic. Mulți oameni spun că este greu de înțeles, dar dacă îi dedici suficient timp, nu vei dori să folosești altceva.

Pe lângă îndeplinirea tuturor criteriilor pe care le-am ales, Vim este, de asemenea, complet personalizabil, astfel încât să puteți:

• instalați pluginuri;
• schimba teme;
• atribuiți taste rapide și așa mai departe.

Vim este complet gratuit și rulează pe toate platformele de la Windows, MacOS și Linux până la MS DOS și OS / 2.

Microsoft Visual Studio

Microsoft Visual Studio este un IDE care are tot ce aveți nevoie pentru a lucra cu JS. Pe lângă evidențierea obișnuită a sintaxei și completarea automată, puteți utiliza și un depanator și puteți crea teste unitare.

Cu toate acestea, programul cântărește mult și încarcă puternic sistemul, așa că nu este foarte potrivit pentru lucrul pe computere slabe.

Un abonament lunar poate costa între 45 USD și 250 USD pe lună, dar există și versiune gratuită pentru dezvoltatorii începători și cei care creează software open source. IDE-ul este disponibil pentru Windows și MacOS, iar pe Linux poate fi instalat folosind Wine.

Codul Visual Studio

Visual Studio Code este o versiune ușoară (~ 170 MB față de 30 GB), multiplatformă și gratuită a Visual Studio. Acest editor vine preinstalat cu suport pentru JavaScript, TypeScript și Node.JS.

Extensiile cu alte limbi pot fi descărcate direct din Visual Studio Code.

Depanatorul încorporat și comenzile Git pentru lucrul cu sistemul de control al versiunilor GitHub vă permit să accelerați testarea și publicarea aplicațiilor.

Text sublim

Sublime Text este un editor simplu multiplatformă. Interfața sa este personalizabilă, iar unele acțiuni pot fi efectuate folosind taste rapide.

De asemenea, are suport pentru fragmente, completare automată, evidențiere de sintaxă și navigare. Un bonus interesant este salvarea automată. Cu toate acestea, este mai nevoie de începători - la urma urmei, programatorii profesioniști de-a lungul anilor de muncă își dezvoltă obiceiul de a persista după introducerea fiecărei comenzi.

Principalul dezavantaj al Sublime Text este că versiunea completă costă 80 USD (licența este emisă pentru un utilizator care poate folosi editorul pe orice computer). In rest se potriveste bine
Dezvoltatorii JS.