无法将表格选项添加到同步融合 Richtexteditor答案

【问题标题】：Unable to add table option to syncfusion richtexteditor无法将表格选项添加到同步融合 Richtexteditor
【发布时间】：2018-11-21 07:30:35
【问题描述】：

我正在为 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-editor syncfusion

【解决方案1】：

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

您可以使用特定于版本的 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 页面中包含相关脚本和主题文件。有关详细信息，请参阅Getting Started 文档

Sample

【讨论】：

【解决方案2】：

我在 ViewBag.tools 中使用“表格”属性来呈现表格图标。我需要添加“CreateTable”而不是 Table。

【讨论】：