在Tinymce中使用jQuery - 特别添加一个按钮以使div可以拖动

时间:2013-09-10 12:22:39

标签: jquery css tinymce draggable

我对jQuery和tinymce都不熟悉 - 已经搞了一个星期左右。

我已经启动了jQuery版本的tinymce - 如果我错了就纠正我 - 我认为这将允许我在编辑器实例中使用jQuery - 对吗?

我使用tinymce实例通过名为content的div标签覆盖整个页面。

我在tinymce实例中添加了一个按钮,允许我向编辑器添加一个可调整大小的div:

   setup :    function(ed) {
            ed.addButton('mybutton', {
                title : 'My button',
                image : 'img/example.gif',
                onclick : function() {
                    var aHtml = 
                        '<div class="isResizable">hello'+  
                        '</div>';
                    tinyMCE.activeEditor.focus();
                    tinyMCE.activeEditor.execCommand('mceInsertContent', false, aHtml);

                }

            });

对于resizable我使用CSS:

       .isResizable {
        background: rgba(255, 0, 0, 0.2);
        border: 1px solid black;
        overflow: hidden;
        resize: both;
        width: 160px;
        height: 120px;
    }

我现在试图想出一种方法来使新插入的div元素可拖动。有没有人知道如何通过向tinymce实例添加一个新按钮来禁用其可编辑状态并启用可拖动状态?

我可以将jquery功能添加到如上所述在tinymce初始化中创建的新按钮吗?

任何其他解决方案都会非常感激,因为我的头现在已经痛得把它从墙上敲下来。

我用按钮改变了我创建的div:

<div id ="cheese" class="isResizable" draggable="true" ondragstart="drag(event)">hello</div>

并包含用于在页面上拖放的javascript函数。

Draggable true出现在新div中,但未插入ondragstart部分 - 因此没用。

想出来,没有jQuery要求我只是忘了把div位置绝对地放在css..duhhh !! !!

0 个答案:

没有答案