Editor kode adalah alat yang berguna untuk setiap programmer. Dan setiap orang memilih sendiri: beberapa menghargai fungsionalitas, beberapa menghargai mobilitas, bagi yang lain yang utama adalah desain dan kenyamanan. Beberapa orang bahkan suka menulis kode di Notepad, tapi itu seperti mencoba membangun rumah dengan palu.

JavaScript adalah bahasa yang kuat dan berubah-ubah. Di satu sisi, ada banyak kerangka kerja dan perpustakaan, di sisi lain, bukan sintaksis yang paling sederhana dan bahaya yang terkait dengan “dinamika”. Oleh karena itu, penting untuk memilih editor untuk bekerja dengannya. Pilihan yang tepat akan memberi Anda kode bersih, kecepatan pengembangan tinggi, kesalahan minimal, dan kesenangan bekerja. Memilih salah satu dari ratusan editor yang ada dapat memakan banyak waktu, jadi kami telah melakukan beberapa pekerjaannya untuk Anda. Inilah 5 yang terbaik.

Badai Web

WebStorm dari JetBrains luar biasa dalam kedua manifestasinya: sebagai IDE, ia mendukung bekerja dengan sistem kontrol versi, memungkinkan Anda menyebarkan kode dari jarak jauh, dan sebagai editor - fasilitas standar seperti penyorotan sintaksis, pelengkapan otomatis, navigasi.

Keuntungan:

• LiveEdit - melihat perubahan yang dilakukan pada kode tanpa harus menyimpannya;
• interaksi dengan kerangka kerja, seperti React, Angular, Meteor;
• lebih dari seratus tes bawaan untuk mendeteksi kesalahan;
• integrasi dengan Mocha, Busur Derajat, Jest, Karma untuk pengujian unit;
• debugger skala penuh untuk men-debug kode di sisi server dan klien;
• navigasi untuk bekerja secara bersamaan dengan beberapa file;
• penyelesaian kode, penyorotan sintaksis.

Kekurangan:

• biaya $129 untuk tahun pertama operasi;
• Untuk pembuat kode pemula, fungsinya mubazir.

Kode Visual Studio

Sebuah cabang dari Visual Studio IDE yang ditujukan untuk bekerja dengan kode. Mudah dipelajari, mudah digunakan, dan sekaligus fungsional.

Keuntungan:

• penyelesaian kontekstual sintaksis dan variabel, modul, fungsi yang digunakan, dll.;
• debugger dengan breakpoint, tumpukan panggilan, konsol interaktif;
• dukungan untuk cuplikan dan templat;
• Integrasi Git;
• antarmuka yang nyaman dan sederhana;
• editor gratis.

Kekurangan:

• beberapa plugin.

Teks Luhur

Editor lintas platform yang nyaman dan teruji waktu, dengan antarmuka yang dapat disesuaikan dan kemampuan untuk melakukan tindakan sepele menggunakan tombol pintas.

Keuntungan:

• tombol pintas;
• kode navigasi dalam bentuk mini-map;
• kemampuan untuk mengubah tema visual;
• dukungan cuplikan;
• penyorotan, pelengkapan otomatis variabel dan sintaksis;
• banyak pengeditan berkat penggunaan pointer;
• membangun dukungan sistem;
• pemeriksaan sintaksis saat Anda mengetik;
• simpan otomatis.

Kekurangan:

• versi lengkap biaya $70;
• kurangnya penganalisis kode untuk menempatkan tautan.

Penyunting Atom

Muncul pada tahun 2015, editor kode dari Git, menyalin desain Sublime Text dan dibungkus dengan Chromium.

Keuntungan:

• lebih dari 50 modul terbuka;
• antarmuka yang nyaman dan menyenangkan;
• bebas;
• penyelesaian dan penyorotan kode;
• pengelola paket yang jumlahnya sudah lebih dari 3,5 ribu;
• pengaturan fleksibel untuk editor, paket plugin, dan tema antarmuka;
• pengeditan dan navigasi menggunakan tombol pintas.

Kekurangan:

