글 작성 후 스타일(폰트,크기,서식) 변경 시 개행 문제 about smarteditor2 HOT 5 CLOSED

아하~ 뷰어화면에서 문제가 발생한다는 말씀이시군요..
이건 편집화면과 뷰어화면의 css차이로 인한 문제로 보입니다.

css속성중에 white-space라는 속성이 있는데 공백문자에 대해 줄바꿈처리해줄지를 정의합니다.
기본값이 normal이기 때문에 html문자열에 포함된 일반적인 공백문자( , \n, \t 등)는 줄바꿈하지 않고 보통은 무시됩니다.
하지만 pre, pre-wrap, pre-line등으로 지정하면 특정 조건에 따라 자동으로 줄바꿈해줍니다.
자세한 내용은 스펙문서 참고바랍니다.
https://developer.mozilla.org/ko/docs/Web/CSS/white-space

재현단계3에서 html문자열이 각 <span>뒤에 \n이 있어서 뷰어쪽 css에 정의된 white-space에 영향을 받은 것으로 보입니다.
해당 속성은 하위요소로 상속되기 때문에 아래 방법으로 해결이 가능할 것으로 보입니다.

• <p> 상위요소들 중에 white-space가 지정된 요소가 있는지 확인하여 제거하거나
• 다른 영역이 영향 받아 틀어질 수 있어서 제거하지 못할 경우 <p>를 감싸는 상위요소에 white-space: normal를 지정
• 만약 css 에 <p> 태그 셀렉터로 글로벌하게 white-space가 지정되어 있으면 한정 셀렉터로 변경

from smarteditor2.

안녕하세요~
우선 스마트에디터에 대한 관심 감사드립니다. ^^
재현절차를 상세히 적어주셨는데 안타깝게도 제 PC에서는 재현이 안되네요..ㅠ.ㅠ
제가 뭔가 놓친 부분이 있을까요?
에디터 입력 중에 위와 같은 현상이 재현되는 것인가요? 아니면 서버에 저장 후 뷰어 화면에서 개행되어 노출되는 것인가요?
재현하신 결과물의 html문자열을 알려주시면 도움이 될듯합니다.

from smarteditor2.

안녕하세요 @kyungilpark 님!

우선 첨부한 이미지중 첫번째는 에디터에서 작성한 내용이며, 두번째는 서버에 저장후 view화면의 내용입니다.

아래는 위 내용으로 폰트 크기와 서식을 변경한 이후 최종 생성된 html 입니다.

최종 생성된 html

<p>
  <span style="font-size: 12pt;">1. 전체 </span>
  <b><span style="font-size: 12pt;">글 작성 </span></b>    
  <span style="font-size: 12pt;">2. 일부 텍스트에 볼드처리 3. 전체 텍스트 폰트크기 변경</span>
</p>

혹시나 해서...단계별로 생성된 html도 첨부 해 봅니다.

재현방법 단계 1 (전체 글 작성) 이후 생성 된 html

<p>1. 전체 글 작성 2. 일부 텍스트에 볼드처리 3. 전체 텍스트 폰트크기 변경</p>

재현방법 단계 2 (일부 텍스트에 볼드 처리) 이후 생성 된 html

<p>1. 전체 <b>글작성</b> 2. 일부 텍스트에 볼드처리 3. 전체 텍스트 폰트크기 변경</p>

재현방법 단계 3 (전체 텍스트를 드래그하여 폰트 크기 변경) 이후 생성 된 html

<p>
  <span style="font-size: 12pt;">1. 전체 </span>
  <b><span style="font-size: 12pt;">글 작성 </span></b>    
  <span style="font-size: 12pt;">2. 일부 텍스트에 볼드처리 3. 전체 텍스트 폰트크기 변경</span>
</p>

전체 텍스트의 크기를 변경 할때(<span>태그로 감쌀 때), 텍스트 사이에 있는 <b>태그가 문제가 된것 같습니다.

전체 텍스트의 크기를 먼저 변경하고 이후 일부 텍스트만 볼드 처리할 경우엔 다음과 같이 하나의 <span>태그로만 감싸 집니다.

<p>
    <span style="font-size: 12pt;">1. 전체 <b>글 작성</b> 2. 전체 텍스트의 폰트 크기 변경 3. 일부 텍스트에 볼드 처리</span>
</p>

from smarteditor2.

안녕하세요 @kyungilpark 님!

우선 원인은 예상하신데로 뷰어화면의 css차이였습니다.
상세 원인은 뷰어화면에 사용되는 css 중 <span>의 display:block 스타일 때문이었습니다.
(display:inline 으로 변경하여 해결하였습니다.)

결과적으로 에디터와는 무관한 문제였는데, 친절하고 상세한 답변 감사합니다. 👍

from smarteditor2.

아하 white-space문제는 아니었군요..
절반은 헛다리 짚었지만 해결하는데 도움이 되셨다니 다행이네요~ :)
감사합니다.

from smarteditor2.