집 › 펌웨어 › 자바스크립트에서 사용할 수 있는 문서 편집기(doc, docx)가 있나요?

자바스크립트에서 사용할 수 있는 문서 편집기(doc, docx)가 있나요?

누구든지 사용자가 doc, docx, odf 등과 같은 문서를 보고 편집할 수 있는 javascript(클라이언트 끝) 문서 편집기의 라이브러리를 제안할 수 있습니까?

답글 1개

가장 좋은 방법은 변환기를 검색한 다음 변환된 콘텐츠를 편집하는 것입니다.

나는 몇 주 동안 작동하는 솔루션을 찾고 있었고 지금까지 찾은 최고는 docx2html입니다.

개발 플랫폼에 따라 Google의 "ONLYOFFICE Document Server Community Edition"을 사용할 수도 있습니다. Word, Excel 및 Powerpoint용 페이지 편집기가 있지만 ASP입니다. 이것은 개방형 플랫폼입니다 소스 코드 Github에서 사용 가능합니다. 그래도 한 번 볼만한 가치가 있을 것 같습니다.

jquery/javascript를 사용하여 doc/docx를 html로 변환할 수 있나요?

doc/docx를 html로 변환해야 합니다. Amazon s3에 파일이 저장되어 있습니다. 브라우저에서 보고 편집해야 합니다. 지금은 Apache POI를 사용하고 있습니다.

docx javascript 템플릿에서 docx 문서 생성

docx 템플릿에서 docx 문서를 생성할 수 있고 태그를 해당 값으로 교체하고 이미지를 다른 이미지로 교체할 수 있는 자바스크립트 라이브러리를 찾고 있는데 라이브러리 이름을 찾았습니다...

POI에서 파일이 doc인지 docx인지 판단하는 방법

제목이 조금 혼란스러울 수도 있습니다. 가장 간단한 방법은 다음과 같이 확장 이름을 기반으로 해야 합니다. // is는 InputStream을 나타냅니다. if (filePath.endsWith(doc)) ( WordExtractor ex = new...

doc 또는 docx: python3의 "요청"에서 유형을 식별하는 안전한 방법이 있습니까?

1) 요청에서 doc 파일과 docx 파일을 어떻게 구별할 수 있나요? a) 예를 들어, url="https://www.iadb.org/Document.cfm?id=36943997" r =requests.get(url,timeout=15)...이 있는 경우

doc 및 docx 파일을 .Net 및 C#으로 가져오기

나는 쓴다 텍스트 에디터.doc 및 .docx 파일을 가져오는 기능을 추가하고 싶습니다. OLE 자동화를 사용할 수 있다는 것을 알고 있지만 최신 OLE 라이브러리를 사용하면...

웹 양식에서 문서(DOC, DOCX, RTF, TXT) 편집

asp.net 3.5를 사용하여 웹 응용 프로그램을 개발 중입니다. 이 애플리케이션에는 .doc, .docx, .rtf, .pdf, .txt 등과 같은 많은 문서가 있으며 때로는 사용자가 이러한 문서를 편집해야 합니다. 안에...

DOC/DOCX를 의미론적 HTML로 변환

doc/docx 문서를 의미 있는 HTML로 변환하고 싶습니다. 몇 가지 희망 사항/요구 사항: 문서의 제목이 테이블 등이 되는 의미론적 HTML -...

doc를 docx로, docx를 pdf로 변환하는 Golang 패키지가 있습니까?

나는 사용자가 doc 또는 docx 파일을 업로드할 수 있는 웹 애플리케이션을 Golang으로 작성하고 있습니다. 미리 정의된 형식에 따라 파일 내용 중 일부가 변경됩니다. 나중에 사용자가 ...

RichText 편집기 telerik 편집기에 Rich Word 문서 로드

일부 단어 문서를 업로드하고 DB에 저장하는 양식이 있습니다. 나중에 이 문서에 표시를 좀 해야 해요. 현재는 아무것도 찾지 못했습니다...

doc 파일을 docx 형식으로 변환

