EOND 스레드

이온디 5개월 전

노션 스타일 + 마크다운 사용자라면: 당신의 스타일 분석 | 선호 | 특징 | |---------|---------------------| | 노션 스타일 | / 슬래시 명령어, 블록 드래그 | | 마크다운 | #, **, - 입력하면 즉시 변환 | | HTML 저장 | 라이믹스 호환 필수 | 최종 추천: TipTap ⭐⭐⭐⭐⭐ TipTap이 딱 맞는 이유: | 기능… 노션 스타일 + 마크다운 사용자라면: 당신의 스타일 분석 | 선호 | 특징 | |---------|---------------------| | 노션 스타일 | / 슬래시 명령어, 블록 드래그 | | 마크다운 | #, **, - 입력하면 즉시 변환 | | HTML 저장 | 라이믹스 호환 필수 | 최종 추천: TipTap ⭐⭐⭐⭐⭐ TipTap이 딱 맞는 이유: | 기능 | TipTap 지원 | |------------|----------------------| | / 슬래시 명령어 | ✅ @tiptap/suggestion | | 마크다운 자동 변환 | ✅ # → H1, ** → 굵게 | | 블록 드래그 | ✅ 플러그인 | | HTML 저장 | ✅ 네이티브 | | Vanilla JS | ✅ React 없이 사용 가능 | // 마크다운 입력 → 즉시 변환 "# 제목" → 제목 "**굵게**" → 굵게 "- 리스트" → 리스트 // HTML로 저장 (라이믹스 호환) const html = editor.getHTML() EditorJS vs TipTap | 비교 | EditorJS | TipTap | |-------|--------------|--------------| | 저장 형식 | JSON (변환 필요) | HTML (바로 저장) | | 마크다운 | 플러그인 필요 | 기본 지원 | | / 명령어 | 지원 | 지원 | | 노션 느낌 | 70% | 90% | | 라이믹스 | 변환 코드 필요 | 바로 호환 | --- 결론: TipTap - 노션처럼 / 치면 블록 메뉴 - 마크다운 치면 즉시 변환 - HTML로 저장되어 라이믹스 바로 호환 - CKEditor/Froala 대체로 적합

원본

이온디 5개월 전

추천 에디터 현재 el_d1 레이아웃이 Alpine.js + Blade 기반이므로: | 에디터 | 추천도 | 이유 | |-----------|-------|---------------------------------------| | EditorJS | ⭐⭐⭐⭐⭐ | Alpine.js와 바로 호환, 가벼움(~50KB), JSON 저장 | | Milkdown | ⭐⭐⭐⭐ | 마크다운 특… 추천 에디터 현재 el_d1 레이아웃이 Alpine.js + Blade 기반이므로: | 에디터 | 추천도 | 이유 | |-----------|-------|---------------------------------------| | EditorJS | ⭐⭐⭐⭐⭐ | Alpine.js와 바로 호환, 가벼움(~50KB), JSON 저장 | | Milkdown | ⭐⭐⭐⭐ | 마크다운 특화, Vanilla JS 지원, 노션 스타일 / 명령어 | | TipTap | ⭐⭐⭐ | 확장성 좋지만 약간 무거움 | | BlockNote | ⭐⭐ | 노션과 가장 유사하지만 React 필수 (추가 빌드 필요) | 나의 추천 1순위: EditorJS - 현재 구조에 바로 붙일 수 있음 - CDN으로 간단히 로드 - JSON으로 저장 → DB에 그대로 저장 가능 - 마크다운 플러그인 추가 가능 2순위: Milkdown (마크다운이 중요하다면) - 마크다운 입력하면 즉시 렌더링 - / 슬래시 명령어 지원 - Vanilla JS로 사용 가능 --- 어떤 방향으로 가시겠습니까? 1. EditorJS - 가볍고 빠르게 적용 2. Milkdown - 마크다운 중심 + 노션 스타일 3. 그냥 현재 textarea 유지 - 단순하게

원본

이온디 5개월 전

