实现 jquery UI 自动完成以在您键入“@”时显示建议；在 jquery.wysiwyg 富文本编辑器中

发布于 2024-11-07 01:25:01 字数 4124 浏览 0 评论 0原文

我有类似的要求链接，就像当用户在 jquery.wysiwyg 富文本编辑器中输入 @ 时我必须自动建议一样，上面的代码链接代码对于输入类型文本和文本区域工作正常，但不适用于富文本编辑器。

<!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.core.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>

因此，如果我在文本区域中删除

$('#tags').wysiwyg({
autoGrow: true,
maxHeight: 250,
focusEditor: true
});

此代码，它可以工作，但不能在富文本编辑器中工作。因此，请指导我，以便我可以在富文本编辑器中实现相同的功能。

谢谢。

原文

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.core.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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据

关于作者

潇烟暮雨

暂无简介

0 文章

0 评论

22 人气

关注发私信

lorenzathorton8

文章 0 评论 0

关注

Zero

文章 0 评论 0

关注

萧瑟寒风

文章 0 评论 0

关注

mylayout

文章 0 评论 0

关注

tkewei

文章 0 评论 0

关注

17818769742

文章 0 评论 0

友情链接

文江博客

实现 jquery UI 自动完成以在您键入“@”时显示建议；在 jquery.wysiwyg 富文本编辑器中

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

关于作者

相关话题

热门标签

推荐作者

lorenzathorton8

Zero

萧瑟寒风

mylayout

tkewei

17818769742

友情链接

实现 jquery UI 自动完成以在您键入“@”时显示建议；在 jquery.wysiwyg 富文本编辑器中

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

关于作者

相关话题

热门标签

推荐作者

lorenzathorton8

Zero

萧瑟寒风

mylayout

tkewei

17818769742

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。