홈페이지>웹사이트 구축 리소스>기타 리소스
다운로드

여기에는 편집 가능한 부동산을 사용하지 않는 Editable이라는 새로운 풍부한 텍스트 편집기가 있습니다. 내용 가능 대신 사용자 정의 렌더러를 사용합니다. 이 접근법을 통해 편집자의 동작을 더 잘 제어 할 수 있습니다.

AM 편집자

공동 작업 편집을 지원하는 풍부한 텍스트 편집기는 React, VUE 및 기타 프론트 엔드 공통 라이브러리를 자유롭게 사용하여 플러그인을 확장하고 정의 할 수 있습니다.

미리보기 · 문서 · 플러그인

Vue2

Vue3

React

Vue2 Demo

Vue2 Nuxt Demo

특징

  • ? 대부분의 요구를 충족시키기 위해 수십 개의 풍부한 플러그인이 장착 된 상자 밖의 솔루션
  • Mark, Inline 및 Block 유형을위한 기본 플러그인 외에도 확장 가능성이 높기 때문에 React 및 Vue와 같은 프론트 엔드 라이브러리와 결합하여 플러그인 UI 렌더링을 제공합니다.
  • ? 리치 멀티미디어 지원, 이미지 및 오디오/비디오를 지원할뿐만 아니라 멀티미디어 컨텐츠 임베딩도 지원합니다.
  • Markdown Syntax를 지원합니다
  • ? 국제화를 지원합니다
  • 프론트 엔드 라이브러리에 의존하지 않고 순전히 자바 스크립트로 작성된 엔진은 React 및 VUE와 같은 프론트 엔드 라이브러리를 사용하여 렌더링 할 수 있습니다. 복잡한 아키텍처를 쉽게 처리 할 수 있습니다
  • 내장 협업 편집 솔루션, 사용하기위한 경량 구성
  • 대부분의 최신 모바일 브라우저와 호환됩니다

플러그인

패키지 버전 크기 설명
@aomao/toolbar 도구 모음, React 에 적합합니다
@aomao/toolbar-vue Vue3 에 적합한 도구 모음
am-editor-toolbar-vue2 Vue2 에 적합한 도구 모음
@aomao/plugin-alignment 조정
@aomao/plugin-embed URL을 포함시킵니다
@aomao/plugin-backcolor 배경색
@aomao/plugin-bold 용감한
@aomao/plugin-code 인라인 코드
@aomao/plugin-codeblock CodeBlock, React 에 적합합니다
@aomao/plugin-codeblock-vue Vue3 에 적합한 코드 블록
am-editor-codeblock-vue2 Vue2 에 적합한 코드 블록
@aomao/plugin-fontcolor 글꼴 색상
@aomao/plugin-fontfamily 글꼴 가족
@aomao/plugin-fontsize 글꼴 크기
@aomao/plugin-heading 표제
@aomao/plugin-hr 수평 규칙
@aomao/plugin-indent 톱니 모양
@aomao/plugin-italic 이탤릭체
@aomao/plugin-link React 에 적합한 링크
@aomao/plugin-link-vue 링크, Vue3 에 적합합니다
am-editor-link-vue2 링크, Vue2 에 적합합니다
@aomao/plugin-line-height 라인 높이
@aomao/plugin-mark 표시
@aomao/plugin-mention 언급하다
@aomao/plugin-orderedlist 주문 목록
@aomao/plugin-paintformat 형식 화가
@aomao/plugin-quote 블록 쿼트
@aomao/plugin-redo 다시 하다
@aomao/plugin-removeformat 형식을 제거하십시오
@aomao/plugin-selectall 모두를 선택하십시오
@aomao/plugin-status 상태
@aomao/plugin-strikethrough strikethrough
@aomao/plugin-sub 보결
@aomao/plugin-sup 한모금
@aomao/plugin-tasklist 작업 목록
@aomao/plugin-underline 밑줄
@aomao/plugin-undo 끄르다
@aomao/plugin-unorderedlist 순서가없는 목록
@aomao/plugin-image 영상
@aomao/plugin-table 테이블
@aomao/plugin-file 파일
@aomao/plugin-mark-range 마크 범위
@aomao/plugin-math 수학적 공식
@aomao/plugin-video 동영상

시작하기

설치

