Операторы 

Как сделать визуальный редактор на JavaScript

Редактор кода - подручный инструмент каждого программиста. И каждый подбирает под себя: кто-то ценит функциональность, кто-то мобильность, для кого-то главное - дизайн и удобство. Кому-то даже нравится писать код в Notepad, но это всё равно, что пытаться построить дом при помощи молотка.

JavaScript - мощный и капризный язык. С одной стороны, множество фреймворков и библиотек, с другой - не самый простой синтаксис и опасности, связанные с «динамикой». Поэтому для работы с ним важно подобрать редактор. Правильный выбор обеспечит вам чистоту кода, высокую скорость разработки, минимум ошибок и удовольствие от работы. На выбор одного из сотен существующих редакторов потратите уйму времени, поэтому мы проделали часть работы за вас. Вот 5 лучших.

WebStorm

WebStorm от JetBrains прекрасен в обоих своих проявлениях: как IDE он поддерживает работу с системами контроля версий, позволяет удалённо развернуть код, как редактор - стандартные удобства, вроде подсветки синтаксиса, автодополнений, навигации.

Преимущества:

  • LiveEdit - просмотр внесённых в код изменений без необходимости его сохранять;
  • взаимодействие с фреймворками, например React, Angular, Meteor;
  • больше сотни встроенных тестов для обнаружения ошибок;
  • интегрирование с Mocha, Protractor, Jest, Karma для юнит-тестов;
  • полномасштабный дебаггер для отладки кода на серверной и клиентской сторонах;
  • навигация для одновременной работы с несколькими файлами;
  • автодополнение кода, подсветка синтаксиса.

Недостатки:

  • стоит 129 $ за первый год работы;
  • для начинающих кодеров функционал избыточен.
Visual Studio Code

Ответвление IDE Visual Studio, направленное на работу с кодом. Он прост для освоения, удобен в использовании, и при этом функционален.

Преимущества:

  • контекстное автодополнение, как синтаксиса, так и используемых переменных, модулей, функций и т. д.;
  • дебаггер с точками останова, стеком вызовов, интерактивной консолью;
  • поддержка сниппетов и шаблонов;
  • интеграция с Git;
  • удобный и простой интерфейс;
  • бесплатный редактор.

Недостатки:

  • мало плагинов.
Sublime Text

Удобный и проверенный временем кроссплатформенный редактор, с настраиваемым интерфейсом и возможностью совершать тривиальные действия при помощи горячих клавиш.

Преимущества:

  • горячие клавиши;
  • навигация по коду в виде мини-карты;
  • возможность изменить визуальную тему;
  • поддержка сниппетов;
  • подсветка, автодополнение переменных и синтаксиса;
  • множественная правка благодаря использованию указателей;
  • поддержка систем сборки;
  • проверка синтаксиса прямо во время ввода;
  • автосохранение.

Недостатки:

  • полная версия стоит 70 $;
  • отсутствие анализатора кода для расстановки ссылок.
Atom Editor

Появившийся в 2015 году редактор кода от Git, копирующий дизайн Sublime Text и обёрнутый в Chromium.

Преимущества:

  • более 50 открытых модулей;
  • удобный и приятный интерфейс;
  • бесплатный;
  • автодополнение и подсветка кода;
  • менеджер пакетов, которых уже более 3,5 тысяч;
  • гибкие настройки редактора, подключаемых пакетов, тем интерфейса;
  • редактирование и навигация при помощи горячих клавиш.

Недостатки:

  • невысокая производительность;
  • пустая комплектация «из коробки».
Brackets

В 2014 году Brackets отпугнул программистов багами и недоработками, но теперь постепенно возвращает доверие новым качественным функционалом.

Преимущества:

  • богатая комплектация «из коробки»;
  • режим Live Preview - предварительный просмотр правок в браузере в режиме реального времени;
  • менеджер пакетов;
  • показ в коде используемых изображений и цветов;
  • автодополнение и подсветка синтаксиса;
  • анализатор кода;
  • бесплатный.

Недостатки:

  • строгая ориентация на веб и HTML+CSS+JavaScript;
  • медленное развитие;
  • низкое быстродействие из-за функций предпросмотра.

Может ли кто-нибудь предложить мне любую библиотеку в Редакторе документов javascript(client end), где пользователь может просматривать и редактировать документы, такие как doc, docx, odf и т. д.

