Javascript 带jQuery的IPWEditor_Javascript_Jquery_Jquery Ui_Jquery Plugins_Tinymce

Javascript 带jQuery的IPWEditor

javascript jquery jquery-ui jquery-plugins tinymce

Javascript 带jQuery的IPWEditor,javascript,jquery,jquery-ui,jquery-plugins,tinymce,Javascript,Jquery,Jquery Ui,Jquery Plugins,Tinymce,我正试图用jQuery编写一个带有IPWEditor的模块主要任务是能够拖动一个div，当用户双击该div时，该div将使用Tinymce进行编辑，另一件事是有一个按钮可以在单击该按钮时添加一个新div 源代码在哪里： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <meta http-e

我正试图用jQuery编写一个带有IPWEditor的模块

主要任务是能够拖动一个div，当用户双击该div时，该div将使用Tinymce进行编辑，另一件事是有一个按钮可以在单击该按钮时添加一个新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>


$（函数（）{
$（'.text'）.live（'click'，function（））{
$（this.draggable（{containment:'parent'}）；
});
var ed=new tinymce.Editor（'content'{
模式：“精确”，
主题：“高级”，
插件：“情感，表格”，
主题\高级\工具栏\位置：“顶部”，
主题\高级\状态栏\位置：“底部”，
主题\u高级\u大小调整：正确，
主题高级按钮1：“粗体、斜体、下划线、删除线、sup、sub、字符映射、字体选择、字体大小选择、前景色、背景色，”，
主题_高级_按钮2：“复制、粘贴、撤消、重做、|、hr、blockquote、bullist、numlist、outdent、缩进、左对齐、中对齐、右对齐、|、图像、情感，”，
主题\高级\按钮3:“”，
表\u默认\u单元格间距：0，
表\u默认\u边框：1，
删除换行符：false
});
$（'.test'）.live（'dblclick'，function（））{
$（此）。可编辑({
工具提示：“”，
指标：“正在保存…”，
类型：“所见即所得”，
艺术经纬：埃德，
提交：'保存'，
取消：'取消'
});
}); 
}); 
函数displaymessage（）
{
$（“.boxContainer”）.append（“单击我！我可编辑且所见即所得！！！”；
}
p{margin:0；padding:0；}
.text{光标：指针；线条高度：100%；边框：1px透明点；}
.selectedBorder{边框：1px点黑色；}
点击我！我是可编辑的，所见即所得！！！
添加新框

现在来看主要问题，当我单击“添加新框”按钮时，会出现一个新的div。该div是可拖动的，当我双击新的div时，该div是可编辑的，但当我尝试单击save按钮时，什么也没有发生

谁能给我一个提示或帮助我

事先非常感谢

致以最诚挚的问候/Johnny

保存按钮将提交您初始化编辑器的元素所在的表单。但我看不到任何形式在您的html！！！“保存”按钮只是一个触发器，用于将编辑器内容提交到脚本，并将其存储到db。

我还不想存储到db。我第一次用div测试点击我！我是可编辑的，所见即所得！！！效果很好，我可以编辑和存储更改。但是当我添加一个带有按钮的新div时。当我单击“保存”按钮时，新的div不会保存。如果您准确描述如何处理div，可能会有所帮助。你在哪里储存什么以及如何储存？我可能知道现在的问题是什么。DOM已经加载，这就是我的第一个div可以保存和编辑的原因。当我单击AddNewBox时的第二个div是在加载DOM之后。这就是我无法序列化新div的原因。它遇到了“t.serializer未定义”问题。有没有重新加载dom的方法？您可以使用：window.location.href=window.location.href；