운영하다보니 날 괴롭히는 editor 문제

서론

사용상의 문제는 간단하게 동작을 검증하는 테스트 단계에선 알아차리지 못하는 경우가 많다.
이번 문제는 현재 사용하고 있는 toast editor(tui editor)를 사용하면서 파악한 문제들이다.

2020년 3월 기준 2.0으로 업데이트 된 에디터로,
무료, 실시간 마크다운과 위지웍 동시 지원을 자랑하는 에디터이지만
간단하게 사용하면 문제 없어 보이지만 당장 검색만 해봐도 사용하기 불편하다는 것을 알 수 있다.🥲

 

본론

viewer에서의 마크다운 태그 문제

글의 최 상단에 이미지가 들어가는 경우엔 문제가 없지만 중간에 이미지가 들어가는 경우
사진과 같이 마크다운 이미지 태그가 그대로 노출 되는 것을 볼 수 있다.

마크다운, 위지웍 전환 간의 양식 '개박살' 문제

마크다운 문법은 간단한 문법의 조합으로 꽤나 세세한 작성이 가능하다.
바로 직전의 swift 학습 정리 글이 그러하며, PC환경에서 글을 작성하는 경우 장문이 되거나 글이 복잡해 지는 경우가 있어
위지웍 보다는 마크다운이 자유성 보장 면에서 더 뛰어나다고 생각한다.
다만 이렇게 작성한 글들이 문제를 일으키는데...

하나.

둘.

셋.

수정하려 마크다운에 들어갔다 나오면 글이 '개박살'이 나 있다. 😇
오타 하나 발견 할 때 마다 한숨이 어찌나 나오던지...
간단한 수정 몇 자 했을 뿐인데 한 시간씩 걸리는 마법....

에디터 크기 문제

PC.

모바일.

데스크톱과 모바일 작성 화면의 크기 갭이 엄청나다...
지금까지는 고정 높이를 사용하고 있어서 간단하게 auto로 설정하면 반응 할 줄 알았는데...
이건 조금 더 찾아보거나 분기 설정으로 쉽게 해결 가능해 보이니 큰 스트레스는 아니긴 하다.

마크다운 뷰어 다크모드 문제

위의 사진들에서 보이듯 마크다운 에디터의 뷰어에선 다크모드 관련 코드가 적용 되지 않는다.
이런 문제는 이전의 다크모드 적용 때도 그랬고 해결법 찾기가 그리 수월하지 않은데 애 좀 먹을 것 같다. 😇

 

결론

에디터 분기 (2021.04.08.)

<v-col v-if="!$vuetify.breakpoint.xs" cols="12">
            <editor
              v-if="!exists"
              :initialValue="form.content"
              ref="editor" initialEditType="markdown"
              :options="options"
              height="900px"
              ></editor>
            <template v-else>
              <editor
                v-if="form.content"
                :initialValue="form.content"
                ref="editor" initialEditType="markdown"
                :options="options"
                height="900px"
                ></editor>
              <v-container v-else>
                <v-row justify="center" align="center">
                  <v-progress-circular indeterminate></v-progress-circular>
                </v-row>
              </v-container>
            </template>
          </v-col>
          <v-col v-else cols="12">
            <editor
              v-if="!exists"
              :initialValue="form.content"
              ref="editor" initialEditType="wysiwyg"
              :options="options"
              ></editor>
            <template v-else>
              <editor
                v-if="form.content"
                :initialValue="form.content"
                ref="editor" initialEditType="wysiwyg"
                :options="options"
                ></editor>
              <v-container v-else>
                <v-row justify="center" align="center">
                  <v-progress-circular indeterminate></v-progress-circular>
                </v-row>
              </v-container>
            </template>
          </v-col>

급한대로 양식 문제를 먼저 해결했다. (글 쓸 게 많은데 계속 이런 식으로 시간을 뺏길 수 없지...)
마크다운을 활용한 정리 목적의 게시글의 경우 대부분 아이패드와 PC환경의 큰 화면에서 진행하는 것에 착안해 화면 크기를 통해 분기하도록 했다.

