2

안녕하세요. 현재 편집 페이지의 모양이 인 클라이언트 용 CMS를 구축하기 위해 노력하고 있습니다. 렌더링 된 페이지는 정확히입니다.Firefox/Webkit 용 컨텐츠 편집 헬퍼 플러그인은 무엇입니까?

따라서 iframe 기반 WYSIWYG을 원하지 않습니다. contenteditable에 대한 래퍼를 찾고 있는데 Firefox와 Webkit의 차이점을 없애고 있습니다.

인스턴스의 그것에 웹킷 결과 같은 이벤트가 태그로 묶인되는 동안
태그에 파이어 폭스 결과에 "키를 눌러 입력합니다."

편집기에 대한 제안 사항이 없으면이 문제를 해결할 수 있습니까? 내가 먼저 고정 방식은 execCommand가 "을 취소"다음 insertHTML를onKeyUp에 이벤트를 확인하고 사용하는 것이 었습니다 "< BR />"잘 작동하지만 문제는 사용자 경우입니다

목록에 있고, 그들은 다음 목록 요소가 생성되지만 줄 바꿈으로 끝나기를 기대하는 입력을 누릅니다. Enter 키를 눌렀을 때 캐럿의 위치가 무엇인지 감지하여 < br /> 삽입 동작을 건너 뛸 수 있습니까?

이상적으로는 < br />보다 오히려 텍스트 블록을 < p> 태그에 캡슐화하여 SEO 목적으로 캡슐화하고 싶지는 않지만이를 해결할 수도 없었습니다.

도움이 될 것입니다.

답변

0

콘텐츠 편집과 관련하여 브라우저간에 약간의 차이가 있습니다. 모든 차이점을 없애는 라이브러리에 대해서는 잘 모르겠다. 그런 라이브러리를 작성하는 사람이라면 누구나 브라우저 기반의 WYSIWYG 편집기 만 쓰면 될 것이라고 생각한다. 그렇다면 아마도 가장 큰 방법은 TinyMCECKEditor과 같은 큰 오픈 소스 편집자가 어떻게하는지 살펴 보는 것일 것입니다.

2

알로하 편집기가 좋습니다. 구글 그것.

+0

@Nikhil 투표 해 주셔서 감사합니다. 나는 또한 페이지 편집에 CMS 인 KitGUI.com을 썼다. 내 프로필에서 볼 수 있습니다. 페이지에서 얼마나 부자인지 알기 위해 Aloha 편집기를 최종 목표로 사용하고 있습니다. 인라인 편집기가 있지만 매우 평범합니다. –

0

TinyMCE v3.5.2의 소스 코드에는 'content_editable'이라는 구성 속성이 있습니다. 이 플래그는 iframe이 렌더링되지 못하게합니다. 발행 된 문서는이 플래그에 대해 아무 것도 말하지 않습니다. 나는 그 깃발이 깊이 시험받지 않았기 때문이라고 추정합니다.

내가 contenteditable div에서 TinyMCE를 호출하고 모든 TinyMCE UI를 사용 중지했습니다. 기본 기능이 제대로 작동하는 것 같습니다.

초기화 옵션 :

$('#editor').tinymce({ 
     script_url: '/tinymcecustom/tiny_mce_jquery.js', 
     content_editable: true, 
     theme: "simple" 
    }); 

HTML을 마크 업 (테마 폴더 안에)

<div id="editor" contenteditable="true" style="height: 900px"></div> 

EditorTemplate.js :이 투쟁하는 복잡한 지역이다

(function() { 
tinymce.create('tinymce.themes.SimpleTheme', { 
    init: function (ed, url) { 
     this.editor = ed; 
    }, 
    renderUI: function (o) { 
     return { 
      editorContainer: this.editor.id 
     }; 
    } 
}); 
tinymce.ThemeManager.add('simple', tinymce.themes.SimpleTheme); })(); 
0

와 맞아. 또한 사용자에게 콘텐츠 붙여 넣기를 허용하는 경우 iFrame을 사용하는 것이 올바른 결과를 보장하고 페이지를 망칠 수있는 최선의 방법입니다.

알로하 편집기, TinyMCE에 등 오히려 크고 부풀어 있습니다. 나는 당신이 WYSIHTML5 https://github.com/xing/wysihtml5, http : www.createjs.org를 보거나 더 단순한 것인데 https://github.com/mquan/freshereditor을 제안하지만 나는이 단순한 접근법을 추천하지 않는다.