jQuery를 사용하는 IPWEditor

jQuery와 함께 IPWEditor 모듈을 작성하려고합니다.jQuery를 사용하는 IPWEditor

주요 작업은 div를 드래그 할 수 있고 div가 div를 두 번 클릭하면 div가 편집 가능하게되며 다른 것은 버튼을 클릭 할 때 새 div를 추가하는 버튼입니다. .

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<script type="text/javascript" src="jquery-1.3.2.js"></script> 
<script type="text/javascript" src="jquery.ipweditor-1.2.1.js"></script> 
<script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce_src.js"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.js"></script> 
<script> 
    $(function() { 
     $('.text').live('click', function() { 
      $(this).draggable({containment: 'parent'}); 
     }); 

     var ed = new tinymce.Editor('content', { 
      mode: "exact", 
      theme: "advanced", 
      plugins: "emotions,table", 
      theme_advanced_toolbar_location: "top", 
      theme_advanced_statusbar_location: "bottom", 
      theme_advanced_resizing: true, 
      theme_advanced_buttons1: "bold,italic,underline,strikethrough,sup,sub,charmap,fontselect,fontsizeselect,forecolor,backcolor,", 
      theme_advanced_buttons2: "copy,paste,undo,redo,|,hr,blockquote,bullist,numlist,outdent,indent,justifyleft,justifycenter,justifyright,|,image,emotions,", 
      theme_advanced_buttons3: "", 
      table_default_cellspacing: 0, 
      table_default_border: 1, 
      remove_linebreaks : false 
     }); 

     $('.test').live('dblclick',function(){ 
      $(this).editable({ 
       tooltip : "", 
       indicator : 'Saving...', 
       type: 'wysiwyg', 
       editor: ed, 
       submit:'save', 
       cancel:'cancel' 
      }); 
     }); 

    }); 

    function displaymessage() 
    { 
     $(".boxContainer").append("<div class='text test' style='width: 280px' onClick='$(this).addClass(&#39;selectedBorder&#39;)' onmouseout='$(this).removeClass(&#39;selectedBorder&#39;)'> Click me! I am editable and WYSIWYG!!!</div>"); 
    } 
</script> 
<style> 
    p {margin:0; padding: 0;} 
    .text {cursor:pointer; line-height: 100%; border: 1px dotted transparent;} 
    .selectedBorder {border: 1px dotted black;} 
</style> 


</head> 
<body>  
<div class="boxContainer" style="border: solid thin gray; width: 1000px; height: 500px"> 
    <div class="text test" style="width: 280px" onClick="$(this).addClass('selectedBorder')" onmouseout="$(this).removeClass('selectedBorder')"> 
     <b> Click me! I am editable and WYSIWYG!!!</b> 
    </div> 
</div> 
<button type="button" class="newBox" onclick="displaymessage();">Add new box</button> 
</body> 
</html>

지금 주요 문제에, 나는 "새로운 상자를 추가"버튼을 클릭하면, 새로운 사업부가 나타납니다

은 어디 소스 코드입니다. div는 draggable이고 div를 두 번 클릭하면 div가 편집 가능하지만 save 버튼을 클릭하면 아무 일도 일어나지 않습니다.

누구나 내게 힌트를 주거나 도와 줄 수 있습니까?

대단히 감사합니다.

최고 감사합니다/조니

출처

2011-03-22 Johnny Ha

다음은 요소가되는 에디터를 초기화하기 놓여있는 양식을 제출 버튼을 저장합니다. 그러나 나는 당신의 html에있는 어떤 모양도 볼 수 없다 !!! 저장 버튼은 편집기 내용을 스크립트에 제출하여 데이터베이스에 저장할 수있는 유일한 방법입니다.

출처

2011-03-22 12:01:34 Thariama

아직 데이터베이스에 저장하고 싶지 않습니다. 아주 잘 작동 사업부

Click me! I am editable and WYSIWYG!!!

와 내 첫 번째 테스트, 나는 변경 내용을 편집하고 저장 할 수 있습니다. 그러나 버튼으로 새 div를 추가 할 때. 저장 버튼을 클릭하면 새 div가 저장되지 않습니다. –

div로 무엇을하는지 정확히 설명하는 것이 도움이 될 수 있습니다. 무엇을 어떻게 저장합니까? – Thariama

아마 지금 문제가 무엇인지 알 수 있습니다. DOM이 이미로드되었으므로 첫 번째 div는 저장하고 편집 할 수 있습니다. DOM을로드 한 후 새 상자 추가를 클릭하면 두 번째 div가 표시됩니다. 그래서 나는 새 div를 serializer 할 수 없다. "t.serializer가 정의되지 않았습니다."라는 문제가 발생했습니다. DOM을 다시로드하는 방법이 있습니까? –

jQuery를 사용하는 IPWEditor

답변

관련 문제