브라우저에서 HTML 기반 뉴스 레터 편집 - "페이지 내부 페이지"디자인 패턴

Question

사용자가 미리 정의 된 템플릿을 기반으로 자신의 이메일 뉴스 레터를 만들 수있는 앱을 개발 중입니다.

나는 프로젝트 이름 등을 보여주는 페이지와 그 안에 배치 된 뉴스 레터를 가지고있다. 이 중 가장 간단한 솔루션 인 것으로 보이는 iframe을 사용하고 있습니다. 나는 그러나, 나는 그 iframe을 의심하기 시작하고, 편집 페이지에 있어요 이제

application page 
    iframe 
     html template with html content 

이 상황에 대한 솔루션입니다.

편집 페이지에서 뉴스 레터 템플릿 본문에 포함 된 편집기를 표시하여 사용자가 템플릿을 계속 보면서 편집 가능한 영역을 편집 할 수있게하고 싶습니다. 또한 새로운 버전을 저장하기 전에 미리보기를 보여주고 싶습니다.

그래서, 편집 화면과 같이 보일 것이다 : 나는 편집 가능한 뷰에 대한 iframe을 사용하는 경우, 지금

application page 
    html template containing the editable area 
     ckeditor allowing editing the editable area 

을 다음 ckeditor는 iframe을 내부에 포함되어야 할 것이다. 그리고 iframe을 제출하면 응용 프로그램 페이지가 새로 고쳐지지 않습니다. 이 솔루션 및 해결 방법은 지나치게 복잡하고/우결적으로 보입니다.

application page 
    iframe 
     html template containing the editable area 
      ckeditor allowing editing the editable area 

그래서 다른 해결책은 무엇입니까?

나는 뉴스 레터 템플릿의 CSS 스타일과 body 태그 콘텐츠를 가져 와서 앱 페이지 내에 표시 할 생각이다. 스타일을 적용 할 수있는 뉴스 레터 스타일과 충돌하지 않도록 앱에 고유하게 스타일을 정의해야합니다. 또한 템플릿을 제어 할 수 있으며 페이지 본문에 병합 할 영역을 식별 할 수 있습니다. 나는 동적으로 스타일과 body 태그의 내용을 추출해야하고 응용 프로그램 페이지에서 제대로 100 %를 표시 할 것입니다 확실하지 않다 원하는만큼

는

application page 
    merged html template css 
    html template body tag content 
     ckeditor allowing editing the editable area 

이 나에게 조금 깨지기 쉬운 느낀다.

나는 이것이 매우 일반적인 패턴이라고 생각하며 다른 사람들이 어떻게 문제를 해결했는지, 또는 어떻게 해결할 수 있을지 궁금해하십니까?

특히 프로세스 및 기술적 솔루션을 단순화하는 디자인 변경이있을 수 있는지 궁금합니다.

레일 3.2에 제작 중입니다.

Answer 1

나는 이와 비슷한 것을 만들었습니다. 필자는 FCK와 같은 WYSIWYG 편집기 사용을 고려했지만 자체 스타일을 제거하거나 텍스트 노드의 렌더링 스타일을 계산하는 것은 너무 번거 롭다.

대신 관련 요소에 contenteditable 속성을 사용했습니다.

백엔드에서 iframe은 변경 될 때마다 서버에 지속적으로 기록합니다. 잠재적으로 HTML5 저장소를 대신 사용하여 AJAX 호출 빈도를 줄일 수 있습니다.

이렇게하면 스타일을 완벽하게 제어 할 수 있습니다.