ueditor blazor

ueditor-blazor

Ueditor 및 Blazor를 기반으로하는 Wysiwyg Rich Text 웹 편집기.

? 현재 버전

• 풀어 주다:
• 개발:

용법

1. 패키지를 설치하십시오

     $ dotnet add package UEditorBlazor -v 0.1.0- *

2. JS 리소스를 가져옵니다

       < script >
           window . NEDITOR_UPLOAD = "/api/upload" ;
       </ script >
       < script src =" _content/UEditorBlazor/neditor.config.js " > </ script >
       < script src =" _content/UEditorBlazor/neditor.all.min.js " defer > </ script >
       < script src =" _content/UEditorBlazor/neditor.service.js " > </ script >
       < script src =" _content/UEditorBlazor/ueditor-blazor.js " > </ script >

3. 그게 다야! 그런 다음 UEditor.Editor 구성 요소를 사용할 수 있습니다.

   < UEditor .Editor @ref = " editor " @bind-Value = " value " @bind-Html = " html " Height = " 500px " Width = " 700px " />
   
   @code {
       string value = " Hello Blazor! " ;
       string html ;
   
       Editor editor ;
   }

이미지 로딩

사용자 정의 이미지로드를 구현하려면 아래에 나열된 지침을 따르십시오.

1. 업로드 API 엔드 포인트 설정 :

 < script >
    window . NEDITOR_UPLOAD = "/api/upload" ;
</ script >

neditor.service.js 에서 getActionUrl 함수에 window.NEDITOR_UPLOAD 확인하십시오.

2. 이미지 업로드 서버 구현 :

2.1 API 컨트롤러를 추가하기 전에 일부 물건을 등록하십시오

 services . AddControllers ( ) ; 

2.2 이미지를 저장하려면 디렉토리를 추가하십시오

 app . UseStaticFiles ( new StaticFileOptions {
    FileProvider = new PhysicalFileProvider ( image_path ) ,
    RequestPath = "/I"
} )

/I 접미사는 미리보기 이미지를 표시하는 데 사용됩니다. 컨트롤러에서 image_path /I 수 있습니다.

2.3 API 컨트롤러를 작성하여 /api/upload 요청을 처리하십시오

ImageController.cs 참조하십시오. root 와 result.url 기억하십시오. url 변형은 2.2 에서 언급 한 것과 동일해야합니다.

3. 즐기십시오.