I have a problem with my WYSIWYG-Editor, it works in FF but not in Chrome :(
Here's the code:
$.fn.textEdit = function(){
return this.each(function(){
var $this = $(this), $div = $('<div class="textEdit"></div>');
var $buttonObserve = function(cmd,b,val){
document.execCommand('styleWithCSS', 0, false);
document.execCommand(cmd, b||false, val||null);
};
$this.before($div);
$this.attr({contentEditable:true})
$($div).append(
$('<div/>').addClass('textEditBold').text('F').attr('title','Fett')
.click(function(){ $buttonObserve('bold') })
).append(
$('<div/>').addClass('textEditItalics').text('K').attr('title','Kursiv')
.click(function(){ $buttonObserve('italic') })
).append(
$('<div/>').addClass('textEditUnderline transparent').text('_').attr('title','Unterstrich').css('background', 'url(data:image/gif;base64,R0lGODlhFgAWAKECAAAAAF9vj////////yH5BAEAAAIALAAAAAAWABYAAAIrlI+py+0Po5zUgAsEzvEeL4Ea15EiJJ5PSqJmuwKBEKgxVuXWtun+DwxCCgA7) no-repeat 0 1px')
.click(function(){ $buttonObserve('underline') })
).append(
$('<div/>').addClass('delete').text('Deactivate-Edit').attr('title','Stop-Edit')
.click(function(){ $this.parents('#page2').find('.editable').removeClass('editable').removeAttr('contentEditable');
$this.parents('#page2').find('.textEdit').remove('.textEdit'); })
);
});
};
This function get activated if the user click on an p, div elemt and so on, it will create 4 buttons, for make the text: Bold, italic, underlined, oder delete the buttons.
The Problem is: If i select the text and press a button, nothing happens, just the delete button works.
I think Chrome doesn't accept my selected text.
I hope u guys can help me! :)
Looks like execCommand()
support has been removed from Webkit.
QuirksMode doesn't even list the later browsers in the support matrix.
https://groups.google.com/a/chromium.org/forum/?fromgroups=#!topic/chromium-extensions/QytGD5gCREY
To get the selected text you could follow this method
How to replace selected text with html in a contenteditable element?