fckeditor编辑器的两种使用方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了fckeditor编辑器的两种使用方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

需要的资源包我放我资源里了，不要积分

https://download.csdn.net/download/wybshyy/88245895

首先把FredCK.FCKeditorV2.dll添加到引用

具体方法如下，一个是客户端版本，一个是服务器端版本

客户端版本：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CaseTemplate_ADD.aspx.cs" Inherits="MyProject.CaseTemplate_ADD" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>编辑</title>
    <link href="/JS/layui/css/layui.css?v=1.0" rel="stylesheet" />
    <link href="/layuiadmin/style/admin.css?v=1.0" rel="stylesheet" />
    <script src="/JS/jquery-3.4.1.js?v=1.0"></script>
    <script src="/layuiadmin/layui/layui.js?v=1.0"></script>
    <script src="/layuiadmin/lib/admin.js?v=1.0"></script>
    <script src="/JS/layui/layui.js?v=1.0"></script>
    <script src="/kfckeditor/fckeditor.js?v=1.0"></script>

</head>
<body>

    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body" style="padding: 15px;">
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label">名称</label>
                        <div class="layui-input-block">
                            <input type="text" id="names" lay-verify="names" autocomplete="off" placeholder="请输入名称" class="layui-input" value="<%=strNames %>" />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">模板内容</label>
                        <div class="layui-input-block">
                            <script type="text/javascript">
                                var fckeditor = new FCKeditor('FCKeditor1');//新建一个fckeditor实例
                                fckeditor.BasePath = "/kfckeditor/";//设置编辑器的位置,该位置一定要以/结尾，这个basepath是指 fckeditor文件夹下所有文件的地址，默认值是这个，但是我们一般前面还要加上工程的名字，如/prj/fckeditor/这样
                                fckeditor.Create();//创建并且调用一个fckeditor编辑器
                            </script>
                        </div>
                    </div>
                </form>
                <div class="layui-form-item layui-layout-admin">
                    <div class="layui-input-block">
                        <div class="layui-footer" style="left: 0;">
                            <button class="layui-btn sim_btn">提交</button>
                            <input type="button" id="btnReset" class="layui-btn layui-btn-primary" value="重置" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <input type="hidden" id="hdid" value="<%=strid %>" />
    <script type="text/javascript">
        //这里一定要设置全局变量，不然下面用的时候，未定义
        var layer, form, laypage, laydate, upload, layedit, indexs01, indexs02, indexs03;
        $(function () {
            layui.use(['index', 'layer', 'form', 'laypage', 'laydate', 'upload', 'jquery', 'layedit'], function () {
                layer = layui.layer;
                form = layui.form;
                laypage = layui.laypage;
                laydate = layui.laydate;
                upload = layui.upload;
                layedit = layui.layedit;//注册layedit
                var $ = layui.jquery;

            });


            //提交表单
            $("body").on("click", ".sim_btn", function () {
                saveData();
            });


        });


        function saveData() {
            var errorMsg = "";
            var id = $("#hdid").val();
            var names = $("#names").val();//
            var contents = $("#xEditingArea").html();//
            //var oEditor = FCKeditorAPI.GetInstance('FCKeditor1');
            var oEditor = FCKeditorAPI.GetInstance("FCKeditor1");
            

            alert(oEditor.GetXHTML(true));//获取FCK编辑器里的值
            alert(FCKeditor1);
            alert(FCKeditor1___Config);
            return false;
            if (names == "") {
                errorMsg = "请输入名称";
            }
            //if (names == "") {
            //    errorMsg = "请输入姓名";FCKeditor1  FCKeditor1___Config
            //}
            if (errorMsg != "") {
                layer.msg(errorMsg, { icon: 7 });
                return false;
            }
            loadIndex = layer.load(0);
            var url = "/CaseTemplate_ADD.aspx";
            $.ajax({
                type: "POST",
                url: url,
                dataType: "JSON",
                data: { 'action': 'SaveData', 'id': id, 'typeID': typeID, 'names': names, 'links': links, 'isShow': isShow, 'orderNum': orderNum },
                success: function (result) {
                    if (result.State) {
                        layer.close(loadIndex);
                        layer.msg("操作成功", { time: 1000 });
                        setTimeout(closeRefresh, 1000);//关闭当前iframe，刷新指定iframe
                    }
                    else {
                        layer.msg(result.ErrorMsg, { time: 3000 });
                    }
                }, complete: function (result) {
                    layer.close(loadIndex);
                }
            });
        }



    </script>
</body>
</html>

服务器端

先在配置文件里配置好，再把资源包放项目里

</appSettings>

代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test02.aspx.cs" Inherits="MyProject.Test02" %>
<%@ Register Assembly="FredCK.FCKeditorV2" Namespace="FredCK.FCKeditorV2" TagPrefix="FCKeditorV2" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1">
        <div>0000
            <FCKeditorV2:FCKeditor ID="FCKeditor1" runat="server" Height="480px">
            </FCKeditorV2:FCKeditor>
        </div>
    </form>
</body>
</html>

取值后台用FCKeditor1.value就可以了，提交按钮必须要加runat="server" 文章来源地址https://www.toymoban.com/news/detail-675730.html

到了这里，关于fckeditor编辑器的两种使用方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！