IPWEditor с jQuery - PullRequest
Новая
       21

IPWEditor с jQuery

1 голос
/ 22 марта 2011

Я пытаюсь написать модуль с IPWEditor с jQuery.

Основная задача - иметь возможность перетаскивать div вокруг, и div будет редактироваться с Tinymce, когда пользователь дважды щелкает по 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. Div можно перетаскивать, и когда я дважды щелкаю на новом div, div можно редактировать, но когда я пытаюсь нажать на кнопку сохранения, ничего не происходит.

Может кто-нибудь дать мне подсказку или помочь мне.

Большое спасибо заранее.

С наилучшими пожеланиями / Джонни

1 Ответ

0 голосов
/ 22 марта 2011

Кнопка «Сохранить» отправит форму, в которой находится элемент, для которого вы инициируете редактор. Но я не вижу никакой формы в вашем HTML! Кнопка сохранения - это всего лишь триггер для отправки содержимого редактора в сценарий, где оно может быть сохранено в БД.

...