pastelmind
commented
6 years ago 해결 방안
<details>를 다른 태그로 감싸면 루리웹이 <p> 바깥으로 끌어내지 못하게 막을 수 있지 않을까? 하여 여러 태그를 가지고 실험해 보았습니다. gist에 올린 테스트 케이스 보기
실험 결과
테스트한 여러 태그 중 유일하게 <button></button>으로 <details>를 감쌌을 때 루리웹이 강제로 끌어내지 않는 것을 확인했습니다. 다른 모든 태그는 <details>를 보호해 주지 못하거나, <textarea>, <select>와 같이 특별한 기능을 제공하기 때문에 <details>의 내용을 표시하기 부적합합니다.
적용 방안 및 한계점
<button></button>으로 <details>를 감싸는 꼼수에는 몇 가지 문제가 있습니다.
<button>의 기본 동작 및 스타일
<button>의 기본 동작과 스타일을 제거하고 일반적인 인라인 요소처럼 동작하게 만들어야 합니다.
<button>에disabled속성을 추가하여 클릭이 불가능하게 만듭니다.- 인라인 스타일로
margin: 0; padding: 0; border: none; cursor: auto을 적용하여 user agent 스타일 및 루리웹의 CSS를 덮어씁니다.
문단 정렬 변경하기
표를 삽입한 후에 문단(<p>)의 정렬 방식을 바꿀 경우, 문단 내부에 있던 <button><details>...</details></button> 태그가 <p>의 바깥으로 튕겨나옵니다. cheditor나 웹 브라우저의 동작을 뜯어고치는 것이 불가능에 가깝기 때문에, 이 현상에 대해서는 어찌하기 어렵습니다.
한 가지 대처 방안으로, 글을 편집할 때 <body>의 직계 자식인 <button>에 대해서는 다음과 같은 경고 문구를 띄우는 것을 고려할 수 있습니다.
이 표는 문단 태그에 포함되지 않아서 정렬할 수 없습니다. 문단을 먼저 정렬한 뒤에 표를 넣어주세요.
editor-iframe.css에서 CSS 가상 요소(pseudo-element)를 사용하고 있으므로, 별도의 툴팁을 추가하는 것은 어렵지 않습니다.
게시판에 영웅/기술/특성 표를 삽입하고 오른쪽이나 가운데 정렬을 지정한 뒤에 글을 저장하면 정렬한 설정이 무시되고 항상 왼쪽으로 정렬됩니다.
버그 리포트: http://bbs.ruliweb.com/family/4527/board/181429/read/9440162#ct_35475130
현상 분석
루리웹에서 글을 쓸 때 가운데 정렬을 설정하면 아래와 같은 형태가 됩니다.
여기서 "가운데"와 "정렬된 글" 사이에 공략툴로 표를 삽입하면 다음과 같은 형태가 됩니다.
이때 편집창 좌측 하단의 편집 모드를 입력 모드
→ HTML 편집 
→ 입력 모드 
로 변경하거나, 글을 저장하면 문제가 발생합니다. 루리웹이
<details>태그를<p>내부에 있어서는 안 되는 것으로 인식하고 아래와 같이<p>태그 바깥으로 끌어내는 것입니다.또한 사용자가 입력 모드에서 공략툴의 표가 포함된 문단을 가운데 정렬하려 할 경우, cheditor는
<p>태그를 생성하는 것이 아니라 부모 element인<body>에style="text-align: center"를 적용하여 모든 내용이 가운데 정렬된 것처럼 보이게 만듭니다. 실제로 글을 저장할 경우 이 값은 적용되지 않으며, 공략툴의 표는 왼쪽으로 정렬됩니다.