无法将表格选项添加到同步RichTextEditor

时间:2018-11-21 07:30:36

标签: rich-text-editor syncfusion

我正在为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();
    }

谁能告诉我我错过了什么把戏。

2 个答案:

答案 0 :(得分:1)

版本16.3.21提供了对EJ2 Rich Text Editor控件中表的支持。有关更多信息,请参考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

答案 1 :(得分:0)

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