1 Ответ


1

Лучше всего искать конвертеры, а затем редактировать преобразованное содержимое.

Я искал рабочее решение уже пару недель, и лучшее, что я нашел на сегодняшний день, - это docx2html .

В зависимости от платформы разработки вы также можете использовать Google "ONLYOFFICE Document Server Community Edition". У них есть в редакторах страниц для Word, Excel и Powerpoint - но они asp. Это платформа с открытым исходным кодом и доступна на Github. Может быть, стоит посмотреть, хотя.


Можно ли преобразовать doc / docx в html с помощью jquery/javascript?

Мне нужно преобразовать doc / docx в html. У меня есть файлы, хранящиеся в Amazon s3. Мне нужно просмотреть & редактировать его в браузере. Прямо сейчас, я использую Apache POI для...


Создание документов docx из шаблона docx javascript

Я ищу библиотеку в javascript , которая может генерировать документы docx из шаблона docx и может заменять теги их значениями и заменять изображения другими изображениями я нашел имя библиотеки...


как судить, является ли файл doc или docx в POI

Название может быть немного запутанным. Самый простой метод должен быть основан на имени расширения так же, как: // is represents the InputStream if (filePath.endsWith(doc)) { WordExtractor ex = new...


doc или docx: есть ли safeway для идентификации типа из "requests" в python3?

1) Как я могу отличить файлы doc и docx от запросов? а) например, если у меня есть url="https://www.iadb.org/Document.cfm?id=36943997" r = requests.get(url,timeout=15)...


Импорт doc и docx файлов в.Net и C#

Я пишу текстовый редактор и хочу добавить возможность импортировать файлы.doc и.docx. Я знаю, что могу использовать OLE Automation, но если я использую недавнюю библиотеку OLE, она не будет...


Редактирование документов (DOC, DOCX, RTF, TXT) в Webforms

Я разрабатываю веб-приложение, используя asp.net 3.5. Это приложение имеет много документов, таких как.doc, .docx, .rtf, .pdf, .txt, и т.д... и иногда usar нужно редактировать эти документы. В...


Конвертировать DOC/DOCX в семантической HTML

Я хотел бы конвертировать документы doc/docx в semantic HTML. Некоторые wishes/requirements: Семантический HTML такой, что заголовки в документе являются , и т. д., таблицы -...


Пакеты Golang для преобразования doc в docx и docx в pdf?

Я пишу веб-приложение в Golang, в котором пользователь может загрузить файл doc или docx. Часть содержимого файла будет изменена в соответствии с заранее определенным форматом. Позже пользователь...


Загрузите документ Rich Word в RichText редактор telerik редактора

У меня есть какая-то форма, в которую я загружаю какой-то документ word и сохраняю его на DB. Позже я должен сделать некоторую маркировку этих документов. В настоящее время я не нашел ничего для...


Преобразование файла doc в формат docx

Я конвертировал файл docx в html, так как он имеет формат Zip. но мне тоже нужно конвертировать файлы doc. Есть ли способ, чтобы изменить файл DOC в docx с помощью кода(предпочитаю java).Пожалуйста,...

Написать код JavaScript можно и в обычном «Блокноте» - достаточно сохранить результат с расширением.js, и он не только подключится к сайту, но даже заработает. Однако использование такого ограниченного редактора сильно замедлит разработку. Поэтому лучше взять что-то специализированное. Есть несколько основных критериев, по которым нужно выбирать редактор для работы с кодом на JavaScript.

Во-первых, нужна подсветка синтаксиса: названия, операторы и специальные символы должны отображаться по-разному, чтобы можно было быстро прочитать код.

Подсветка синтаксиса в Notepad++

Во-вторых, нужно автодополнение: когда вы вводите название функции или переменной, редактор должен предложить несколько вариантов команд, которые вы, вероятно хотите ввести. Желательно, чтобы он также показывал подсказки к выбранному компоненту - например, необходимые аргументы, тип переменной, краткое описание и так далее.

Автодополнение в Notepad++

В-третьих, нужна возможность скрывать отдельные блоки. При работе над большими проектами это полезно, потому что не придётся скролить огромные фрагменты кода, чтобы найти нужный.

