disable dragging in ckeditor

问题:

I am facing an issue with my ckeditor. I am loading an entire page of HTML into the ckeditor. It's loading and showing fine. I want to let users edit only the data (texts), but not its alignment. But in editor each div is draggable (like the textbox in office word). How can I lock these areas.

回答1:

You might consider using Jeditable instead of ckeditor. That way you can individually allow users to edit each text block.

回答2:

I've used the following JS code before to disable text selection. You might be able to use it to bind to the div/whatever holds the ckeditor instance. Note that this would also prevent the user from being able to select text (for instance to copy/cut/etc).

// From http://chris-barr.com/entry/disable_text_selection_with_jquery/
$(function(){
    $.extend($.fn.disableTextSelect = function() {
        return this.each(function(){
            if($.browser.mozilla){//Firefox
                $(this).css('MozUserSelect','none');
            }else if($.browser.msie){//IE
                $(this).bind('selectstart',function(){return false;});
            }else{//Opera, etc.
                $(this).mousedown(function(){return false;});
            }
        });
    });
    $('.noSelect').disableTextSelect();//No text selection on elements with a class of 'noSelect'
});

回答3:

Have you added custom styles to the div element? In my case, the problem was that I had some styling - especially overflow: hidden. Removing the overflow, height and min-height rules helped for me: the handles disappeared.

Note that you can still add the rules where you actually display the content.