rich-text-editor - 无法将表格选项添加到同步融合 Richtexteditor

Question

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

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

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

@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();
    }

谁能告诉我在哪里错过了窍门。

标签： rich-text-editorsyncfusion

Answer 1

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

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

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

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

[看法]

@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 页面中包含相关脚本和主题文件。有关详细信息，请参阅入门文档

样本