docx 파일은 Zip 형식이므로 html로 변환했습니다. 하지만 문서 파일도 변환해야 합니다. 코드를 사용하여 DOC 파일을 docx로 변경하는 방법이 있습니까(java 선호). 제발...

코드 편집기는 모든 프로그래머에게 편리한 도구입니다. 그리고 모두가 스스로 선택합니다. 일부는 기능성을 중시하고 일부는 이동성을 중시하며 다른 일부는 디자인과 편의성을 중요하게 생각합니다. 어떤 사람들은 메모장으로 코드를 작성하는 것을 좋아하지만 그것은 망치로 집을 짓는 것과 같습니다.

JavaScript는 강력하고 변덕스러운 언어입니다. 한편으로는 "동적"과 관련된 가장 단순한 구문과 위험이 아닌 많은 프레임워크와 라이브러리가 있습니다. 따라서 작업할 편집자를 선택하는 것이 중요합니다. 올바른 선택은 깨끗한 코드, 높은 개발 속도, 최소한의 오류 및 작업 즐거움을 제공합니다. 수백 명의 기존 편집자 중 한 명을 선택하는 데는 많은 시간이 걸릴 수 있으므로 우리는 귀하를 위해 몇 가지 작업을 수행했습니다. 최고의 5가지를 소개합니다.

웹스톰

JetBrains의 WebStorm은 두 가지 형태 모두에서 훌륭합니다. IDE로는 버전 제어 시스템 작업을 지원하고 코드를 원격으로 배포할 수 있으며 편집기로는 구문 강조, 자동 완성, 탐색과 같은 표준 편의 기능을 제공합니다.

장점:

LiveEdit - 저장하지 않고도 코드 변경 사항을 볼 수 있습니다.
React, Angular, Meteor와 같은 프레임워크와의 상호 작용
오류를 감지하기 위한 100개 이상의 내장 테스트;
단위 테스트를 위해 Mocha, Protractor, Jest, Karma와의 통합;
서버 및 클라이언트 측의 코드 디버깅을 위한 본격적인 디버거;
여러 파일을 동시에 작업하기 위한 탐색;
코드 완성, 구문 강조.

결점:

운영 첫해 비용은 129달러입니다.
초보자 코더의 경우 기능이 중복됩니다.

비주얼 스튜디오 코드

코드 작업을 목표로 하는 Visual Studio IDE의 포크입니다. 배우기 쉽고 사용하기 쉬우며 동시에 기능적입니다.

장점:

구문과 사용된 변수, 모듈, 함수 등의 상황에 따른 완성;
중단점, 호출 스택, 대화형 콘솔이 있는 디버거;
스니펫 및 템플릿 지원;
힘내 통합;
편리하고 간단한 인터페이스;
무료 편집기.

결점:

몇 가지 플러그인.

숭고한 텍스트

사용자 정의 가능한 인터페이스와 단축키를 사용하여 사소한 작업을 수행할 수 있는 기능을 갖춘 편리하고 오랜 테스트를 거친 크로스 플랫폼 편집기입니다.

장점:

단축키;
미니맵 형태의 코드 탐색;
시각적 테마를 변경하는 능력;
스니펫 지원;
강조 표시, 변수 및 구문 자동 완성;
포인터 사용으로 인한 다중 편집;
시스템 지원 구축;
입력할 때 구문 검사;
자동 저장.

결점:

풀 버전비용은 $70입니다.
링크 배치를 위한 코드 분석기가 부족합니다.

아톰 에디터

2015년에 등장한 Git의 코드 편집기로 Sublime Text의 디자인을 복사하고 Chromium으로 포장했습니다.

장점:

50개 이상의 개방형 모듈;
편리하고 쾌적한 인터페이스;
무료;
코드 완성 및 강조 표시;
이미 35,000개 이상의 패키지 관리자가 있습니다.
편집기, 플러그인 패키지 및 인터페이스 테마에 대한 유연한 설정;
단축키를 사용한 편집 및 탐색.

결점:

낮은 생산성;
"즉시 사용 가능한" 빈 세트.

괄호

