이온디
이온디

단락편집기의 추억

행복한고니(김태곤)님께서 XE개발팀에 있을 적에 텍스타일용 에디터로 단락편집기라는 위지윅 에디터를 개발했던 걸로 알고 있습니다.

XE Core, 단락편집기를 품다! (2011/02/09)
https://www.xpressengine.com/devlog/19518903

단락편집기의 추억
https://www.xpressengine.com/forum/22389449

요즘 오픈UI기술팀에서 뭘 하고 있길래 바쁠까요? (제로, 2010/05/25)
https://www.xpressengine.com/index.php?mid=forum&search_target=title_content&search_keyword=%EB%8B%A8%EB%9D%BD%ED%8E%B8%EC%A7%91%EA%B8%B0&document_srl=18908680

단락편집기는 다운로드 페이지의 설명에서처럼 조금 더 구조적인 글쓰기를 할 수가 있지요.

한글문서의 페이지 나누기 처럼, 목차/본문/참조문서 등을 단락으로 분리할 수 있고,

본문의 구조 역시 여러 단락으로 나누고 드래그 방식으로 위치를 조정할 수 있습니다.

하지만 기존 파일 업로드 방식과 다르고, 개발을 하다 만 것이라서 불편한 부분도 있었지 않나 싶습니다.

그 중에서도, 글보기에서의 구조적 변경은 쉬웠을지 몰라도, SEO 적인 측면에서 바라봤을 때는,

라르게덴님 말씀처럼 불필요한 div 태그가 남발되는 문제가 있습니다.

https://romanesque.me/forum/2369

그래서 이 부분을 어떻게 살릴 수 있을까 고민해봤습니다.


1. 단락이 필요한 부분에 단락으로 구분 지을 문장들을 선택 후 드래그한 뒤에 단락 만들기 라는 임의의 클래스를 구분해주고, 해당 클래스가 있을 경우 css와 js를 이용해서 해당 단락끼리 이동할 수 있게 만든다.


2. 선택 후 마우스를 떼면, 단락 만들기라는 툴바로, 해당 문단을 <block></block> 태그로 감싸준다.

해당 태그는 XE에 있는 자체 문법 태그로, 글쓰기 시에만 나타나도록 조정한다.


혼자 어떤 방법이 있을까 고민해봤는데 무엇이 좋은지 잘 모르겠습니다.


댓글
현재 댓글이 7 개 달려있습니다.
라르게덴
라르게덴

UL 태그가 오른쪽으로 치우친게 버그인줄 알았습니다.

들여쓰기가 되었군요 ^^

  • 0
이온디
이온디

모바일에선 지나치게 치우쳐져 보이더군요 ㅎ;

  • 0
라르게덴
라르게덴

회원은 써지는데 비회원이 이 자리에 등록이 안되는군요

  • 0
라르게덴
라르게덴

test

  • 0
  • 닉네임을 적어주세요.

    두자 이상 적어주세요.

    필수 입력 항목 입니다.

    실패했습니다.

  • 비밀번호를 적어주세요.

    안전을 위해 가급적 패스워드는
    8자이상으로 적어주세요.

    필수 입력 항목 입니다.

    실패했습니다.

최지연
최지연

test2

  • 0
  • 닉네임을 적어주세요.

    두자 이상 적어주세요.

    필수 입력 항목 입니다.

    실패했습니다.

  • 비밀번호를 적어주세요.

    안전을 위해 가급적 패스워드는
    8자이상으로 적어주세요.

    필수 입력 항목 입니다.

    실패했습니다.

라르게덴
라르게덴

많은 부분을 고민해주셨는데 이런 것 같습니다. 아는 만큼 더 폭넓게 보인다고, 저는 하나의 에디터안에서 많은 고민을 할 필요가 더 이상 없다고 생각합니다. 이 에디터의 우수한 점이 그런 점 입니다.

일전에 xetown 에도 적었지만 이 에디터는 멀티 에디터를 지원하며 저 역시 xe안에서 멀티 에디터를 구현하고 있습니다.(이곳 블로그 댓글기능은 멀티 에디터로 적용했습니다. 글을 써주세요.를 클릭하시면 서로 다른 에디터가 나타납니다.)

더욱이 이런 기능들도 됩니다.

https://www.froala.com/wysiwyg-editor/examples/destroy-init

https://www.froala.com/wysiwyg-editor/examples/init-on-click


저라면 에디터 스킨의 textarea를 div로 해두고 단락의 위치에 있는 태그 "div > p,div,blockquote" 등등에 개별 에디터를 띄우도록 하겠습니다. 그리고 에디터의 기본단락태그는 BR로 바꿉니다. 이러면 단락태그를 생성함과 동시에 에디터로 부르게 됩니다. 그리고 에디터 영역을 클릭하면 init on이 되게 동작시키고 blur되면 destroy되게 합니다. jquery ui sortable 과 같이 단락을 정렬시키면 이전에 보았던 단락편집기의 기능을 구현할 수 있습니다.

앞으로 사용자, 개발자 튜토리얼을 준비할 건데 이러한 구현 방법도 실제 제작해보고 소개하는 과정을 가질 것 입니다. 제가 죄다 개발하고 혼자 노하우를 가질 생각은 없습니다. 용역하시는 분들이나 오픈소스 제작자 들에게 새로운 개발 방향을 제시할 것이고 같이 만들어가려고 합니다.

  • 0
최지연
최지연

test3

  • 0
  • 닉네임을 적어주세요.

    두자 이상 적어주세요.

    필수 입력 항목 입니다.

    실패했습니다.

  • 비밀번호를 적어주세요.

    안전을 위해 가급적 패스워드는
    8자이상으로 적어주세요.

    필수 입력 항목 입니다.

    실패했습니다.

댓글 남기기
  • 닉네임을 적어주세요.

    두자 이상 적어주세요.

    필수 입력 항목 입니다.

    실패했습니다.

  • 비밀번호를 적어주세요.

    안전을 위해 가급적 패스워드는
    8자이상으로 적어주세요.

    필수 입력 항목 입니다.

    실패했습니다.

당신의 글쓰기를 스마트하게.
글을 써보시겠습니까?

글쓰기

현재 55 개의 글이 작성 되어 있습니다.

Find Account
  • 이메일 주소로 계정 찾기

    아이디/비밀번호는 가입시 등록한 메일 주소로 알려드립니다. 가입할 때 등록한 메일 주소를 입력하고 "ID/PW 찾기" 버튼을 클릭해주세요.

  • 이메일 주소

    이메일 주소 형식이 올바르지 않습니다.

  • 인증메일 재발송

    인증 메일을 받지 못한 경우 다시 받을 수 있습니다.

  • 이메일 주소

    이메일 주소 형식이 올바르지 않습니다.