Vue 프로젝트에 Tinymce 리치 텍스트 편집기 도입

이 글은 Vue 프로젝트에 Tinymce 리치 텍스트 편집기를 도입하는 예제 코드를 주로 소개합니다. 매우 훌륭하고 참고할만한 가치가 있습니다. 필요한 친구들이 참고할 수 있습니다.

프로젝트에서 원래 사용한 리치 텍스트 편집기는 wangEditor입니다. , 이것은 매우 가볍고 간단한 편집기입니다

하지만 회사의 비즈니스가 업그레이드되었으며 더 포괄적인 기능을 갖춘 편집기를 찾고 있습니다. 현재 일반적인 편집기에는 다음이 포함됩니다.

UEditor: Baidu front. -end open source 프로젝트는 강력하고 jQuery를 기반으로 하지만 더 이상 유지 관리되지 않으며 백엔드 코드가 제한되어 수정이 어렵습니다.

bootstrap-wysiwyg: 마이크로, 사용하기 쉽고 작습니다. 아름답네요 그냥 Bootstrap + jQuery...

kindEditor : 강력한 기능, 간단한 코드, 백엔드 구성이 필요하고 오랫동안 업데이트되지 않았습니다

wangEditor : 가볍고 간단하며 사용하기 쉽지만 업그레이드 후 3.x에서는 맞춤형 개발이 편리하지 않습니다. 하지만 저자는 매우 부지런합니다. 넓은 의미에서 저와 전화해 주세요

quill: 기능은 많지 않지만 자체적으로 확장이 가능합니다. 이해하세요. 영어를 이해할 수 있다면...

summernote: 없음 추가 조사 결과 UI가 상당히 아름답고 작고 아름다운 편집기이지만 큰 편집기가 필요하다는 것을 알았습니다.

그런 참고로 저는 결국 사다리 없이는 공식 웹사이트도 열 수 없는 편집자인 Tinmce를 선택했습니다. (단순히 문제를 제기할 뿐입니다.) 주로 다음 두 가지 이유 때문입니다.

1. GitHub에 스타가 많고 기능이 완벽합니다.

2. Word에서 붙여넣을 때 대부분의 서식을 유지할 수 있는 유일한 편집기

3. 인터페이스와 프런트엔드 및 백엔드를 변경하기 위해 코드를 스캔할 필요가 없습니다.

4. 좋은 점 두 가지!

1. 리소스 다운로드

tinymce는 공식적으로 vue 프로젝트에 대한tinymce-vue 컴포넌트를 제공합니다

npm install @tinymce/tinymce-vue -S

이 코드를 vscode 또는 webstorm의 터미널에서 실행할 때 오류가 발생할 수 있습니다. 운영 체제에 내장된 명령줄 도구를 사용하는 것이 가장 좋습니다

tinymce 서비스를 구매한 경우 Tinymce-vue 지침을 참조하고 api-key를 통해 Tinymce를 직접 사용할 수 있습니다

아직 구매하지 않은 경우 나, 아직도tinymce를 정직하게 다운로드해야 합니다

npm install tinymce -S

설치 후 node_modules에서tinymce/skins 디렉터리를 찾은 다음 skins 디렉터리를 정적 디렉터리에 복사합니다

// 다음을 사용하여 빌드된 TypeScript 프로젝트인 경우 vue-cli 3.x, 모든 정적 디렉토리는 이런 방식으로 처리됩니다

tinymce의 기본값은 영어 인터페이스이므로 중국어 언어 팩도 다운로드해야 합니다(사다리를 만드는 것을 기억하세요). ! 사다리를 만드세요!)

그런 다음 구조를 위해 이 언어 팩을 정적 디렉토리에 넣습니다. 분명히 Tinymce 디렉토리 계층을 감쌌습니다

2. 초기화

페이지에 다음 파일을 소개했습니다

import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/modern/theme'
import Editor from '@tinymce/tinymce-vue'

