Mixing
Unable to add table option to syncfusion 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()
Controller code:
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.
rich-text-editor syncfusion
asked Nov 21 '18 at 7:30
AhmadAhmad
524213
add a comment |
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()
Controller code:
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.
rich-text-editor syncfusion
asked Nov 21 '18 at 7:30
AhmadAhmad
524213
add a comment |
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()
Controller code:
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.
rich-text-editor syncfusion
asked Nov 21 '18 at 7:30
AhmadAhmad
524213
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()
Controller code:
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.
rich-text-editor syncfusion
rich-text-editor syncfusion
asked Nov 21 '18 at 7:30
AhmadAhmad
524213
asked Nov 21 '18 at 7:30
AhmadAhmad
524213
asked Nov 21 '18 at 7:30
AhmadAhmad
524213
asked Nov 21 '18 at 7:30
AhmadAhmad
524213
asked Nov 21 '18 at 7:30
AhmadAhmad
524213
524213
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
I was using "Table" property in ViewBag.tools to render table icon. I needed to add "CreateTable" instead of Table.
answered Nov 21 '18 at 8:09
AhmadAhmad
524213
add a comment |
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.
You can use a version specific CDN files to ensure it in your end. Refer to the following links:
Script: http://cdn.syncfusion.com/ej2/16.3.21/dist/ej2.min.js
Theme: https://cdn.syncfusion.com/ej2/16.3.21/material.css
To enable tables in the RTE’s toolbar, you need to add it to the toolslist as shown in the following code.
[View]
@Html.EJS().RichTextEditor("default").ToolbarSettings(e => e.Items((object)ViewBag.tools)).Value((string)ViewBag.value).Render()
[Controller]
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();
}
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
Sample
answered Nov 22 '18 at 8:46
Prince OliverPrince Oliver
562
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53407169%2funable-to-add-table-option-to-syncfusion-richtexteditor%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
I was using "Table" property in ViewBag.tools to render table icon. I needed to add "CreateTable" instead of Table.
answered Nov 21 '18 at 8:09
AhmadAhmad
524213
add a comment |
I was using "Table" property in ViewBag.tools to render table icon. I needed to add "CreateTable" instead of Table.
answered Nov 21 '18 at 8:09
AhmadAhmad
524213
add a comment |
I was using "Table" property in ViewBag.tools to render table icon. I needed to add "CreateTable" instead of Table.
answered Nov 21 '18 at 8:09
AhmadAhmad
524213
I was using "Table" property in ViewBag.tools to render table icon. I needed to add "CreateTable" instead of Table.
answered Nov 21 '18 at 8:09
AhmadAhmad
524213
answered Nov 21 '18 at 8:09
AhmadAhmad
524213
answered Nov 21 '18 at 8:09
AhmadAhmad
524213
answered Nov 21 '18 at 8:09
AhmadAhmad
524213
524213
add a comment |
add a comment |
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.
You can use a version specific CDN files to ensure it in your end. Refer to the following links:
Script: http://cdn.syncfusion.com/ej2/16.3.21/dist/ej2.min.js
Theme: https://cdn.syncfusion.com/ej2/16.3.21/material.css
To enable tables in the RTE’s toolbar, you need to add it to the toolslist as shown in the following code.
[View]
@Html.EJS().RichTextEditor("default").ToolbarSettings(e => e.Items((object)ViewBag.tools)).Value((string)ViewBag.value).Render()
[Controller]
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();
}
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
Sample
answered Nov 22 '18 at 8:46
Prince OliverPrince Oliver
562
add a comment |
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.
You can use a version specific CDN files to ensure it in your end. Refer to the following links:
Script: http://cdn.syncfusion.com/ej2/16.3.21/dist/ej2.min.js
Theme: https://cdn.syncfusion.com/ej2/16.3.21/material.css
To enable tables in the RTE’s toolbar, you need to add it to the toolslist as shown in the following code.
[View]
@Html.EJS().RichTextEditor("default").ToolbarSettings(e => e.Items((object)ViewBag.tools)).Value((string)ViewBag.value).Render()
[Controller]
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();
}
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
Sample
answered Nov 22 '18 at 8:46
Prince OliverPrince Oliver
562
add a comment |
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.
You can use a version specific CDN files to ensure it in your end. Refer to the following links:
Script: http://cdn.syncfusion.com/ej2/16.3.21/dist/ej2.min.js
Theme: https://cdn.syncfusion.com/ej2/16.3.21/material.css
To enable tables in the RTE’s toolbar, you need to add it to the toolslist as shown in the following code.
[View]
@Html.EJS().RichTextEditor("default").ToolbarSettings(e => e.Items((object)ViewBag.tools)).Value((string)ViewBag.value).Render()
[Controller]
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();
}
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
Sample
answered Nov 22 '18 at 8:46
Prince OliverPrince Oliver
562
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.
You can use a version specific CDN files to ensure it in your end. Refer to the following links:
Script: http://cdn.syncfusion.com/ej2/16.3.21/dist/ej2.min.js
Theme: https://cdn.syncfusion.com/ej2/16.3.21/material.css
To enable tables in the RTE’s toolbar, you need to add it to the toolslist as shown in the following code.
[View]
@Html.EJS().RichTextEditor("default").ToolbarSettings(e => e.Items((object)ViewBag.tools)).Value((string)ViewBag.value).Render()
[Controller]
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();
}
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
Sample
answered Nov 22 '18 at 8:46
Prince OliverPrince Oliver
562
answered Nov 22 '18 at 8:46
Prince OliverPrince Oliver
562
answered Nov 22 '18 at 8:46
Prince OliverPrince Oliver
562
answered Nov 22 '18 at 8:46
Prince OliverPrince Oliver
562
562
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53407169%2funable-to-add-table-option-to-syncfusion-richtexteditor%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