Скрытие блоков в Visual Studio Code

Желательно, чтобы подсвечивались ошибки - тогда вы сможете их сразу заметить и исправить:

Отображение ошибок в Visual Studio Code

Хорошими бонусами будут возможность работать с несколькими файлами в одном окне, менеджер проектов, выбор тем, установка плагинов и так далее.

Существует большое количество редакторов, которые соответствуют этим требованиям и подойдут для работы с JavaScript. На чём писать код - личное дело каждого, но у многих возникают проблемы с выбором подходящей программы, поэтому мы составили список из 6 хороших инструментов.

Notepad++

Notepad++ - простой и удобный редактор с открытым исходным кодом. В нём есть подсветка синтаксиса нескольких языков, в том числе и JS, автоматическое форматирование и автодополнение. Присутствует навигация в виде вкладок, файлового менеджера и карты кода.

Доступны работа с разными кодировками, подключение компиляторов, использование плагинов и другие полезные функции. Например, добавив QuickText, вы улучшите встроенное автодополнение.

Notepad++ регулярно обновляется, поэтому в нём быстро исправляют баги и добавляют новые возможности. К сожалению, работает он только на Windows.

Vim

Редактор Vim уже давно стал классикой. Многие говорят, что в нём тяжело разобраться, но если уделить этому достаточно времени, пользоваться чем-то другим уже не захочется.

Помимо того, что он соответствует всем выбранным нами критериям, Vim ещё и полностью настраиваемый, поэтому вы можете:

  • устанавливать плагины;
  • менять темы;
  • назначать горячие клавиши и так далее.

Vim полностью бесплатный и работает на всех платформах, начиная с Windows, MacOS и Linux и заканчивая MS DOS и OS/2.

Microsoft Visual Studio

Microsoft Visual Studio - это IDE, в которой есть всё необходимое для работы с JS. Помимо обычной подсветки синтаксиса и автодополнения, можно также пользоваться дебагером и создавать Unit-тесты.

Однако весит программа достаточно много и систему загружает сильно, поэтому не очень подойдёт для работы на слабых компьютерах.

Месячная подписка может стоить от 45 до 250 долларов в месяц, но есть и бесплатная версия для начинающих разработчиков и тех, кто создаёт программы с открытым исходным кодом. IDE доступна для Windows и MacOS, а на Linux её можно установить с помощью Wine.

Visual Studio Code

Visual Studio Code - это облегчённая (~170 МБ против 30 ГБ), кроссплатформенная и бесплатная версия Visual Studio. В этом редакторе предустановлена поддержка JavaScript, TypeScript и Node.JS.

Расширения с другими языками можно скачать прямо из Visual Studio Code.

Встроенные дебагер и Git-команды для работы с системой управления версий GitHub позволяют ускорить тестирование и публикацию приложений.

Sublime Text

Sublime Text - это простой кроссплатформенный редактор. Его интерфейс настраивается, а выполнять некоторые действия можно с помощью горячих клавиш.

Также в нём есть поддержка сниппетов, автодополнение, подсветка синтаксиса и навигация. Крутой бонус - автосохранение. Впрочем, он больше нужен новичкам - ведь профессиональные программисты за годы работы вырабатывают привычку сохраняться после ввода каждой команды.

Главный минус Sublime Text в том, что полная версия стоит 80 долларов (лицензия выдаётся на одного пользователя, который может использовать редактор на любом компьютере). В остальном он хорошо подходит
JS-разработчикам.

Я успешно сделал код для отображения PDF-файла в браузере вместо диалогового окна" открыть/сохранить". Теперь я застрял, пытаясь отобразить документ Word в браузере. Я хочу отобразить документ Word в Firefox, IE7+, Chrome и т. д.

может ли кто-нибудь помочь? Я всегда получаю диалоговое окно "открыть/сохранить" при отображении слова doc в браузере. Я хочу реализовать эту функциональность с помощью JavaScript.

6 ответов

однако, если вы предпочитаете иметь встроенную поддержку, в большинстве, если не во всех браузерах, я бы рекомендовал resaving .doc / .docx в качестве PDF-файла они также могут быть независимо визуализированы с помощью в формате PDF.js Mozilla.

