无法向同步富文本编辑器添加表格选项 [英] Unable to add table option to syncfusion richtexteditor

问题描述

我正在为 asp.net mvc 使用 syncfusion ej2 richtexteditor 组件.所有工具都工作正常，但是当我向工具添加表格"选项时，它会在控制台中出错并且工具栏没有显示.控制台上出现以下错误.

I am using syncfusion ej2 richtexteditor component for asp.net mvc. All tools are working fine but when I add "table" option to the tools it gives error in the console and toolbar does not shows. Following error appears on the console.

Uncaught TypeError: Cannot read property 'id' of undefined
at e.getObject (constants.js:78)
at e.getItems (constants.js:78)
at e.getToolbarOptions (constants.js:78)
at e.render (constants.js:78)
at e.renderToolbar (constants.js:78)
at e.notify (constants.js:78)
at t.notify (constants.js:78)
at t.render (constants.js:78)
at t.appendTo (constants.js:78)
at Contact:130

这是我在视图中的初始化代码:

Here is my initialization code in the view:

@Html.EJS().RichTextEditor("table").ToolbarSettings(e => e.Items((object)ViewBag.tools)).Value((string)ViewBag.value).QuickToolbarSettings(e => { e.Table((object)ViewBag.table); }).ShowCharCount(true).MaxLength(2000).Render()

控制器代码:

public ActionResult Contact()
    {
        ViewBag.tools = new[] {
            "Bold", "Italic", "Underline", "StrikeThrough",
            "FontName", "FontSize", "FontColor", "BackgroundColor",
            "LowerCase", "UpperCase", "|",
            "Formats", "Alignments", "OrderedList", "UnorderedList",
            "Outdent", "Indent", "|",
            "CreateLink", "Image","table", "|", "ClearFormat", "Print",
            "SourceCode", "FullScreen", "|", "Undo", "Redo"
        };
        ViewBag.table = new[] {
            "Rows", "Columns", "tableCellVerticalAlign"
        };
        ViewBag.value = @"<p>The rich text editor component is WYSIWYG ('what you see is what you get') editor that provides the best user experience to create and update the content. 
                    Users can format their content using standard toolbar commands.</p>
<p><b> Key features:</b></p>

<ul>
    <li><p> Provides & lt; IFRAME & gt; and & lt; DIV & gt; modes </p></li>

    <li><p> Capable of handling markdown editing.</p></li>

    <li><p> Contains a modular library to load the necessary functionality on demand.</p></li>

    <li><p> Provides a fully customizable toolbar.</p></li>

    <li><p> Provides HTML view to edit the source directly for developers.</p></li>

    <li><p> Supports third - party library integration.</p></li>

    <li><p> Allows preview of modified content before saving it.</p></li>

    <li><p> Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li>

    <li><p> Contains undo / redo manager.</p></li>

    <li><p> Creates bulleted and numbered lists.</p></li>

</ul>";
        return View();
    }

谁能告诉我在哪里错过了诀窍.

Can anyone please tell where I am missing the trick.

推荐答案

从版本 16.3.21 开始提供对 EJ2 富文本编辑器控件中表格的支持.有关详细信息，请参阅发行说明.

The support for tables in EJ2 Rich Text Editor control was provided from the version 16.3.21. Refer to the release notes for more information.

您可以使用特定于版本的 CDN 文件来确保您最终使用它.请参考以下链接:

You can use a version specific CDN files to ensure it in your end. Refer to the following links:

脚本:http://cdn.syncfusion.com/ej2/16.3.21/dist/ej2.min.js
主题:https://cdn.syncfusion.com/ej2/16.3.21/材质.css

要在 RTE 的工具栏中启用表格，您需要将其添加到工具列表中，如以下代码所示.

To enable tables in the RTE’s toolbar, you need to add it to the toolslist as shown in the following code.

[查看]

@Html.EJS().RichTextEditor("default").ToolbarSettings(e => e.Items((object)ViewBag.tools)).Value((string)ViewBag.value).Render() 

[控制器]

public ActionResult Index() 
{ 
    ViewBag.value = @"<p>The rich text editor is WYSIWYG ('what you see is what you get') editor useful to create and edit content</p>"; 

    ViewBag.tools = new[] { "Bold", "Italic", "Underline", "StrikeThrough", 
                    "FontName", "FontSize", "FontColor", "BackgroundColor", 
                    "LowerCase", "UpperCase", "|", 
                    "Formats", "Alignments", "OrderedList", "UnorderedList", 
                    "Outdent", "Indent", "|", 
                    "CreateTable", "CreateLink", "Image", "|", "ClearFormat", "Print", 
                    "SourceCode", "FullScreen", "|", "Undo", "Redo" }; 
    return View(); 
}

确保您已在 _layout.cshtml 页面中包含相关脚本和主题文件.如需更多信息，请参阅入门文档

Make sure that you have included the dependent scripts and theme files in the _layout.cshtml page. For further information, refer to the Getting Started documentation

示例

这篇关于无法向同步富文本编辑器添加表格选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！