tinymce-vue는 컴포넌트에 등록해야 하는 컴포넌트이고, 직접 사용하세요

여기서 init는tinymce 초기화 구성 항목입니다. API에 대한 자세한 내용은 공식 문서를 참조하세요

편집기가 제대로 작동하려면 스킨이 필요하므로 스킨 파일에서 벗어나기 전에 복사본을 가리키도록 skin_url을 설정해야 합니다.

init: {
 language_url: '/static/tinymce/zh_CN.js',
 language: 'zh_CN',
 skin_url: '/static/tinymce/skins/lightgray',
 height: 300
}

// vue-cli 3.x에서 생성된 Typescript 프로젝트, URL에서 정적 제거, 즉 skin_url: '/tinymce/skins/lightgray'

마운트에도 필요합니다. 한 번 초기화:

여기에 위의 init 객체를 전달하면 적용되지 않지만, 매개변수가 전달되지 않으면 오류가 보고되므로 여기에 빈 객체가 전달됩니다.

3. 확장 플러그인

위 초기화를 완료하면 편집기가 정상적으로 실행되지만 일부 기본 기능만 사용할 수 있습니다.

tinymce는 플러그인을 추가하여 기능을 추가합니다. 예를 들어 사진을 업로드하는 기능을 추가하려면 다음을 수행해야 합니다. 이미지 플러그인을 사용하여 하이퍼링크를 추가하려면 링크 플러그인을 사용해야 합니다

동시에 페이지에 다음 플러그인도 소개해야 합니다.

플러그를 추가한 후 -in, 해당 기능 버튼이 기본적으로 도구 모음에 추가되며 도구 모음도 사용자 정의할 수 있습니다

전체 구성 요소 코드 게시:

<script>
import tinymce from &amp;#39;tinymce/tinymce&amp;#39;
import &amp;#39;tinymce/themes/modern/theme&amp;#39;
import Editor from &amp;#39;@tinymce/tinymce-vue&amp;#39;
import &#39;tinymce/plugins/image&#39;
import &#39;tinymce/plugins/link&#39;
import &#39;tinymce/plugins/code&#39;
import &#39;tinymce/plugins/table&#39;
import &#39;tinymce/plugins/lists&#39;
import &#39;tinymce/plugins/contextmenu&#39;
import &#39;tinymce/plugins/wordcount&#39;
import &#39;tinymce/plugins/colorpicker&#39;
import &#39;tinymce/plugins/textcolor&#39;
export default {
 name: &#39;tinymce&#39;,
 data () {
  return {
   tinymceHtml: &#39;请输入内容&#39;,
   init: {
    language_url: &#39;/static/tinymce/zh_CN.js&#39;,
    language: &#39;zh_CN&#39;,
    skin_url: &#39;/static/tinymce/skins/lightgray&#39;,
    height: 300,
    plugins: &#39;link lists image code table colorpicker textcolor wordcount contextmenu&#39;,
    toolbar:
     &#39;bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat&#39;,
    branding: false
   }
  }
 },
 mounted () {
  tinymce.init({})
 },
 components: {Editor}
}
</script>

4. 이미지 업로드

tinymce는 사용자가 이미지 업로드를 위한 관련 매개변수를 구성할 수 있도록 Images_upload_url과 같은 API를 제공합니다

그러나 번거로운 백엔드 없이 자신의 프로젝트에 적응하려면 여전히 사용해야 합니다. 업로드 방법 정의

의 Images_upload_handler는 blobInfo, 성공, 실패라는 세 가지 매개변수를 제공합니다.

여기서 blobinfo는 업로드된 파일에 대한 정보가 포함된 개체입니다.

성공과 실패는 함수입니다. 성공 실패하면 이미지 주소를 성공으로 전달하고, 실패하면 오류 메시지를 실패로 전달

위 내용은 Vue 프로젝트에 Tinymce 리치 텍스트 편집기 도입의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!