rich text editor 다운로드 - rich text editor 소스 코드 다운로드

rich text editor

기타 리소스

v.8.1.7

다운로드

다가오는 변화 경고

18.10. 우리는 오래된 코드베이스의 재 작성 인 Rich Text 편집기의 새로운 주요 버전 (V8)을 출시 할 것입니다. 이 경고는 버전싱을 사용하는 NPM 패키지 사용자에게는 중요하지 않지만 UNBKG 번들 (http://unpkg.com/rich-text-editor/dist/rich-text-editor-bundle.js)의 사용자는 코드의 최신 번들이 더 이상 예상대로 작동하지 않음을 알 수 있습니다. 시스템의 깨진 변경을 피하려면 UNPKG 패키지의 버전을 다음과 같이 V7의 마지막 안정 버전으로 명시 적으로 설정할 수 있습니다 : http://unpkg.com/[email protected]/dist/rich-text-editor-bundle.js.

이렇게하면 새 버전이 출시되면 시스템을 개발할 시간이 있습니다.

abitti.net

Abitti 상표 정책 사용

핀란드의 수학 시험 보드를위한 수학 지원을 가진 풍부한 텍스트 편집기. 라이브 데모는 https://math-demo.abitti.fi/에서 찾을 수 있습니다.

v4.0.0 이후 ES 모듈이있는 ES2017 코드 만 제공됩니다 ( dist Directory). 이 라이브러리를 사용하려면 웹 팩 또는 롤업과 같은 번더가 필요할 수 있습니다.

용법

NPM 사용

npm install rich-text-editor 하여 패키지를 설치하십시오. 풍부한 텍스트 편집기는 다음 중 하나를 사용할 수 있습니다

import RichTextEditor from 'rich-text-editor' REACT 구성 요소
또는 import { makeRichText } from 'rich-text-editor/dist/rich-text-editor' 사용하지 않는 앱의 함수로

구성 요소 또는 초기화 함수로 전달되는 대부분의 속성은 아래에 설명되어 있습니다. 더 많은 정보는 유형 및/또는 소스 코드에서 찾을 수 있습니다.

CDN 번들로 사용합니다

소스가 https://unpkg.com/rich-text-editor/dist/rich-text-editor-bundle.js <script type="module" src="https://unpkg.com/rich-text-editor/dist/rich-text-editor-bundle.js"></script> html 페이지에 스크립트 태그를 추가하십시오.

Window에 makeRichText 추가되며 편집기를 초기화하는 데 사용할 수 있습니다.

함수는 다음 매개 변수를 객체로 사용합니다.

열쇠	기본
컨테이너	document.getElementById ( 'Rich-Text-editor-Root')
언어	'fi'
baseurl	'' ''
enviletypes	[ 'image/png', 'image/jpeg']
onvaluechange	() => {}
TextAreaProps	{}

예:

 {
  container: document.getElementById('rich-text-editor-root')!,
  language: 'FI',
  baseUrl: '',
  allowedFileTypes: ['image/png', 'image/jpeg'],
  onValueChange: () => {},
  textAreaProps: {},
}

TextAreaProps는 가시 편집기 요소 인 기본 DIV 요소로 전달됩니다. 다음은 CDN 사용자의 구성과 관련된 요소가 있습니다.

열쇠	유형	목적
ariainvalid	부울	aria-invalid를 추가하십시오
Arialabelledby	끈	aria-labelledby를 추가하십시오
편집자	React.cssproperties	CSS 속성을 편집기 요소로 직접
클래스 이름	끈	편집기 요소에 대한 추가 클래스 이름
ID	끈	편집기 요소에 대한 ID 필드
랭	끈	접근성을 위해 편집기 요소에 대한 Lang-Field

목표 (제출하기 전에 이것을 읽으십시오)

리치 텍스트 편집기는 핀란드 학사 시험 후보자가 스크린 샷을 첨부하고 제출물의 일부로 방정식을 작성하도록 개발되었습니다. 우리의 목표는 Textarea에 대한 일반 목적 드롭 인 교체가 아니라 Abitti와 그 내장 브라우저에서 작동하는 편집자를 만드는 것입니다.

모든 버그 보고서, 기능 요청 및 풀 요청을 축하하는 동안 다음을 기억하도록 친절하게 요청합니다.

공식 입력 및 렌더링 라텍스와 관련된 대부분의 문제는 Mathjax 및 Mathquill 라이브러리에 의해 발생합니다. 우리는 제출 된 문제를 기반으로 풀 요청을 작성할 자원이 없습니다. 비슷한 이유로 우리는 우리에게보고 된 상류 문제를 통과하지 않을 것입니다.
우리는 사명 -Abitti를 벗어난 문제 나 요청에주의를 기울이지 않습니다.

우리는 당신이 법에 의해 지정된 목표에 집중하려는 우리의 욕구를 이해하기를 바랍니다.

의존성

Mathquill (https://github.com/digabi/mathquill)
Mathjax-Node
jQuery
Sanitize-HTML

시작하기

node.js를 설치하십시오
npm install 실행하십시오.
npm run dev 실행하십시오.
브라우저 테스트 : http : // localhost : 5111/tests.html
수동 테스트 : http : // localhost : 5111/tests.html? grep = 매뉴얼

로컬로 번들을 테스트합니다

npm run build 실행하십시오
npm run dev-server 하십시오
프로젝트 루트에서 간단한 HTTP 서버를 실행하십시오 (예 : python3 -m http.server 8080
번들 <script type="module" src="/dist/rich-text-editor-bundle.js"></script> 가리 키려면 dev/index.html 스크립트 태그를 편집하십시오.
http : // localhost : 8080/dev/index.html로 이동하십시오