Ajax 控件工具包 HTML 编辑器自定义问题？答案

【问题标题】：Ajax Control Toolkit HTML Editor Customization Problem?Ajax 控件工具包 HTML 编辑器自定义问题？
【发布时间】：2010-01-13 12:46:00
【问题描述】：

如何更改 ACT HTML 编辑器的默认设置？我想加载编辑器，例如选择粗体按钮或默认使用 rtl 方向而不是 ltr。
我该怎么做？我重写了 FillTopToolbar() 方法来添加自定义按钮，但我不知道如何更改默认设置。
因为选择了默认 ltr，所以我想将其更改为 rtl。

【问题讨论】：

标签： c# asp.net ajaxcontroltoolkit text-editor html-editor

【解决方案1】：

我编辑了我的答案以更正一些事情

HTMLEditor 不提供使用服务器端代码设置这些按钮状态的方法。虽然在客户端上，它使用Sys.Application.load Event 进行初始化。如果您在初始化程序之后运行代码，但在用户与 UI 交互之前，您可以设置您想要在该事件处理程序中设置的任何属性。

这里是设置粗体按钮和 rtl 按钮状态所需的代码。如果您想更改其他按钮的状态，可以从这里获取：

// Attach a handler to the load event.
Sys.Application.add_load(myOnLoadLoader);

function myOnLoadLoader() {
    //This will run JUST after ALL code that was set to run during the load event has run
    window.setTimeout(myOnLoad, 0);
}

function myOnLoad() {
    var editor = $find('<% =editor.ClientID %>');
    var toolbar = editor.get_changingToolbar();
    var toolbarButtons = toolbar.get_buttons();
    for (var i = 0; i < toolbarButtons.length; i++) {
        var toolbarButton = toolbarButtons[i];
        if (toolbarButton instanceof AjaxControlToolkit.HTMLEditor.ToolbarButton.Rtl ||
        toolbarButton instanceof AjaxControlToolkit.HTMLEditor.ToolbarButton.Bold) {
            toolbarButton.set_activeEditPanel(editor.get_editPanel());
            toolbarButton.callMethod();
        }
    }
}

Sys（因此是 Sys.Application）是来自 ASP.Net AJAX javascript 的命名空间（由于您添加到页面的 ScriptManager 而添加的文件）。如果您使用它，您需要确保在 ASP.Net AJAX 文件加载之后运行此行 Sys.Application.add_load(myOnLoad);。您可以通过以下几种方式做到这一点：

将此脚本添加到页面中低于 scriptManager 的位置。
将您的脚本移动到一个单独的 JS 文件中，并使用 ScriptManager 加载它（推荐）。

如果您将脚本移动到单独的文件中，您会注意到var editor = $find('<% =youreditor.ClientID %>'); 不再有效。这是因为 javascript 文件不会解析出服务器标签并将其替换为服务器端值（就像 aspx 页面那样）。所以这里有问题的部分是<% =youreditor.ClientID %>。

要解决这个问题，您可以这样做：

将此添加到您的 aspx 标记中（在头部）：

<script language="javascript">
    var myEditorId = '<%= youreditor.ClientID %>';
</script>

所以它看起来像这样：

<head runat="server">
    <script language="javascript">
        var myEditorId = '<%= youreditor.ClientID %>';
    </script>
<title></title>
</head>

（如果您使用的是母版页，您只需在页面中的 ScriptManager 下方添加脚本标签）

在你的 JS 文件中，替换这个

var editor = $find('<% =youreditor.ClientID %>');

有了这个

var editor = $find(myEditorId);

【讨论】：

这对于这个问题来说太过分了......您所要做的就是设置现有的样式表属性并将您想要的默认样式放在那里。按钮已经自行更新了...
@Nick：你错了。 OP 没有询问如何使页面中的元素从右到左阅读。他问如何设置 HTMLEditor 组件的属性。
@Gabrial McAdams：在您的编辑之后，答案更加合适，正是其他更改使它变得矫枉过正。我删除了对此的回答，因为自动检测功能似乎不在默认的 Ajax Toolkit 中，在最新版本之前的某个时间被删除了。你现在的答案是正确的，如果他们在 4.0 版本中添加状态检测功能，我会回来更新这个问题。
您好，McAdams 先生，感谢您的详细解答。我认为你的答案是完美的，但有一个问题，这个问题是我对 Asp.net AJAX 库的了解不足。我非常初学者。我将您的代码放在编辑器放置的页面中的
Sys.Application 应该在那里。这可能是脚本加载顺序问题。将您的脚本放入一个单独的 js 文件中，将您的脚本文件添加到您的脚本管理器中，以便它以正确的顺序加载。

【解决方案2】：

您需要使用 CSS 来执行此操作，因为编辑器控件本身不支持 rtl。以下 CSS 将方向设置为 rtl -

div
{
    direction:rtl;
}

HTML 编辑器的默认样式可以在 Editor.css 文件中找到。

【讨论】：

我的 Hole 网页是 rtl。但对 ACT 编辑器没有影响，因为它依赖于页面样式。我想将方向按钮设置为默认设置为 RTL。
您可以在 AjaxControlToolkit\HTMLEditor\Editor.css 中找到默认的 CSS 样式。 HTMLEditor 还有一个 CssClass 属性。
你能指出我应该更改女巫职业名称吗？有很多类名，我找不到其中一个是 textarea 样式将样式更改为 RTL。虽然我不认为这个解决方案会导致在控制工具栏中看到选定的 rtl 按钮。