• produktivitas rendah;
• set kosong "di luar kotak".

Kurung

Pada tahun 2014, Brackets menakuti pemrogram dengan bug dan kekurangannya, tetapi sekarang Brackets secara bertahap mendapatkan kembali kepercayaan dengan fungsionalitas baru yang berkualitas tinggi.

Keuntungan:

• peralatan kaya “di luar kotak”;
• Mode Pratinjau Langsung - pratinjau pengeditan di browser secara real time;
• manajer paket;
• menampilkan gambar dan warna yang digunakan dalam kode;
• pelengkapan otomatis dan penyorotan sintaksis;
• penganalisis kode;
• bebas.

Kekurangan:

• fokus ketat pada web dan HTML+CSS+JavaScript;
• perkembangan yang lambat;
• kinerja lambat karena fungsi pratinjau.

Adakah yang bisa menyarankan saya perpustakaan apa pun di Editor Dokumen javascript (akhir klien) tempat pengguna dapat melihat dan mengedit dokumen seperti doc, docx, odf, dll.

1 Balasan

1

Taruhan terbaik Anda adalah mencari konverter dan kemudian mengedit konten yang dikonversi.

saya sedang mencari solusi kerja sudah beberapa minggu sekarang dan yang terbaik yang saya temukan sejauh ini adalah docx2html.

Tergantung pada platform pengembangan Anda, Anda juga dapat menggunakan "ONLYOFFICE Document Server Community Edition" Google. Mereka memiliki editor halaman untuk Word, Excel dan Powerpoint - tetapi mereka adalah asp. Ini adalah platform terbuka kode sumber dan tersedia di Github. Mungkin patut untuk dilihat.

Apakah mungkin untuk mengonversi doc/docx ke html menggunakan jquery/javascript?

Saya perlu mengonversi doc/docx ke html. Saya memiliki file yang disimpan di Amazon s3. Saya perlu melihat & mengeditnya di browser. Saat ini, saya menggunakan Apache POI untuk...

Menghasilkan dokumen docx dari template javascript docx

Saya mencari perpustakaan dalam javascript yang dapat menghasilkan dokumen docx dari template docx dan dapat mengganti tag dengan nilainya dan mengganti gambar dengan gambar lain. Saya menemukan nama perpustakaannya...

cara menilai apakah suatu file doc atau docx di POI

Judulnya mungkin sedikit membingungkan. Metode paling sederhana harus didasarkan pada nama ekstensi seperti: // mewakili InputStream if (filePath.endsWith(doc)) ( WordExtractor ex = new...

doc atau docx: apakah ada cara aman untuk mengidentifikasi jenis dari "permintaan" di python3?

1) Bagaimana cara membedakan antara file doc dan docx dari permintaan? a) misalnya, jika saya memiliki url="https://www.iadb.org/Document.cfm?id=36943997" r = request.get(url,timeout=15)...

Impor file doc dan docx ke .Net dan C#

saya sedang menulis editor teks dan saya ingin menambahkan kemampuan untuk mengimpor file .doc dan .docx. Saya tahu saya bisa menggunakan OLE Automation, tetapi jika saya menggunakan perpustakaan OLE terbaru, itu tidak akan...

Mengedit dokumen (DOC, DOCX, RTF, TXT) di Formulir Web

Saya sedang mengembangkan aplikasi web menggunakan asp.net 3.5. Aplikasi ini memiliki banyak dokumen seperti .doc, .docx, .rtf, .pdf, .txt, dll... dan terkadang pengguna perlu mengedit dokumen-dokumen tersebut. DI DALAM...

Ubah DOC/DOCX menjadi HTML semantik

Saya ingin mengonversi dokumen doc/docx menjadi HTML semantik. Beberapa keinginan/persyaratan: HTML semantik sedemikian rupa sehingga judul dalam dokumen adalah , dll., tabel -...

Paket Golang untuk mengonversi doc ke docx dan docx ke pdf?

Saya sedang menulis aplikasi web di Golang di mana pengguna dapat mengunggah file doc atau docx. Beberapa isi file akan diubah sesuai format yang telah ditentukan. Nanti pengguna...