편집기는 engine , toolbar 및 plugins 으로 구성됩니다. engine 핵심 편집 기능을 제공합니다.

npm 또는 yarn 사용하여 엔진 패키지를 설치하십시오. 

$ npm install @aomao/engine
# or
$ yarn add @aomao/engine

용법

우리는 "Hello World!"를 출력하는 것으로 시작합니다. 평소와 같이 메시지. 

 import React , { useEffect , useRef , useState } from 'react' ;
import Engine , { EngineInterface } from '@aomao/engine' ;

const EngineDemo = ( ) => {
	//Editor container
	const ref = useRef < HTMLDivElement | null > ( null ) ;
	//Engine instance
	const [ engine , setEngine ] = useState < EngineInterface > ( ) ;
	//Editor content
	const [ content , setContent ] = useState < string > ( '<p>Hello world!</p>' ) ;

	useEffect ( ( ) => {
		if ( ! ref . current ) return ;
		//Instantiate the engine
		const engine = new Engine ( ref . current ) ;
		//Set the editor value
		engine . setValue ( content ) ;
		//Listen to the editor value change event
		engine . on ( 'change' , ( ) => {
			const value = engine . getValue ( ) ;
			setContent ( value ) ;
			console . log ( `value: ${ value } ` ) ;
		} ) ;
		//Set the engine instance
		setEngine ( engine ) ;
	} , [ ] ) ;

	return < div ref = { ref } /> ;
} ;
export default EngineDemo ;

플러그인

@aomao/plugin-bold 굵은 플러그인을 가져옵니다. 

 import Bold from '@aomao/plugin-bold' ;

Bold 플러그인을 엔진에 추가하십시오. 

 //Instantiate the engine
const engine = new Engine ( ref . current , {
	plugins : [ Bold ] ,
} ) ;

카드

카드는 편집기에 별도로 정의 된 영역이며, 편집기에 장착되기 전에 React , Vue 또는 기타 프론트 엔드 라이브러리를 사용하여 카드 내부의 사용자 정의 컨텐츠를 렌더링하기위한 UI 및 논리가 있습니다.

REACT를 사용하여 렌더링되는 언어 드롭 다운이있는 코드 블록 플러그인 인 @aomao/plugin-codeblock @aomao/plugin-codeblock-vue 소개합니다. 

 import CodeBlock , { CodeBlockComponent } from '@aomao/plugin-codeblock' ;

CodeBlock 플러그인과 CodeBlockComponent 카드 구성 요소를 엔진에 추가하십시오. 

 //Instantiate the engine
const engine = new Engine ( ref . current , {
	plugins : [ CodeBlock ] ,
	cards : [ CodeBlockComponent ] ,
} ) ;

CodeBlock 플러그인은 기본적으로 markdown 지원합니다. 편집기의 줄의 시작 부분에서 코드 블록 구문을 입력하고````javaScript와 같은 공간과 언어 이름이 이어지면 트리거 할 수 있습니다.

노드 제약 조건

노드를보다 편리하게 관리하고 복잡성을 줄이기 위해 편집기는 노드 속성과 기능을 추상화하고 mark , inline , block 및 card 의 네 가지 유형의 노드를 정의합니다. 그것들은 다른 속성, 스타일 또는 HTML 구조로 구성되며 스키마를 사용하여 균일하게 제한됩니다.

간단한 schema 다음과 같습니다. 

 {
  name : 'p' , // node name
  type : 'block' // node type
}

또한 속성, 스타일 등을 설명 할 수 있습니다. 

 {
  name : 'span' , // node name
  type : 'mark' , // node type
  attributes : {
    // The node has a style attribute
    style : {
      // Must contain a color style
      color : {
        required : true , // must contain
        value : '@color' // The value is a color value that conforms to the css specification. @color is the color validation defined in the editor. Here, methods and regular expressions can also be used to determine whether the required rules are met
      }
    } ,
    // Optional include a test attribute, its value can be arbitrary, but it is not required
    test : '*'
  }
}

다음 유형의 노드는 위의 규칙을 준수합니다. 

 < span style =" color:#fff " > </ span >
< span style =" color:#fff " test =" test123 " test1 =" test1 " > </ span >
< span style =" color:#fff;background-color:#000; " > </ span >
< span style =" color:#fff;background-color:#000; " test =" test123 " > </ span >