2014년 브라켓스는 버그와 단점으로 프로그래머들을 겁주었지만 이제는 새로운 고품질 기능으로 점차 신뢰를 회복하고 있습니다.

장점:

풍부한 장비 "즉시 사용 가능";
실시간 미리보기 모드 - 브라우저에서 실시간으로 편집 내용을 미리 볼 수 있습니다.
패키지 관리자;
코드에 사용된 이미지와 색상을 표시합니다.
자동 완성 및 구문 강조;
코드 분석기;
무료.

결점:

웹과 HTML+CSS+JavaScript에만 집중합니다.
느린 개발;
미리보기 기능으로 인해 성능이 저하됩니다.

"열기/저장" 대화 상자 대신 브라우저에 PDF 파일을 표시하는 코드를 성공적으로 만들었습니다. 이제 표시하려고 하다가 막혔어요 워드 문서브라우저에서. Firefox, IE7+, Chrome 등에서 Word 문서를 표시하고 싶습니다.

누구든지 도와줄 수 있나요? 브라우저에 doc라는 단어를 표시할 때 항상 "열기/저장" 대화 상자가 표시됩니다. JavaScript를 사용하여 이 기능을 구현하고 싶습니다.

답변 6개

그러나 모든 브라우저는 아니더라도 대부분의 기본 지원을 선호한다면 .doc/.docx를 PDF로 다시 저장하는 것이 좋습니다. Mozilla의 PDF.js를 사용하여 독립적으로 렌더링할 수도 있습니다.

Brandon과 fatbotdesigns의 답변은 모두 정확하지만 Google Docs Preview를 구현하여 Google에서 처리할 수 없는 여러 .docx 파일을 발견했습니다. MS Office 온라인 미리보기로 전환했는데 정말 매력적으로 작동합니다.

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

클라이언트 측에서 특정 순서로 HTML을 변환하기 위해 .docx(.doc 없음)를 처리할 수 있는 일부 js 라이브러리가 있는 것 같습니다.

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는 pdf뿐만 아니라 odt, odp, ods와 같은 오픈 오피스 형식을 보거나 포함하는 데 유용합니다.

오픈오피스/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") : 프레임["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 = "켜기"; // 프레임 편집 모드 활성화
/* 설정할 함수 모습선택한 텍스트
가능한 명령 전체 세트: http://javascript.itsoft.ru/execcom/execCommands.html */
함수 setBold() (
iWin.focus();
iWin.document.execCommand("bold", null, "");
}
함수 setItal()(
iWin.focus();
iWin.document.execCommand("italic", null, "");
}
함수 저장() (
/* 나중에 결과 HTML 코드를 스크립트 핸들러에 전달할 수 있도록 숨겨진 필드에 HTML 코드 저장 */
document.getElementById("content").value = iDoc.body.innerHTML;
사실을 반환;
}

언뜻 보면 코드가 매우 복잡해 보입니다. 그렇긴 하지만, 기본 요소를 중심으로 살펴보면 복잡한 것은 없습니다. 일반 양식과 편집기에서 생성된 HTML 코드가 저장되는 숨겨진 필드가 있습니다. 편집기 자체는 일반 프레임, 즉 텍스트를 작성할 수 있는 일반 HTML 페이지입니다(designMode = "on"). 그리고 매개변수에 지정된 명령을 실행하는 execCommand() 메소드를 이용하여 다양한 포맷팅을 생성합니다. 그리고 새 버튼을 만들고 비슷한 핸들러를 연결하는 것도 어렵지 않을 것이라고 생각합니다.

이 스크립트에는 불필요한 것이 없으며 가장 중요하고 기본적인 것만 있으며 이를 기반으로 자신만의 스크립트를 만들 수 있습니다. 비주얼 편집기 JavaScript에서는 불필요한 것은 없고 필요한 것만 있습니다.

