在 ASP.Net Webforms 应用程序中集成 CKEditor答案

【问题标题】：Integrating CKEditor in an ASP.Net Webforms Application在 ASP.Net Webforms 应用程序中集成 CKEditor
【发布时间】：2013-09-23 13:52:29
【问题描述】：

我正在尝试在我的 Webforms 应用程序中使用 CKEditor，但我尝试了许多其他方法都没有成功。有人可以帮忙吗？该站点使用 Site.Master 文件，其中所有 aspx 文件都提供使用内容占位符的内容。所以我将 JavaScript 调用放在 ASPX 中，而不是放在主文件中。

我还试图让它在内容可编辑的 div 元素中进行编辑。它在一个小型测试站点中运行良好，但在我的应用程序中却不行。有什么想法吗？

我的 Site.master 有两个我想使用的内容占位符：

<asp:ContentPlaceHolder ID="Scripts" runat="server" />
和
<asp:ContentPlaceHolder ID="MainContent" runat="server">

然后我的 aspx 文件有：

<asp:Content ID="Content3" ContentPlaceHolderID="Scripts" runat="server"> 
<script src="ckeditor/ckeditor.js"></script> 
</asp:Content>`

和

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <div id="renderTarget" renderwidth="1100"> </asp:Content> </asp:Content>

在我的 JavaScript 中，我将 renderTarget div 的内容可编辑设置为 true。

$(".contentbox[dynamic='true']").attr("contenteditable", "true");

此时，我希望 CKedtor 将其控件添加到 div。但事实并非如此。我对 TinyMCE 使用相同的过程，它工作正常。

【问题讨论】：

如果没有演示问题的任何代码，我们无法真正确定导致它失败的原因。能不能展示一下相关代码，解释一下是怎么失败的？
Site.Master? ASPX 文件？内容占位符？你确定你有一个 MVC 项目吗？
是的，它的 MVC：我的 Site.master 加载了一堆脚本，然后放置了这个占位符：'code' 'code ' 所以在我看来，这是一个可以编辑的仪表板，我有：'code'
@jyoansah 不是 MVC。那就是网络表单。
您将 ckeditor/ckeditor.js 列为 javascript 文件的路径。你确定这是有效的吗？您的 .aspx 文件是否在子目录中？如果是这样，那么您需要将 .js 文件的路径更改为它的实际位置。换句话说，使用像/ckeditor/ckeditor.js 这样的根相对路径。

标签： c# javascript asp.net webforms ckeditor

【解决方案1】：

如果您的项目中正确使用了 CKEditor，则很简单：

<textarea cols="80" class="ckeditor" id="editor1" name="editor1" rows="10"></textarea>

甚至

<div contenteditable="true">...</div>

另外，您可能想阅读jQuery Selectors。

一个更像你发布的例子：

<div id="ckMe">...</div>

<script>
    $(document).ready(function () {
        $("#ckMe").attr("contenteditable", "true");
    });
</script>

【讨论】：

我正在尝试使用内容可编辑的 div 元素而不是文本区域。
因此，CKEditor 应该在您将其内容可编辑 div 设置为 true 时自动拾取 ckMe div。但是，它没有，单击 div 只允许文本编辑功能。 CKeditor 工具未显示。
@jyoansah 那么您可能会收到 javascript 错误，因为您没有使 ckeditor 工作所需的所有文件夹和脚本。确保您使用了下载中提供的所有项目，并且像 Chris Lively 所说的那样，确保您的参考是正确的。
我认为你是对的。我创建了一个测试页面并设法让它在该测试页面上工作。所以它可能与我试图加载它的特定页面和我正在使用的链接有关。谢谢。

【解决方案2】：

您只需在项目中安装 asp.net 的版本，然后像添加用户控件一样简单地使用它：

<ckeditor:ckeditorcontrol ID="CkEditor1" runat="server"></ckeditor:ckeditorcontrol>

Documentation from ckEditor

【讨论】：