ASP.Net KindEditor放在包含模版页的页面里不显示

主题: ASP.Net KindEditor放在包含模版页的页面里不显示

作者: 靚靚, 发布日期: 2013-04-16 09:48:59, 浏览数: 8851

KindEditor放在套用模板页的页面里不显示，和普通的textbox没任何区别？谁知道这是什么问题？在线等待！js无任何报错。测试了在无模板的页面上原封不动的代码咱贴过去直接显示编辑器
在有模板的页面上不显示编辑器是什么问题？难道不能使用在有模板的页面上吗？？？跪拜答案。。。。

在模板页下面调用的

<link rel="stylesheet" href="../kindeditor-4.1.6/themes/default/default.css" />
<link rel="stylesheet" href="../kindeditor-4.1.6/plugins/code/prettify.css" />

在页面下调用的这些

<script charset="utf-8" src="../kindeditor-4.1.6/kindeditor.js" type="text/javascript"></script>
    <script charset="utf-8" src="../kindeditor-4.1.6/lang/zh_CN.js" type="text/javascript"></script>
    <script charset="utf-8" src="../kindeditor-4.1.6/plugins/code/prettify.js" type="text/javascript"></script>
    <script type="text/javascript">
        KindEditor.ready(function (K) {
            var editor1 = K.create('#content', {
                cssPath: '../kindeditor-4.1.6/plugins/code/prettify.css',
                uploadJson: '../kindeditor-4.1.6/asp.net/upload_json.ashx',
                fileManagerJson: '../kindeditor-4.1.6/asp.net/file_manager_json.ashx',
                allowFileManager: true,
                afterCreate: function () {
                    var self = this;
                    K.ctrl(document, 13, function () {
                        self.sync();
                        K('form[name=example]')[0].submit();
                    });
                    K.ctrl(self.edit.doc, 13, function () {
                        self.sync();
                        K('form[name=example]')[0].submit();
                    });
                }
            });
            prettyPrint();
        });
    </script>

作者: 在下民农, 发布日期: 2013-04-16 10:21:45

同问，IE正常，firefox用create创建界面出来了没有获得焦点，不能编辑空白一片。点击全屏后才能正常使用，而且我用firebug查看DOM发现刷新一次就会创建一个对象，就算我进行remove操作，编辑器虽然不见了，但对象还存在。

kindeditor在firefox 下的问题特别大,应该也是存在的bug吧，希望能够得到解决。

作者: 靚靚, 发布日期: 2013-04-16 10:31:19

回复在下民农：你在IE下还能显示？问题是我在哪个浏览器下都不显示。只要放在模板页的内容页里就不显示。。在普通页面下面直接粘贴过去运行。。直接显示，，~你能在模板页的内容页下面显示吗

作者: 愉快装傻, 发布日期: 2013-04-16 10:39:51

调试的时候看看引用KindEditor的路径正确不正确。

作者: 在下民农, 发布日期: 2013-04-16 10:45:24

回复靚靚：我是php的模版页面，我IE都正常的，就firefox有问题。弹出窗体中编辑器不能获焦点，网上也找不到相关的资料，急死人啊

作者: 愉快装傻, 发布日期: 2013-04-16 10:49:48

模板页：

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="test.master.cs" Inherits="kindeditor.NewFolder1.test" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="Kindeditor/themes/default/default.css" />
<link rel="stylesheet" href="Kindeditor/plugins/code/prettify.css" />
<script charset="utf-8" src="Kindeditor/kindeditor.js"></script>
<script charset="utf-8" src="Kindeditor/lang/zh_CN.js"></script>
<script charset="utf-8" src="Kindeditor/plugins/code/prettify.js"></script>
<script>
KindEditor.ready(function (K) {
var editor1 = K.create('#content1', {
cssPath: 'Kindeditor/plugins/code/prettify.css',
uploadJson: 'Kindeditor/asp.net/upload_json.ashx',
fileManagerJson: 'Kindeditor/asp.net/file_manager_json.ashx',
allowFileManager: true,
afterCreate: function () {
var self = this;
K.ctrl(document, 13, function () {
self.sync();
K('form[name=example]')[0].submit();
});
K.ctrl(self.edit.doc, 13, function () {
self.sync();
K('form[name=example]')[0].submit();
});
}
});
prettyPrint();
});
</script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<textarea id="content1" name="content" style="width:700px;height:300px;"></textarea>
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>
</div>
</form>
</body>

