2013-09-25 2 views
0

에서 편집 , , 등 : http://xing.github.io/wysihtml5/나는 WYSIHTML5 편집기를 사용하고 WYSIWYG 편집기

이 편집기는 페이지에있는 iFrame을 추가하고있는 iFrame의 contenteditable 몸을 변경할 때마다 텍스트 영역을 업데이트합니다. 다른 많은 WYSIWYG 편집자와 비슷하기 때문에 다른 편집자에게도 적용해야합니다.

문제는 <html>, <head>, <body> 및 기타 중요한 기본 태그를이 편집기를 통해 편집 할 수있게하려는 것입니다. WYSIWYG 모드에서는 편집 할 수 없으므로 원시 코드 모드가 좋습니다.

이러한 태그를 활성화하면 해당 태그가 이미 iFrame의 페이지에서 열려 있기 때문에 브라우저에서 태그를 제거합니다. 그래서 원시 코드와 WYSIWYG 모드 사이를 전환하면 손실됩니다.

기본 "고급"파서 규칙을 사용하여 다음과 같이 병합합니다. http://pastebin.com/6QvYkqm4, jQuery의 재귀가 $.merge()입니다.

이 플러그인을 어떻게 사용할 수 있습니까? 플러그인을 잘못 구성 했습니까? 파서 규칙에서 태그를 사용하도록 설정했는지 확인합니다.

+1

분할에서 살펴 보셔야합니다, 저장 한 다음 다시 끼워 . 텍스트 영역에서 머리를 편집하거나 XML 엔터티를 이스케이프하고 contenEditable div에서 편집 할 수 있습니다. 나는 단순화를 위해 textarea를 추천한다. wysiwyg 편집기의 전체 "edit as html"토글은 개발 작업에 편리합니다. – dandavis

답변

1

심지어는 JQuert TE WYSIHTML 텍스트 영역 편집기로 사용하는 것이 좋습니다. 버그 투성이이지만 많은 다른 것들과 비교하면 훨씬 좋습니다.

WYSIHTML 편집기가 이러한 태그를 검색하여 빌드 된 JavaScript 라이브러리이며 보안 결함이 아니기 때문에 삭제합니다. 왼쪽에있는 경우 사이트 레이아웃을 왜곡합니다. 사용자가 페이지 헤더를 변경하는 경우를 상상해보십시오. . 이러한 기능을 실제로 구현하려는 경우 WYSIHTML5의 라이브러리에서 해당 태그를 삭제하고 해당 특정 태그를 인식하지 못하도록 코드를 변경하는 것이 좋습니다. 행운을 빕니다.

편집 :

예 :

"head": { 
     "remove": 1 
}, 

을 교체 :

"head": { 
     "rename_tag": "head" 
    }, 
WYSIHTML5 선택 advanced.js 또는 basic.js의 폴더 parser_rules에서 찾아 (당신이 사용중인 따라 다름)

원하는 규칙을 설정할 때까지 다른 규칙으로이 프로세스를 반복하십시오. WYSIWYG textarea 편집기에는 모두 다른 JavaScript 라이브러리가 있지만 사용자가 사용하는 편집기는 편집하기에 충분히 간단합니다.

+0

머리와 몸을 제거하는 js wysiwiwyg libs가 아니라 브라우저의 html 파서입니다. – dandavis

+0

Ive가 내 대답을 편집했습니다. 도움이 되었기를 바랍니다. –

0

WYSIWYG 편집기는 head 또는 페이지의 마크 업을 "볼"(스타일 형식) 할 수 없으므로 원하는 해결책이 아닙니다. 당신은 [0] 에디터를 채우는 (/ /I)에 http://codemirror.net/

HTML example page