AIEditor: 여러 프런트엔드 프레임워크를 지원하는 AI 기반 서식 있는 텍스트 편집기 만들기

일반 소개

AIEditor는 웹 컴포넌트 개발을 기반으로 하는 AI 기반 차세대 리치 텍스트 편집기로, Vue, React, Angular 및 기타 거의 모든 주류 프론트엔드 프레임워크를 지원합니다. PC 웹 및 모바일과 호환되며 밝은 색상과 어두운 색상의 두 가지 테마를 제공하며, 유연한 구성을 제공하여 개발자는 모든 텍스트 편집 애플리케이션을 개발하는 데 쉽게 사용할 수 있습니다. 오픈 소스 버전 외에도 AIEditor는 사용자 수와 애플리케이션 수가 무제한인 더 강력한 상용 버전도 제공합니다.

기능 목록

• AI 번역다국어 번역 지원, 사용자 지정 번역 언어 및 프롬프트 단어.
• AI 계속문맥에 따라 자동으로 텍스트를 이어서 작성 효율을 높입니다.
• AI 최적화텍스트 콘텐츠를 최적화하고 언어 품질을 개선합니다.
• AI 코드 블록코드 주석을 자동으로 추가하고 코드의 의미를 설명합니다.
• 멀티플레이어 협업여러 사용자가 동시에 같은 문서를 편집하고 서로의 입력과 변경 사항을 실시간으로 볼 수 있도록 지원합니다.
• 주석 기능문서의 특정 섹션에 의견이나 제안을 추가할 수 있도록 허용하여 후속 수정을 용이하게 합니다.
• 마크다운 지원마크다운 구문을 인식하여 올바르게 렌더링하고 실시간으로 편집 내용을 미리 볼 수 있습니다.
• 가져오기 내보내기워드, 마크다운, HTML, PDF 형식 가져오기 및 내보내기를 지원합니다.
• AI 메뉴 사용자 지정하기시나리오에 맞게 AI 기능 및 프롬프트를 사용자 지정하세요.

도움말 사용

설치 프로세스

1. npm 패키지 설치프로젝트 디렉터리에서 다음 명령을 실행하여 AIEditor를 설치합니다:

   npm install aieditor

2. AIEditor 소개프로젝트에 AIEditor 컴포넌트를 도입합니다(예: Vue 프로젝트):

   import { createApp } from 'vue';
import App from './App.vue';
import AIEditor from 'aieditor';
const app = createApp(App);
app.use(AIEditor);
app.mount('#app');

사용 가이드라인

1. 기본 사용: 예를 들어 Vue 프로젝트에서 프로젝트에 AIEditor 컴포넌트를 추가합니다:

   <template>
<AIEditor />
</template>

2. 구성 옵션AIEditor는 필요에 따라 사용자 지정할 수 있는 다양한 구성 옵션을 제공합니다. 예를 들어 테마와 언어를 설정할 수 있습니다:

   <AIEditor theme="dark" language="zh" />

3. AI 기능AIEditor는 모든 빅 모델에 대한 도킹을 지원하며, 사용자는 개인 빅 모델 ApiKey를 사용하여 AI 프롬프트 및 확장된 AI 메뉴를 사용자 지정할 수 있습니다. 예를 들어, ApiKey를 설정하려면:

   <AIEditor apiKey="your-private-api-key" />

4. 첨부 파일 업로드선택 업로드, 붙여넣기 업로드, 드래그 앤 드롭 업로드 등 다양한 첨부파일 업로드 방법을 지원합니다. 예를 들어 이미지 업로드 기능을 추가합니다:

   <AIEditor :uploadOptions="{ image: true }" />

세부 기능 작동 흐름

1. 텍스트 편집기굵게, 이탤릭체, 밑줄 등 텍스트 편집을 위해 AIEditor의 기본 기능을 사용합니다.
2. 브러시 및 지우개 서식 지정서식 브러시를 사용하여 텍스트 서식을 복사하고 지우개를 사용하여 텍스트 서식을 지웁니다.
3. 할 일 목록할 일 목록을 만들고 관리하여 작업을 쉽게 추적할 수 있습니다.
4. 이모티콘이모티콘을 삽입하여 텍스트를 풍성하게 꾸밀 수 있습니다.
5. 별관 관리드래그 앤 드롭 크기 조정 지원으로 이미지, 동영상, 파일 및 기타 첨부파일을 업로드하고 관리하세요.

위의 단계를 통해 사용자는 AIEditor를 쉽게 설치하고 사용하여 강력한 AI 기반 기능과 풍부한 텍스트 편집 기능을 최대한 활용할 수 있습니다.