Vue.js 에서 WYSIWYG Editor 대세는 TipTap(https://github.com/ueberdosis/tiptap) 입니다.

같은 Prosemirror 기반이라 Atlassian Confluence를 쓰던 분들은 별 적응 없이 쓸 수 있을 정도로 입력 방식이나 결과물이 유사합니다.

다만 요즘 FrontEnd 개발의 추세(?)인 그냥 설치해서 갖다 쓰면 끝인 방식이 아니라 조금 만져줘야 한다는 점, 특히 예제 툭 던져주고 이런식으로 만들면 된다는 식인데 Customize 하긴 정말 좋지만 전문 FrontEnd 개발자가 아니라 FrontEnd는 UI만 만들고 넘어가고 싶은 비 FrontEnd 개발자에게는 이런 것도 애로사항이 될 수 있을 듯.

TipTap Component 하나 만들어 놓고 에디터가 필요한 view에서 불러와 쓰면 편합니다.

데모 실행해 보기 (https://genonfire.github.io/tiptap-component/)

Component 만 잘 만들어 놓으면 아래처럼 간단히 불러와 쓸 수 있습니다.

<template>
  <TipTap
    :options="options"
  />
</template>

<script>
import TipTap from '@/components/TipTap'
export default {
  components: {
    TipTap
  },
  data () {
    return {
      options: {
        content: 'default text',
        editable: true
      }
    }
  }
}
</script>

소스는 아래 링크 참고하세요.

https://github.com/genonfire/tiptap-component

이미지 삽입 (링크, 파일 업로드)과 비디오 삽입 기능을 추가했습니다.

- 파일 업로드를 위해서는 File upload API 가 따로 필요합니다. (링크로 삽입은 FrontEnd만으로 가능)