Ckfinder 增强 HTML 表单答案

【问题标题】：Ckfinder Enhancing HTML formsCkfinder 增强 HTML 表单
【发布时间】：2014-05-26 03:51:01
【问题描述】：

这个功能怎么做

我使用了 ckfinder。谢谢。

【问题讨论】：

【解决方案1】：

您将需要一个输入字段和一个按钮。输入框可以隐藏。

<script src="/ckfinder/ckfinder.js" type="text/javascript"></script>
<script type="text/javascript">
    function BrowseServer() {
        var finder = new CKFinder();
        finder.basePath = _finderBasePath;
        finder.selectActionFunction = SetFileField;
        finder.popup();
    }
    function SetFileField(fileUrl) {
        $("#ImageUrl").val(fileUrl); //ImageUrl is the Id of the input field
    }
    $(function () {
        $("#FileBrowse").on("click", BrowseServer); //FileBrowse is the Id of the button
    });
</script>

或者：要使其更具动态性，您可以使点击事件更通用。在按钮的 data-target 属性中输入字段的 Id。这样您就可以拥有多个实例，而无需复制/粘贴代码。

<input class="large" id="Image" name="Image" type="text" value="">
<input type="button" id="FileBrowseImage" value="Browse file" class="fileBrowse" data-target="Image">

<script type="text/javascript">
        $(function () {
            $(".fileBrowse").on("click", function () {
                var finder = new CKFinder();
                var target = $(this).attr('data-target');
                finder.selectActionFunction = function (fileUrl, data) {
                    document.getElementById(target).value = fileUrl;
                }
                finder.popup();
            });
        });
    </script>

【讨论】：