--- EditorJS 관련 말씀하신 EditorJS(https://editorjs.io/) 블록 기반 에디터는 좋은 방향입니다. 현재 JSON 구조가 이미 블록 단위(description, pricing, pros, cons 등)로 되어 있어서, 향후 EditorJS 스타일로 확장하기 좋은 기반이 있습니다. EditorJS 도입 시 장점: - 일관된 디자인: 사용자가 스타일링 선택 불가, 항상 깔끔한 레이아웃 - 블록 단위 편집: 텍스트, 이미지, 리스트 등을 … --- EditorJS 관련 말씀하신 EditorJS(https://editorjs.io/) 블록 기반 에디터는 좋은 방향입니다. 현재 JSON 구조가 이미 블록 단위(description, pricing, pros, cons 등)로 되어 있어서, 향후 EditorJS 스타일로 확장하기 좋은 기반이 있습니다. EditorJS 도입 시 장점: - 일관된 디자인: 사용자가 스타일링 선택 불가, 항상 깔끔한 레이아웃 - 블록 단위 편집: 텍스트, 이미지, 리스트 등을 개별 블록으로 관리 - JSON 저장: 현재 방식과 호환 가능 - XSS 방지: HTML 직접 저장 X 추후 EditorJS 통합이 필요하시면 말씀해주세요! > editorjs가 노션에서 사용하는 에디터인가 ⎿ Found 47 new diagnostic issues in 1 file (ctrl+o to expand) ⏺ EditorJS는 노션 에디터와는 다릅니다. 둘 다 "블록 기반" 개념을 사용하지만 별개의 프로젝트입니다. 블록 기반 에디터 비교 | 에디터 | 개발사 | 특징 | |---------------|-------------|---------------- --------------| | Notion Editor | Notion Labs | 비공개/자체 개발, ProseMirror 영향 | | EditorJS | CodeX | 오픈소스, 경량, JSON 저장 | | TipTap | - | ProseMirror 기반, Vue/React 지원 | | BlockNote | - | 노션 스타일 오픈소스 클론 | | Slate | - | React 기반 | 노션 스타일 오픈소스 대안 노션과 비슷한 UX를 원하면: 1. BlockNote (https://www.blocknotejs.org/) - 노션 스타일에 가장 가까움 2. TipTap (https://tiptap.dev/) - 확장성 좋음 3. EditorJS - 가볍고 심플함 --- IDE 경고(x-data, x-model 등)는 무시해도 됩니다. PhpStorm이 Alpine.js 문법을 인식하지 못해서 나오는 경고일 뿐, 실제 오류는 아닙니다. Alpine.js 플러그인을 설치하거나, Settings → Inspections → HTML에서 "Unknown attribute" 경고를 끄면 됩니다. > 다 무료인건가 ⏺ 네, 모두 오픈소스/무료입니다. | 에디터 | 라이선스 | 비용 | |-------------|------------|------------------- | | EditorJS | Apache 2.0 | 완전 무료 | | BlockNote | MPL 2.0 | 완전 무료 | | TipTap | MIT | 코어 무료 (Pro 기능 유료) | | Slate | MIT | 완전 무료 | | ProseMirror | MIT | 완전 무료 | 추천 | 상황 | 추천 | |---------|-----------| | 가볍고 빠르게 | EditorJS | | 노션 느낌 | BlockNote | | 커스텀 많이 | TipTap | 현재 JSON 구조 방식이랑 가장 잘 맞는 건 EditorJS입니다. 플러그인도 많고 용량도 작아요. > 노션 스타일 빠른 글쓰기는 블락노트인건가요 ⏺ 네, 노션 스타일 빠른 글쓰기는 BlockNote가 가장 비슷합니다. BlockNote 특징 - / 입력하면 블록 메뉴 (노션과 동일) - 드래그로 블록 순서 변경 - 텍스트 선택 시 포맷팅 툴바 - React 기반 (Next.js, Vite 등) / ← 슬래시 명령어 📝 텍스트 📋 리스트 🖼️ 이미지 📊 테이블 단점 - React 필수 - 현재 el_d1는 Alpine.js 기반이라 추가 작업 필요 - 용량이 EditorJS보다 큼 현재 프로젝트 기준 추천 | 선택지 | 장점 | 단점 | |-----------|--------------------|------------- --| | EditorJS | Alpine.js와 호환, 가벼움 | 노션보다 단순함 | | BlockNote | 노션 UX 동일 | React 필요, 무거움 | 현실적으로는 EditorJS가 현재 구조(Alpine.js + Blade)에 바로 붙이기 쉽습니다. BlockNote는 React 컴포넌트로 별도 빌드해야 해요. > md 마크다운도 지원하는게 있나. ⏺ 네, 대부분 마크다운 지원합니다. 마크다운 지원 비교 | 에디터 | 마크다운 입력 | 마크다운 출력 | 단축키 | |-----------|------------|---------|----------- ---| | EditorJS | ⚠️ 플러그인 필요 | ⚠️ 플러그인 | #, * 등 부분 지원 | | BlockNote | ✅ 기본 지원 | ✅ 지원 | 노션처럼 자동 변환 | | TipTap | ✅ 기본 지원 | ✅ 지원 | 완벽 지원 | | Milkdown | ✅ 마크다운 전문 | ✅ 완벽 | WYSIWYG + MD | 마크다운 특화 에디터 Milkdown (https://milkdown.dev/) - 마크다운 + 블록 에디터 결합 - 플러그인 시스템 - MIT 라이선스 (무료) - 노션 스타일 / 명령어 지원 # 제목 입력하면 → H1으로 자동 변환 **굵게** → 굵게 - 리스트 → 불릿 리스트 추천 정리 | 원하는 것 | 추천 | |-------------|--------------------| | 마크다운 중심 | Milkdown | | 노션 스타일 + MD | BlockNote, TipTap | | 가볍게 | EditorJS + MD 플러그인 | Milkdown이 마크다운 + 블록 에디터 조합으로는 가장 잘 만들어져 있어요. 프레임워크 무관하게 사용 가능(Vanilla JS, React, Vue 모두 지원).

원본

이온디 5년 전

사이트 레이아웃만 바꾼 거 같은데 사이트 로딩 속도가 엄청 빨라진 듯 합니다.. ㅎㅎ 그나저나 레이아웃 작업기 올리던 게시판이 있던거 같은데 #이온디신축 #신축 #레이아웃작업기 #작업내역 #작업기 #이온디2021 도대체 어느 메뉴에 있는지 @_@ 메뉴 정리도 차차 하려고요! 일단 이 게시물에 계속 정리해봐야겠네요. #레이아웃 1. [레이아웃] 메인 메뉴판 3차 메뉴 기본 클릭 시 펼침? 바로가기 링크? 어떻게 할건지, 펼침 기능을 별도로 구현할 건지 아니면 해당 링크 기능은 사용안할건지 고… 사이트 레이아웃만 바꾼 거 같은데 사이트 로딩 속도가 엄청 빨라진 듯 합니다.. ㅎㅎ 그나저나 레이아웃 작업기 올리던 게시판이 있던거 같은데 #이온디신축 #신축 #레이아웃작업기 #작업내역 #작업기 #이온디2021 도대체 어느 메뉴에 있는지 @_@ 메뉴 정리도 차차 하려고요! 일단 이 게시물에 계속 정리해봐야겠네요. #레이아웃 1. [레이아웃] 메인 메뉴판 3차 메뉴 기본 클릭 시 펼침? 바로가기 링크? 어떻게 할건지, 펼침 기능을 별도로 구현할 건지 아니면 해당 링크 기능은 사용안할건지 고민하기. 2. [레이아웃추가디자인] 서브레이아웃일 때 상단 메뉴판의 크기 및 디자인 수정 3. [레이아웃] 서브 메뉴판 4. [레이아웃] 현재위치출력 부분 수정하기 5. 푸터 메뉴 추가 및 푸터 디자인 수정하기 6. 폰트 css 정리하기 7. [추가기능] 본문 글자 크기 수정 스크립트 추가하기 8. 검색 기능 9. 언어 선태 기능 #위젯 4. [추가기능] 로그인 시 우측 사이드에 쇼핑몰처럼 최근 읽은 게시물, 최근 댓글, 최근 게시물, 현재 로그인한 회원 등 사이드바 위젯 만들기 5. [위젯] 왼쪽 기본 사이드바에 현재 로그인한 회원 프로필이미지 동그라미로 쌓이는 형식으로 디자인해서 넣기 6. [위젯] 하단에 현재 읽히는 게시물 위젯 띄우기, 최근에 작성된 댓글 띄우기, 질문게시판(나만의질문,1:1질문,프로젝트의뢰문의) 3개 최근게시물 위젯 띄우기 8. [레이아웃메인위젯] 최근게시물위젯-공지사항 (모든 게시판 공지 띄우기 기능 추가하기?) 최근게시물위젯-전체글,전체댓글,내가작성한전체글,내가작성한전체댓글 최근게시물위젯-프로젝트진행중,프로젝트문의 9. [메인위젯] 상품위젯 10. [메인위젯] 프로젝트후기위젯 상품위젯 우측에 프로젝트 후기를 남기고(?) 띄울 수 있는 위젯 만들기 #각위젯페이지 1. 커뮤니티 2. 웹디벨로퍼 3. 포인트마켓 4. 전문가의뢰 4.1. 전문가등록 5. 쉐어드호스팅 6. 가격안내 7. 맞춤견적 14. 맞춤견적 위젯 페이지 디자인 새로 하기 11. 로그인 디자인 새로 하기 12. 고객센터 디자인 새로 하기 13. 내 프로젝트함 디자인 새로 하기 #게시판 1. 게시판 디자인 새로 하기 2. faq 디자인 새로 하기 #게시판스킨2 - 지역소개 게시판스킨 #포인트충전모듈스킨 #포인트마켓 #회원스킨 #출석부스킨 #에디터 1. [추가기능] 글 작성 중 탭키 눌렀을 때 원노트처럼 테이블이 만들어지는 기능이 있었으면. 2. 코드보기와 같이 md 스타일처럼 글 작성하기 기능이 있었으면. 3. [버그] 해시태그가 띄어쓰기를 인지하지 못함. #검색기능 1. 검색모듈스킨 재작업하기 2. 검색일 경우 레이아웃에서 사이드바 없는 전체 화면으로 띄우기 #자료실 ps. 한 개의 사이트 만드는데만 해도 어마어마한 작업기록이 쌓일 듯 하네요 ㅠㅠㅠ

원본

이온디 6년 전

#에디터 #br #br태그 #프로알라에디터 https://romanesque.me/index.php?mid=forum&search_keyword=br&search_target=title&document_srl=2402" style="height: 250px;">https://romanesque.me/index.php?mid=forum&search_keyword=br&search_target=title&document_srl=2402 p, br, span, div 태그 https://romane… #에디터 #br #br태그 #프로알라에디터 https://romanesque.me/index.php?mid=forum&search_keyword=br&search_target=title&document_srl=2402" style="height: 250px;">https://romanesque.me/index.php?mid=forum&search_keyword=br&search_target=title&document_srl=2402 p, br, span, div 태그 https://romanesque.me/index.php?mid=forum&search_keyword=br&search_target=title&document_srl=2402 예전에 제가 이런 글을 쓴 적이 있군요. -_-; 요지는, 프로알라에디터에서는 br 태그 대신 p 태그를 기본 띄어쓰기로 하고 있는데, 우리나라의 현실적 글쓰기에서는, p 태그가 아닌 br 태그가 더 적당하다. 그리고, p태그처럼 (본래 p태그의 역할은 영문에서의 한문단 띄우기이다.) 한 문단을 띄우고자 할 경우에, 우리는 보통 2칸을 띄우는데, 이때 ctrl+Enter 라던가, enter+enter 일 경우 자동 p 태그로 변환되던가 하는 게 더 낫지 않나. ...하는게 제 생각의 요지입니다.

원본