텍스트 영역 입력의 팝업 미리보기

사람들이 텍스트 영역에 입력 한 내용을 볼 수 있도록 게시물에 대한 미리보기 기능을 만들고 싶습니다. 포럼에서 bbcode를 사용하고 게시물에 html을 사용할 수 없으며 텍스트 상자의 ID는 "메시지"입니다.텍스트 영역 입력의 팝업 미리보기

누구든지 해당 게시물을 팝업 창에서 미리 볼 수있는 팝업을 만들 수 있습니까? 데이터베이스와 백?

정말 더 많은 정보를 제공해야

, 나는 실현 ... 기본적으로 우리가 클릭 할 것 제출 버튼

<input type=\"image\" src=\"newlayout/images/reply.png\" height=\"35\" width=\"109\" border=\"0\" alt=\"Submit\">

와

<textarea id=\"message\" name=\"message\" style=\"width:515; height:160; font-family: Verdana; font-size: 8pt; color: #000000\" onKeyDown=\"countit()\"></textarea>

의 형태로 게시물 양식을 의 양식은 데이터베이스에 삽입 된 다른 페이지로 전송됩니다. livejournal에있는 것과 같은 미리보기 버튼이 있어야합니다. 여기서 새 팝업이 만들어지고 게시물이 어떻게 보이는지 보여줍니다. livejournal의 소스 코드를 살펴본 결과 jQuery가 제공되었으므로 여기에 제공된 코드를 시도해 보았습니다. http://haacked.com/archive/2009/12/15/live-preview-jquery-plugin.aspx 그러나 이것은 아무 것도 나타나지 않았고 라이브 미리보기 아이디어가 마음에 들지 않았기 때문에 작동하지 않았습니다.

나는 여기에서 자바 스크립트 코드를 시도 : http://www.codingforums.com/showthread.php?t=174810하지만, 다시 한번, 그것은

은 내가 무엇을 포함해야하는 경우, 해줘, 그 좋은 정보를 희망 ... 아무것도 들고 오지 않았다 알아 :

출처

2012-02-11 Elizabeth

왜 PHP 태그? –

이 PHP 태그를 제거했습니다. 또한 무엇을 시도 했습니까? –

죄송합니다. 죄송합니다.사이트의 PHP와 나는 생각하지 않고 그것을 끝내 었음에 틀림 없다 : P Ben을 편집 해 주셔서 고마워요! 다른 페이지로 리다이렉션을 시도했지만 textarea에서 데이터를 가져 오지 않았습니다 ... 실사 업데이트를 위해 jQuery도 시도했지만 표시되지 않았습니다. – Elizabeth

이 질문은 "나를 위해 내 코드를 작성"에 가까워지고 있지만, 그냥 최선의 방법에 대한 도움을 얻으려고 노력하는 경우, 여기에 몇 가지 있습니다 :

깨끗한 버튼이 될 것이라고 (자바 스크립트를 통해) 양식의 action과 target을 변경하고 submit()을 시작합니다 ... 그러면 모든 데이터가 포스트를 통해 $ _POST 데이터를 가져 와서 템플릿을 흉내낼 수있는 템플릿 페이지로 보내집니다. 라이브 템플릿.

또는 JavaScript/Jquery에서 모든 필드 값을 가져 와서 자바 스크립트로 HTML 템플릿을 만든 다음 이것을 (a) 팝업 스타일처럼 보이는 페이지의 div에 전달할 수 있습니다. b)는 라이브 페이지를 모방 한 CSS를 가지고 있습니다.

이렇게하는 데는 여러 가지 방법이 있지만 둘 다 작동합니다. 당신이 뭔가를 시도하고 꽉 자리에 들어, 우리에게 알려주면 우리는 당신에게 손을주지.

출처

2012-02-11 19:30:33

도움이 될 수있는 경우 더 많은 정보를 편집 할 것입니다. "내 코드 작성"과 같은 질문을 던지서 미안합니다. 질문 할 때 조금 성급했습니다. – Elizabeth

두 번째 옵션과 다른 코드의 도움으로 해결했습니다. .... 이제 javascript document.write 형식의 출력을 BBcode XD에서 가져 오는 방법을 알아야합니다. 제안 해 주셔서 감사합니다! – Elizabeth

TinyCME 또는 CKEditor과 같은 WYSIWYG 편집기를 사용해 보시지 않겠습니까?

출처

2012-02-11 19:28:48

텍스트 영역에 keyup 이벤트를 바인딩하려고합니다. 사용자가 키를 놓을 때마다 함수가 실행됩니다. 그런 다음 함수는 텍스트 영역의 값을 잡고 BBCode에 대해 구문 분석합니다. 익숙하지 않습니다. 그런 다음 출력을 가져 와서 요소의 내용으로 배치합니다.

HTML :

<textarea id="myText"></textarea> 

<div id="preview"></div>

자바 스크립트 (jQuery를)

$(document).ready(function() { 

    var $textarea = $('#myText'), 
     $preview = $('#preview'); 

    $textarea.on('keyup', function() { 

     var $this = $(this), 
      output = $this.val(); 

     // Do something with the value of the code to parse out the BBCode stuff. 

     $preview.html(output); 

    }); 

});

출처

2012-02-11 19:31:41 Seth

텍스트 영역 입력의 팝업 미리보기

답변

관련 문제