IPWEditor with jQuery
I am trying to write a module with IPWEditor with jQuery.
The main task is to be able to drag a div around and the div will be editable with Tinymce when a user double clicking on the div, another thing is there is a button that add a new div when clicking on the button.
Where is the source code:
<!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() {
开发者_Go百科 $(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('selectedBorder')' onmouseout='$(this).removeClass('selectedBorder')'> 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>
Now to the main problem, when I click on the "Add new box" button, a new div appear. The div is draggable and when I double click on the new div, the div is editable but when I try to click on the save button, Nothing happens.
Can anyone give me a hint or help me.
Thank you very much in advance.
Best Regards / Johnny
The save button will submit the form in which the element lies for which you init the editor. But i cannot see any form in your html!!! The save button is only a triggger to submit the editor content to a script where it can be stored to a db.
加载中,请稍侯......
精彩评论