Muat dokumen Rich Word ke dalam editor telerik editor RichText

Saya memiliki beberapa formulir di mana saya mengunggah beberapa dokumen Word dan menyimpannya ke DB. Saya harus menandai dokumen-dokumen ini nanti. Saat ini saya belum menemukan apa pun untuk...

Mengonversi file doc ke format docx

Saya mengonversi file docx ke html karena dalam format Zip. tapi saya perlu mengonversi file doc juga. Apakah ada cara untuk mengubah file DOC menjadi docx menggunakan kode (lebih suka Java).

Pastinya, Anda sudah sering menjumpai editor visual yang memungkinkan Anda dengan mudah membentuk tampilan halaman atau beberapa pesan, misalnya di forum. Dan bukan dengan kode BB, tapi langsung mendapatkan hasil tertentu. Ada cukup banyak editor seperti itu di Internet. Salah satu yang paling populer adalah TinyMCE, namun saya adalah pendukung skrip saya sendiri dan percaya bahwa untuk setiap tugas harus ada solusinya sendiri, dan bukan solusi universal. Oleh karena itu, pada artikel kali ini saya akan memberi tahu Anda cara membuatnya editor visual dalam JavaScript.

Berikut beberapa kode yang mendapat komentar cukup baik:

// Tampilkan tombol edit
dokumen.write("");
dokumen.write("");
dokumen.tulis("
");
dokumen.write(""); // Tambahkan iframe
/* Tergantung pada browsernya, kita mendapatkan akses ke frame yang dibuat */
var isGecko = navigator.userAgent.toLowerCase().indexOf("gecko") != -1;
var iframe = (isGecko) ? document.getElementById("frameId") : frame["frameId"];
var iWin = (isGecko) ? iframe.contentWindow: iframe.window;
var iDoc = (isGecko) ? iframe.contentDocument: iframe.dokumen;
/* Membuat kode untuk halaman HTML kosong */
iHTML = "";
iDoc.open(); // Buka bingkainya
iDoc.write(iHTML); // Tambahkan kode tertulis ke frame
iDoc.close(); // Tutup bingkai
iDoc.designMode = "aktif"; // Aktifkan mode pengeditan bingkai
/* Berfungsi untuk mengatur penampilan teks yang dipilih
Kumpulan lengkap perintah yang mungkin: http://javascript.itsoft.ru/execcom/execCommands.html */
fungsi setBold() (
iWin.fokus();
iWin.document.execCommand("tebal", null, "");
}
fungsi setItal() (
iWin.fokus();
iWin.document.execCommand("italic", null, "");
}
fungsi simpan() (
/* Menyimpan kode HTML pada kolom tersembunyi sehingga nantinya Anda dapat meneruskan kode HTML yang dihasilkan ke pengendali skrip */
document.getElementById("content").value = iDoc.body.innerHTML;
kembali benar;
}

Sekilas, kodenya tampak sangat rumit. Memang begitu, tapi kalau dilihat dari unsur dasarnya, tidak ada yang ribet. Ada formulir biasa dan bidang tersembunyi, tempat kode HTML yang dihasilkan di editor disimpan. Editornya sendiri adalah frame biasa, yaitu halaman HTML biasa di mana kita dapat menulis teks (designMode = "on"). Dan berbagai pemformatan dibuat menggunakan metode execCommand(), yang menjalankan perintah yang ditentukan dalam parameter. Dan menurut saya tidak akan sulit bagi Anda untuk membuat tombol baru dan memasang penangan serupa ke dalamnya.

Tidak ada yang berlebihan dalam skrip ini, hanya hal-hal yang paling penting dan mendasar, dan Anda dapat menjadikannya sebagai dasar untuk membuat editor visual Anda sendiri dalam JavaScript, di mana tidak akan ada yang berlebihan, tetapi hanya yang Anda butuhkan.

Anda dapat menulis kode JavaScript di Notepad biasa - simpan saja hasilnya dengan ekstensi .js, dan itu tidak hanya akan terhubung ke situs, tetapi bahkan berfungsi. Namun, menggunakan editor terbatas seperti itu akan sangat memperlambat pengembangan. Oleh karena itu, lebih baik mengambil sesuatu yang khusus. Ada beberapa kriteria utama yang Anda perlukan untuk memilih editor untuk bekerja dengan kode JavaScript.

Pertama, kita memerlukan penyorotan sintaksis: nama, operator, dan karakter khusus harus ditampilkan secara berbeda agar kode dapat dibaca dengan cepat.

Penyorotan sintaksis di Notepad++

Kedua, Anda memerlukan pelengkapan otomatis: saat Anda memasukkan nama fungsi atau variabel, editor akan menawarkan beberapa opsi untuk perintah yang mungkin Anda masukkan. Sebaiknya ini juga menunjukkan petunjuk tentang komponen yang dipilih - misalnya, argumen yang diperlukan, tipe variabel, deskripsi singkat dan sebagainya.

Pelengkapan otomatis di Notepad++

Ketiga, kita membutuhkan kemampuan untuk menyembunyikan blok individual. Saat mengerjakan proyek besar, ini berguna karena Anda tidak perlu menelusuri banyak kode untuk menemukan apa yang Anda butuhkan.

Menyembunyikan blok di Visual Studio Code

Sebaiknya kesalahan disorot - maka Anda dapat segera melihat dan memperbaikinya:

Menampilkan kesalahan dalam Visual Studio Code

Bonus bagusnya adalah kemampuan untuk bekerja dengan beberapa file dalam satu jendela, manajer proyek, pemilihan tema, pemasangan plugin, dan sebagainya.

Ada banyak editor yang memenuhi persyaratan ini dan cocok untuk bekerja dengan JavaScript. Apa yang harus ditulis kode adalah masalah pribadi setiap orang, tetapi banyak orang mengalami kesulitan dalam memilih program yang tepat, jadi kami telah menyusun daftar 6 alat yang bagus.

Buku Catatan++

Notepad++ - sederhana dan editor yang nyaman sumber terbuka. Ini memiliki penyorotan sintaksis untuk beberapa bahasa, termasuk JS, pemformatan otomatis, dan pelengkapan otomatis. Terdapat navigasi berupa tab, manajer file dan kartu kode.

Anda dapat bekerja dengan pengkodean yang berbeda, menghubungkan kompiler, menggunakan plugin dan fungsi berguna lainnya. Misalnya, menambahkan QuickText akan meningkatkan pelengkapan otomatis bawaan.

Notepad++ diperbarui secara berkala, sehingga dengan cepat memperbaiki bug dan menambahkan fitur baru. Sayangnya, ini hanya berfungsi di Windows.

Vim

Editor Vim telah lama menjadi editor klasik. Banyak orang mengatakan bahwa ini sulit untuk dipahami, tetapi jika Anda mencurahkan cukup waktu untuk itu, Anda tidak akan ingin menggunakan hal lain lagi.

Selain memenuhi semua kriteria pilihan kami, Vim juga dapat disesuaikan sepenuhnya, sehingga Anda dapat:

• instal plugin;
• mengubah topik;
• menetapkan hotkey dan sebagainya.

Vim sepenuhnya gratis dan berfungsi di semua platform, mulai dari Windows, MacOS dan Linux hingga MS DOS dan OS/2.

Microsoft Visual Studio

Microsoft Visual Studio adalah IDE yang memiliki semua yang Anda perlukan untuk bekerja dengan JS. Selain penyorotan sintaksis dan pelengkapan otomatis biasa, Anda juga dapat menggunakan debugger dan membuat pengujian Unit.

Namun, program ini cukup berbobot dan membebani sistem, sehingga sangat tidak cocok untuk bekerja pada komputer yang lemah.

Berlangganan bulanan dapat berharga mulai dari $45 hingga $250 per bulan, tetapi ada juga versi gratis untuk pengembang pemula dan mereka yang membuat program open source. IDE tersedia untuk Windows dan MacOS, dan dapat diinstal di Linux menggunakan Wine.

Kode Visual Studio

Visual Studio Code ringan (~170 MB vs 30 GB), lintas platform dan gratis Versi visual Studio. Editor ini sudah diinstal sebelumnya dengan dukungan untuk JavaScript, TypeScript, dan Node.JS.

Ekstensi untuk bahasa lain dapat diunduh langsung dari Visual Studio Code.

Perintah debugger dan Git bawaan untuk bekerja dengan sistem kontrol versi GitHub memungkinkan Anda mempercepat pengujian dan penerbitan aplikasi.

Teks Luhur

Sublime Text adalah editor lintas platform sederhana. Antarmukanya dapat disesuaikan, dan Anda dapat melakukan beberapa tindakan menggunakan tombol pintas.

Ini juga memiliki dukungan untuk cuplikan, pelengkapan otomatis, penyorotan sintaksis, dan navigasi. Bonus keren - simpan otomatis. Namun, ini lebih dibutuhkan oleh pemula - lagi pula, programmer profesional selama bertahun-tahun bekerja mengembangkan kebiasaan menabung setelah memasukkan setiap perintah.

Kerugian utama Sublime Text adalah versi lengkapnya berharga $80 (lisensi dikeluarkan untuk satu pengguna, yang dapat menggunakan editor di komputer mana pun). Kalau tidak, itu cocok
Pengembang JS.

Saya telah berhasil membuat kode untuk menampilkan file PDF di browser alih-alih kotak dialog "buka/simpan". Sekarang saya terjebak saat mencoba menampilkannya Dokumen kata di peramban. Saya ingin menampilkan dokumen Word di Firefox, IE7+, Chrome, dll.

adakah yang bisa membantu? Saya selalu mendapatkan dialog "buka/simpan" saat menampilkan kata doc di browser. Saya ingin mengimplementasikan fungsi ini menggunakan JavaScript.

6 jawaban

namun, jika Anda lebih memilih untuk mendapatkan dukungan asli, di sebagian besar, jika tidak semua browser, saya akan merekomendasikan menyimpan ulang .doc/.docx sebagai PDF; mereka juga dapat dirender secara independen menggunakan PDF.js Mozilla.

Jawaban Brandon dan fatbotdesigns keduanya benar, tetapi telah menerapkan pratinjau Google Dokumen, kami menemukan beberapa file .docx yang tidak dapat diproses oleh Google. Beralih ke pratinjau online MS Office dan berfungsi dengan baik.

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

Tampaknya ada beberapa perpustakaan js yang dapat menangani .docx (tanpa .doc) untuk mengonversi html di sisi klien (dalam urutan tertentu):

https://github.com/lalalic/docx2html - docx ke html, sebagian besar elemen didukung

https://github.com/mwilliamson/mammoth.js - mendukung judul, daftar, tabel, catatan kaki, catatan kaki, gambar, dan teks kotak!--1-->

https://www.npmjs.com/package/docx2html - Konversi dokumen HTML ke DOCX di browser

https://github.com/artburkart/docx2html - tampaknya berfungsi di browser

Catatan: Jika Anda mencari cara terbaik mengonversi file doc/docx di sisi klien maka mungkin jawabannya Tidak perlu. Jika Anda benar-benar perlu melakukannya, lakukanlah. sisi server yaitu dengan libreoffice dalam mode tanpa kepala, Apache-poi atau perpustakaan lainnya adalah yang terbaik untuk Anda.

ViewerJS berguna untuk melihat/menyematkan format kantor terbuka, seperti odt, odp, ods, serta pdf.

untuk menyematkan dokumen openoffice/pdf

/ViewerJS/ adalah jalur ViewerJS

#../demo/ohm2013 - tambahkan jalur ke file Anda

Ini akan menghapus semua ketergantungan runtime pada layanan Google dan Microsoft (misalnya jika ada, atau Anda terbatas pada layanan tersebut).

Keuntungannya juga Anda dapat memperluas ke jenis file lain jika Anda mau (PPTX, XLS, DOC, dll.)