ответы Брэндона и fatbotdesigns оба правильны, но реализовав предварительный просмотр документов Google, мы нашли несколько.docx файлы, которые не могут быть обработаны Google. Переключился на MS Office онлайн превью и работает как шарм.

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

кажется, есть некоторые библиотеки js, которые могут обрабатывать.docx (нет.doc) для конвертации html на стороне клиента (в определенном порядке):

    https://github.com/lalalic/docx2html - docx в html, большинство элементов поддерживаются

    https://github.com/mwilliamson/mammoth.js - поддерживает заголовки, списки, таблицы, сноски, сноски, изображения и текст коробки!--1-->

    https://www.npmjs.com/package/docx2html - преобразование HTML-документов в DOCX в браузере

    https://github.com/artburkart/docx2html - видимо, работает в браузере

Примечание: Если вы ищете лучший способ конвертировать файл doc/docx на стороне клиента, то, вероятно, ответ не надо . Если тебе действительно нужно это сделать, сделай это. на стороне сервера, то есть с libreoffice в безголовом режиме, apache-poi или любой другой библиотекой, лучше всего подходит для вас.

ViewerJS полезно для просмотра / встраивания формата openoffice, такого как odt,odp,ods, а также pdf.

для встраивания openoffice / pdf документа

/ViewerJS/ - это путь ViewerJS

#../demo/ohm2013 - путь ваш файл хотите добавьте

Это удалит любые зависимости времени выполнения от служб Google и Microsoft (например если они были, или вы были ограничены их).

Он также имеет преимущество, которое вы можете расширить до иные типы файлов Если вы хотели (PPTX, XLS, DOC и т. д.)

Наверняка, Вы много раз сталкивались с визуальными редакторами , позволяющими достаточно удобно формировать внешний вид страниц, либо каких-то сообщений, например, на форуме. Причём не с BB-кодами , а сразу получая конкретный результат. Этих редакторов достаточно много в Интернете. Один из самых популярных - это TinyMCE , однако, я сторонник собственных скриптов и считаю, что для каждой задачи должно быть своё решение , а не универсальное. Поэтому в этой статье я расскажу, как создать визуальный редактор на JavaScript .

Сразу привожу достаточно хорошо прокомментированный код:





// Вывод кнопок редактирования
document.write("");
document.write("");
document.write("
");
document.write(""); // Добавляем iframe
/* В зависимости от браузера получаем доступ к созданному фрейму */
var isGecko = navigator.userAgent.toLowerCase().indexOf("gecko") != -1;
var iframe = (isGecko) ? document.getElementById("frameId") : frames["frameId"];
var iWin = (isGecko) ? iframe.contentWindow: iframe.window;
var iDoc = (isGecko) ? iframe.contentDocument: iframe.document;
/* Создаём код пустой HTML-страницы */
iHTML = "";
iDoc.open(); // Открываем фрейм
iDoc.write(iHTML); // Добавляем написанный код в фрейм
iDoc.close(); // Закрываем фрейм
iDoc.designMode = "on"; // Включаем режим редактирования фрейма
/* Функции для задания внешнего вида выделенного текста
Полный набор возможных команд: http://javascript.itsoft.ru/execcom/execCommands.html */
function setBold() {
iWin.focus();
iWin.document.execCommand("bold", null, "");
}
function setItal() {
iWin.focus();
iWin.document.execCommand("italic", null, "");
}
function save() {
/* Сохранение HTML-кода в поле hidden, чтобы потом можно было передать полученный HTML-код в скрипт-обработчик */
document.getElementById("content").value = iDoc.body.innerHTML;
return true;
}



На первый взгляд, кажется, что код очень сложный. И так оно и есть, но если рассмотреть его по базовым элементам, то ничего сложного нет. Есть обычная форма и поле hidden , куда сохраняется получившийся в редакторе HTML-код . Сам редактор - это обычный фрейм, то есть обычная HTML-страница , в которой мы можем писать текст (designMode = "on" ). А различные форматирования создаются с помощью метода execCommand() , который выполняет указанную в параметре команду. А уж создать новые кнопки и прикрепить к ним аналогичные обработчики, думаю, что не составит для Вас труда.

В этом скрипте нет ничего лишнего, только самое главное и основное, и его можно брать за основу для создания собственного визуального редактора на JavaScript , в котором не будет ничего лишнего, а только то, что нужно Вам.