동작 환경이 모바일인 경우 이지윅의 에디터 폼을, 동작환경이 태블릿이나 PC인 경우 마크다운 작성임을 가정하고 분기시켜버렸다.
이럴 경우 글을 수정했을 때

'위지윅>마크다운>위지윅'

의 양식 개박살 루틴을 벗어나 바로 마크다운으로 불러와 문제가 해결 되는 것을 확인했다.

tui markdown editor preview 배경색 (2021.04.09.)

tui 마크다운 에디터의 미리보기 의 배경색이 앱의 테마를 끌어와 글자가 보이지 않는 문제가 있었다.
원래는 위지윅으로만 글을 작성해서 몰랐는데(솔직히 알고 있었다. 사용 빈도가 낮아서 애써 무시하고 있었을 뿐이지...),
본격적으로 마크다운을 사용해 보니 이게 더 편하고 자유롭더라..

바로 이런 느낌이라 간단한 작성 정도야 그냥 마크다운으로 대충 감이 잡히는데
글이 복잡해 지기 시작하면 감당이 안 되는 것이다.
문제 해결을 위해 기존에 적용했던 vuetify.js의 다크모드 테마 적용 부분을 롤백하니 흰 화면으로 바뀌는 것을 확인했다.
그럼 가능성은 두 가지.

1. tui editor preview가 테마 어딘가의 색을 자동으로 따라간다.
2. tui editor preview의 배경 색이 투명하다.

태생이 웹을 제대로 배운 것이 아니니 삽질밖에는 답이 없다.
저번처럼 css를 뒤지기 시작했다.
te-editor-preview가 대충 내가 원하는 부분일 것 같아 저녁 먹고 몇 시간을 뒤져 봤으나 찾아내지 못했고,
확신이 없는 상태로 2번으로 눈길을 돌렸다.

<v-sheet color="white">
	<editor
    	v-if="!exists"
        :initialValue="form.content"
        ref="editor" initialEditType="markdown"
        :options="options"
        height="900px"
        ></editor>
        <template v-else>
        	<editor
            	v-if="form.content"
                :initialValue="form.content"
                ref="editor" initialEditType="markdown"
                :options="options"
                height="900px"
                ></editor>
            <v-container v-else>
            	<v-row justify="center" align="center">
                	<v-progress-circular indeterminate></v-progress-circular>
                </v-row>
            </v-container>
        </template>
</v-sheet>

빙고.

editro 뒤에 v-sheet로 배경을 깔아주니 내가 원하는 화면이 되었다.
폰트 색은 볼 것도 없다, 감이 왔거든.
에디터에 기존에 만들었던 viewer 다크모드 대응 class를 넣어주면

<v-sheet color="white">
	<editor
    	v-if="!exists"
        :initialValue="form.content"
        ref="editor" initialEditType="markdown"
        :options="options"
        height="900px"
        class="tui-dark"
        ></editor>
	<template v-else>
    	<editor
        	v-if="form.content"
            :initialValue="form.content"
            ref="editor" initialEditType="markdown"
            :options="options"
            height="900px"
            class="tui-dark"
            ></editor>
        <v-container v-else>
        	<v-row justify="center" align="center">
            <v-progress-circular indeterminate></v-progress-circular>
            </v-row>
        </v-container>
    </template>
</v-sheet>

편안.....
완벽해 졌다고 볼 수 있다.

이렇게 두 가지 문제를 해결하면서 tui가 부족한 점을 빼고(1년 지났는데 업데이트 부탁드립니다...)는
잘 해결 된 것 같다.

저번에 학습 노트를 적으면서 표 관련 기능이 조금 부족하다고 느꼈는데,
이 부분도 tui에서 플러그인으로 해결을 해 주는 것 같다.
조만간 삽질 예정...

😇

---

Log

2021.07.23.
블로그 이전으로 인한 글 옮김 및 수정