Implementing jquery UI autocomplete to show suggestions when you type “@” in jquery.wysiwyg rich text editor
I have similar requirementas of link , like i have to autosuggestion when user types in @ in jquery.wysiwyg rich text editor , the above code link code is working fine for input type text and textarea but not working for rich text editor.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.5.1.js"></script>
<script src="../../ui/jquery.ui.co开发者_运维知识库re.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.position.js"></script>
<script src="../../ui/jquery.ui.autocomplete.js"></script>
<script src="jwysiwyg/jquery.wysiwyg.js"></script>
<link rel="stylesheet" href="../demos.css">
<link rel="stylesheet" href="jwysiwyg/jquery.wysiwyg.css" type="text/css" />
<script>
$(function() {
$('#tags').wysiwyg({
autoGrow: true,
maxHeight: 250,
focusEditor: true
});
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
function split(val) {
return val.split(/@\s*/);
}
function extractLast(term) {
return split(term).pop();
}
$("#tags")
// don't navigate away from the field on tab when selecting an item
.bind("keydown", function(event) {
if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) {
event.preventDefault();
}
}).autocomplete({
minLength: 0,
source: function(request, response) {
var term = request.term,
results = [];
/* If the user typed an "@": */
if (term.indexOf("@") >= 0) {
term = extractLast(request.term);
/* If they've typed anything after the "@": */
if (term.length > 0) {
results = $.ui.autocomplete.filter(
availableTags, term);
/* Otherwise, tell them to start typing! */
} else {
results = ['Start typing...'];
}
}
/* Call the callback with the results: */
response(results);
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function(event, ui) {
var terms = split(this.value);
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value);
// add placeholder to get the comma-and-space at the end
terms.push("");
this.value = terms.join("");
return false;
}
});
});
</script>
</head>
<body>
<div class="demo">
<div class="ui-widget">
<label for="tags">Tags: </label>
<textarea id="tags" ></textarea>
</div>
</div><!-- End demo -->
<div class="demo-description">
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try.</p>
<p>The datasource is a simple JavaScript array, provided to the widget using the source-option.</p>
</div><!-- End demo-description -->
</body>
<script>
</script>
</html>
so if i remove
$('#tags').wysiwyg({
autoGrow: true,
maxHeight: 250,
focusEditor: true
});
this code in textarea it is working but not in rich text editor. So please guide me so that i can achive same functionality in rich text editor.
Thanks.
加载中,请稍侯......
精彩评论