그러나 그 색상과 테스트는 schema 에서 정의 된 것을 제외하고는 처리 중에 다른 속성 (배경색, Test1)이 편집기에 의해 필터링됩니다.

편집 가능한 영역의 노드에는 스키마 규칙 through the 4 가지 유형의 mark , inline , 블록 , and 카드 노드가 있습니다 rule. They are composed of different attributes, styles or . 둥지에 특정 제약이 부과됩니다.

도구 모음

@aomao/toolbar 도구 모음을 가져옵니다. 복잡한 상호 작용으로 인해 도구 모음은 기본적으로 React + Antd UI 구성 요소를 사용하여 렌더링되는 반면 Vue3 @aomao/toolbar-vue 사용합니다.

UI 상호 작용을 제외하고 도구 모음의 대부분의 작업은 엔진을 호출하여 다른 버튼 이벤트가 트리거 된 후 해당 플러그인 명령을 실행하는 것입니다. 복잡한 요구 사항이 있거나 UI를 다시 강화 해야하는 경우 포크 후에 수정하기가 더 쉽습니다. 

 import Toolbar , { ToolbarPlugin , ToolbarComponent } from '@aomao/toolbar' ;

ToolbarPlugin 플러그인 및 ToolbarComponent 카드 구성 요소를 엔진에 추가하여 바로 가기 / 를 사용하여 편집기에서 카드 도구 모음을 깨울 수 있습니다. 

 //Instantiate the engine
const engine = new Engine ( ref . current , {
	plugins : [ ToolbarPlugin ] ,
	cards : [ ToolbarComponent ] ,
} ) ;

렌더링 도구 모음, 도구 모음은 모든 플러그인으로 구성되었습니다. 여기서는 플러그인 이름 만 전달하면됩니다. 

 return (
    ...
    {
        engine && (
            < Toolbar
                engine = { engine }
                items = { [
                    [ 'collapse' ] ,
                    [
                        'bold' ,
                    ] ,
                ] }
            />
        )
    }
    ...
)

보다 복잡한 도구 모음 구성은 문서 https://editor.aomao.com/config/toolbar를 확인하십시오.

협업 편집

이 오픈 소스 라이브러리는 편집 영역의 HTML 구조 (Contentedable Root Node)의 HTML 구조의 변화를 듣고 MutationObserver 사용하여 데이터 구조를 리버스 엔지니어링하고 WebSocket 통해 YJS와 연결 및 상호 작용하여 다중 사용자 공동 작업 편집을 달성합니다.

대화식 모드

클라이언트로서 각 편집기는 @aomao/plugin-yjs-websocket 플러그인의 WebSocket 함수를 통해 서버와 통신하고 상호 작용합니다.

  • @aomao/yjs 편집기 및 Yjs 데이터의 변환을 구현합니다
  • @aomao/plugin-yjs-websocket 편집기 및 Yjs 의 WebSocket 클라이언트 기능을 제공합니다.
  • @aomao/plugin-yjs-websocket/server node.js로 작성된 Yjs 의 WebSocket 서버를 제공하며 MongoDB 및 LevelDB 사용하여 데이터 저장을 지원합니다.

프로젝트 아이콘

아이콘 폰트

개발

반응

이 오픈 소스 라이브러리를 사용하기 전에 프로젝트 루트 디렉토리에 종속성을 설치해야합니다. 

 yarn install

lerna bootstrap

종속성을 설치 한 후에는 프로젝트를 시작하려면 루트 디렉토리에서 다음 명령 만 실행하면됩니다. 

 yarn start

이 오픈 소스 라이브러리의 개발 디렉토리 구조는 다음과 같습니다.

  • packages 에는 엔진 및 도구 모음 관련 코드가 포함되어 있습니다
  • plugins 에는 모든 플러그인이 포함되어 있습니다
  • api 일부 플러그인에 필요한 API 액세스를 제공하고 https://editor.aomao.com을 기본 API 서비스로 사용합니다.
  • yjs-server 에는 yarn dev 에서 시작할 수있는 공동 서버 코드가 포함되어 있습니다.

vue

AM 편집자 VUE 예제

기부금

감사합니다. Elena211314 、 ZB201307 、 기부금

Alipay

Wechat Pay

PayPal

https://paypal.me/aomaocom

확장하다
추가 정보
관련 애플리케이션
추천
관련 정보 전체