일반 메모장에서 JavaScript 코드를 작성할 수 있습니다. 결과를 .js 확장자로 저장하기만 하면 사이트에 연결될 뿐만 아니라 작동할 수도 있습니다. 그러나 이렇게 제한된 편집기를 사용하면 개발 속도가 크게 느려집니다. 따라서 전문적인 것을 취하는 것이 좋습니다. JavaScript 코드 작업을 위해 편집기를 선택해야 하는 몇 가지 주요 기준이 있습니다.

먼저 이름, 연산자 및 구문 강조가 필요합니다. 특수 기호코드를 빨리 읽을 수 있도록 다르게 표시되어야 합니다.

Notepad++의 구문 강조

둘째, 자동 완성이 필요합니다. 함수나 변수의 이름을 입력할 때 편집기는 입력할 가능성이 있는 명령에 대한 여러 옵션을 제공해야 합니다. 선택한 구성 요소에 대한 힌트도 표시하는 것이 좋습니다(예: 필수 인수, 변수 유형, 간단한 설명등등.

메모장++의 자동 완성

셋째, 개별 블록을 숨기는 기능이 필요합니다. 대규모 프로젝트에서 작업할 때 필요한 것을 찾기 위해 거대한 코드 조각을 스크롤할 필요가 없기 때문에 유용합니다.

Visual Studio Code에서 블록 숨기기

오류가 강조 표시되는 것이 바람직합니다. 그러면 즉시 오류를 확인하고 수정할 수 있습니다.

Visual Studio Code에서 오류 표시

좋은 보너스는 하나의 창에서 여러 파일을 작업할 수 있는 기능, 프로젝트 관리자, 테마 선택, 플러그인 설치 등입니다.

이러한 요구 사항을 충족하고 JavaScript 작업에 적합한 편집기가 많이 있습니다. 무엇에 코드를 작성할지는 누구에게나 개인적인 문제이지만, 많은 사람들이 올바른 프로그램을 선택하는 데 어려움을 겪고 있으므로 6가지 좋은 도구 목록을 정리했습니다.

메모장++

Notepad++는 간단하고 편리한 오픈 소스 편집기입니다. JS, 자동 서식 지정 및 자동 완성을 포함하여 여러 언어에 대한 구문 강조 기능이 있습니다. 탭 형태의 네비게이션이 있고, 파일 관리자그리고 코드카드.

다양한 인코딩으로 작업하고, 컴파일러를 연결하고, 플러그인 및 기타 유용한 기능을 사용할 수 있습니다. 예를 들어 QuickText를 추가하면 내장된 자동 완성 기능이 향상됩니다.

Notepad++는 정기적으로 업데이트되므로 버그가 빠르게 수정되고 새로운 기능이 추가됩니다. 불행히도 Windows에서만 작동합니다.

정력

Vim 편집기는 오랫동안 고전이었습니다. 많은 사람들이 이해하기 어렵다고 말하지만, 충분한 시간을 투자하면 더 이상 다른 것을 사용하고 싶지 않을 것입니다.

우리가 선택한 모든 기준을 충족하는 것 외에도 Vim은 완전히 사용자 정의가 가능하므로 다음을 수행할 수 있습니다.

플러그인 설치;
주제를 바꾸다;
단축키 등을 할당합니다.

Vim은 완전 무료이며 Windows, MacOS, Linux부터 MS DOS, OS/2까지 모든 플랫폼에서 작동합니다.

마이크로소프트 비주얼 스튜디오

Microsoft Visual Studio는 JS 작업에 필요한 모든 것을 갖춘 IDE입니다. 일반적인 구문 강조 및 자동 완성 외에도 디버거를 사용하고 단위 테스트를 만들 수도 있습니다.

그러나 프로그램의 무게가 꽤 나가고 시스템에 부하가 많이 걸리기 때문에 약한 컴퓨터에서 작업하는 데는 그다지 적합하지 않습니다.

월간 구독 비용은 월 $45에서 $250 사이일 수 있지만 다음과 같은 방법도 있습니다. 무료 버전초보 개발자와 오픈 소스 프로그램을 만드는 사람들을 위한 것입니다. IDE는 Windows 및 MacOS에서 사용할 수 있으며 Wine을 사용하여 Linux에 설치할 수 있습니다.