</html>

引用了模板的测试页：

<%@ Page Title="" Language="C#" MasterPageFile="~/Master/test.Master" AutoEventWireup="true" CodeBehind="tests.aspx.cs" Inherits="kindeditor.tests" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script>
KindEditor.ready(function (K) {
var editor1 = K.create('#content2', {
cssPath: 'Kindeditor/plugins/code/prettify.css',
uploadJson: 'Kindeditor/asp.net/upload_json.ashx',
fileManagerJson: 'Kindeditor/asp.net/file_manager_json.ashx',
allowFileManager: true,
afterCreate: function () {
var self = this;
K.ctrl(document, 13, function () {
self.sync();
K('form[name=example]')[0].submit();
});
K.ctrl(self.edit.doc, 13, function () {
self.sync();
K('form[name=example]')[0].submit();
});
}
});
prettyPrint();
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<textarea id="content2" name="content" style="width:700px;height:300px;"></textarea>
</asp:Content>

运行这个测试页的话，运行中看代码，母版页中的css引用被动态的加上了一个“Master"（我的母版页放在Master文件夹下）

希望对你有帮助~

作者: 靚靚, 发布日期: 2013-04-16 10:49:50

回复在下民农：..好吧。我是Asp的我反复测试。。在普通页怎么都能显示就是在模板页的内容页上怎么都不显示~实在在没有人回答。。只能用fckEditor了。。

作者: 愉快装傻, 发布日期: 2013-04-16 10:58:01

回复靚靚：

你运行的时候右键查看源代码看看kindeditor的文件有没有正确被引用吧。。。。

作者: 靚靚, 发布日期: 2013-04-16 10:58:14

回复愉快装傻：终于显示了。。。谢谢你了哥们~~ 但是到底哪里出错了我还是不知道。。

作者: 靚靚, 发布日期: 2013-04-16 11:00:06

回复愉快装傻：引用肯定没错。我已经反复弄了好多次了。刚才把你那个复制过去就行了。我觉得是不是因为在模版页下也放一遍那个<script>哪个
link rel="stylesheet" href="Kindeditor-4.1.6/themes/default/default.css" />
    <link rel="stylesheet" href="Kindeditor-4.1.6/plugins/code/prettify.css" />
    <script charset="utf-8" src="kindeditor-4.1.6/kindeditor.js"></script>
    <script charset="utf-8" src="Kindeditor-4.1.6/lang/zh_CN.js"></script>
    <script charset="utf-8" src="Kindeditor-4.1.6/plugins/code/prettify.js"></script>
    <script>
        KindEditor.ready(function (K) {
            var editor1 = K.create('#content1', {
                cssPath: 'Kindeditor-4.1.6/plugins/code/prettify.css',
                uploadJson: 'Kindeditor-4.1.6/asp.net/upload_json.ashx',
                fileManagerJson: 'Kindeditor-4.1.6/asp.net/file_manager_json.ashx',
                allowFileManager: true,
                afterCreate: function () {
                    var self = this;
                    K.ctrl(document, 13, function () {
                        self.sync();
                        K('form[name=example]')[0].submit();
                    });
                    K.ctrl(self.edit.doc, 13, function () {
                        self.sync();
                        K('form[name=example]')[0].submit();
                    });
                }
            });
            prettyPrint();
        });

作者: 愉快装傻, 发布日期: 2013-04-16 11:02:47

回复靚靚：

应该是用了模板页导致路径没有引用对。我刚才那个列子是不规范的例子，可以看到kindeditor里的css在运行的时候没有被正确引用

作者: 靚靚, 发布日期: 2013-04-16 11:05:36

回复愉快装傻：

只要把这些都放的模板页里。。不放的内容页里就行。。。 <link rel="stylesheet" href="Kindeditor/themes/default/default.css" />
    <link rel="stylesheet" href="Kindeditor/plugins/code/prettify.css" />
    <script charset="utf-8" src="kindeditor/kindeditor.js" type="text/javascript"></script>
    <script charset="utf-8" src="Kindeditor/lang/zh_CN.js" type="text/javascript"></script>
    <script charset="utf-8" src="Kindeditor/plugins/code/prettify.js" type="text/javascript"></script>

作者: 愉快装傻, 发布日期: 2013-04-16 11:06:17

第二个例子：

模板页：

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="test.master.cs" Inherits="kindeditor.NewFolder1.test" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>

测试页：

<%@ Page Title="" Language="C#" MasterPageFile="~/Master/test.Master" AutoEventWireup="true" CodeBehind="tests.aspx.cs" Inherits="kindeditor.tests" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link rel="stylesheet" href="Kindeditor/themes/default/default.css" />
<link rel="stylesheet" href="Kindeditor/plugins/code/prettify.css" />
<script charset="utf-8" src="Kindeditor/kindeditor.js"></script>
<script charset="utf-8" src="Kindeditor/lang/zh_CN.js"></script>
<script charset="utf-8" src="Kindeditor/plugins/code/prettify.js"></script>
<script>
KindEditor.ready(function (K) {
var editor1 = K.create('#content1', {
cssPath: 'Kindeditor/plugins/code/prettify.css',
uploadJson: 'Kindeditor/asp.net/upload_json.ashx',
fileManagerJson: 'Kindeditor/asp.net/file_manager_json.ashx',
allowFileManager: true,
afterCreate: function () {
var self = this;
K.ctrl(document, 13, function () {
self.sync();
K('form[name=example]')[0].submit();
});
K.ctrl(self.edit.doc, 13, function () {
self.sync();
K('form[name=example]')[0].submit();
});
}
});
prettyPrint();
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<textarea id="content1" name="content" style="width:700px;height:300px;"></textarea>
</asp:Content>

这个我这边也能正常显示

作者: 靚靚, 发布日期: 2013-04-16 11:09:11

回复愉快装傻：好吧。。我像你这么放就是不显示的。。

作者: 靚靚, 发布日期: 2013-04-16 11:11:07

回复愉快装傻：<textarea id="content" name="content" style="width:700px;height:300px;"></textarea> 放这个显示。。放<asp:TextBox ID="content" runat="server" TextMode="MultiLine" Width="800px" Height="400px"></asp:TextBox>这个不行。。

作者: 愉快装傻, 发布日期: 2013-04-16 11:17:53

由于用了母版页，内容页服务器控件（是服务器控件哦）的id会被重写，我这里运行中查看源代码，控件的id变成了“ContentPlaceHolder1_content1”，所以不显示的元凶找到了。

作者: 愉快装傻, 发布日期: 2013-04-16 11:20:43

<asp:TextBox ID="content" runat="server" TextMode="MultiLine" Width="800px" Height="400px" ClientIDMode="Static"></asp:TextBox>

如果你一定需要服务器控件，那么加上红色的那个属性，加上了你设定的id值它就不会被改变，建议你了解一下ClientIDMode，.NET4的新特性。

作者: 靚靚, 发布日期: 2013-04-16 11:21:36

回复愉快装傻：好吧怎么说都要谢谢你帮我解决了。

作者: 愉快装傻, 发布日期: 2013-04-16 11:24:58

回复靚靚：

对你有帮助就好！~

论坛 Forum

在模板页下面调用的

<link rel="stylesheet" href="../kindeditor-4.1.6/themes/default/default.css" /> <link rel="stylesheet" href="../kindeditor-4.1.6/plugins/code/prettify.css" />

在页面下调用的这些

<link rel="stylesheet" href="../kindeditor-4.1.6/themes/default/default.css" />
<link rel="stylesheet" href="../kindeditor-4.1.6/plugins/code/prettify.css" />