jquery - 누적 된 DOM 요소 통합

contenteditable div를 통해 서식이 지정된 HTML이 있습니다. 나는 그것을 더 간결하고 현대적인 HTML로 만들고 싶다. 나는 b, strong, em, font 등의 태그를 쉽게 대체 할 수 있고 span으로 대체 할 수 있지만 그 결과로 "스택 된"요소가 생성됩니다.jquery - 누적 된 DOM 요소 통합

<span style="font-weight:bold"> 
    <span style="text-decoration:underline">some text</span> 
</span>

내가보고 싶어 :

예를 들어, 내가있을 수 있습니다

<span style="font-weight:bold"> 
    <span style="text-decoration:underline">some text</span> not underlined 
</span>

나 ':

이

<span style="font-weight:bold; text-decoration:underline">some text</span>

어려운 부분이 처리해야 할 것입니다 이것에 대해 꽤 많은 조사와 생각을했지만, 합리적인 것을 찾지 못했습니다.

출처

2012-02-14 jopke

자바 스크립트로이 작업을 수행하려하십니까? –

@JamesMontagne 예. 사용자는 "contenteditable = true"div에 텍스트를 입력하고 전송되기 전에 정리하려고합니다. div의 HTML을 깨끗하게 유지하려고하지 않고 사용자가 완료되면 할 일이 필요합니다. 이미 캡처 한 이벤트입니다. – jopke

@jopke - 제출 버튼에서 contenteditable div를 정리해야하는 비슷한 요구 사항이있었습니다. 사물을 단순화하기 위해 useCSS를 false로 설정하고 html 스프를 정리합니다 (http://stackoverflow.com/questions/16226671/consolidate-stacked-dom-formatting-elements-contenteditable-div에서 해결책 3을 살펴보십시오). regex를 사용하여 b/span/s/u/i/em 태그를 적절한 CSS equiv로 신속하게 변환하십시오. Solution3은 모든 노드의 형식을 지정하므로 정규식을 통해 처리하려는 방식으로 형식을 재정렬 할 수 있습니다. –

음, 여기 시작됩니다. 분명히 선택자는 span보다 구체적 일 것입니다.

$("span").each(function(){ 
    var $this = $(this); 
    var $contents = $(this).contents(); 

    if($contents.length === 1 && $contents.is("span")){ 
     // only one child (including text nodes) and it is a span, combine 
     copyStylesFromParentToChild(); // need to implement this 

     $this.replaceWith($this.children()); // replace the parent with the child 
    } 
});

여기에 유일한 까다로운 부분은 copyStylesFromParentToChild이다. 한 요소에서 다른 요소로 모든 스타일을 복사하는 쉬운 쉬운 방법을 모르겠습니다. 시도해 볼 수 있습니다 JavaScript & copy style

출처

2012-02-14 20:21:20

이것은 합리적인 접근 방법처럼 보입니다. 나는 곧 그 장면을 줄 것이다 ... – jopke

jquery - 누적 된 DOM 요소 통합

답변

관련 문제