Customizing the Content Editor
Can the mvc content editor be modified like the RadEditor for ASP.NET AJAX?
demos.telerik.com/.../defaultvb.aspx
Specifically we would like to add more items to the "paragraph"/formatting dropdown (h1, h2, h3, etc).
Hi Will,
Thank you for contacting us.
You can do this by modifying the html field template by going to Resource Packages -> YourPackage -> Client components -> Fields -> html-field -> sf-html-field.sf-cshtml. Feather uses the kendo editor rather than the RadEditor so it is easier to add custom tools. Please follow their documentation article about this here.
I hope the above information helps. Please do not hesitate to get back to me if you need further assistance on this matter.
Regards,
Velizar Bishurov
Telerik
Velizar -
I am trying to customize my ~/ResourcePackages/Bootstrap/client-components/fields/html-field/sf-html-field.html. I can only get so far. I would like to have a custom button or custom dropdown that will execute JavaScript, but I can't get that to work. Here is my code, any thoughts would be appreciated.
-Anthony
<textarea id="editor"
style="height: 400px; "
kendo-editor ng-model="sfModel"
k-encoded="false"
k-stylesheets='["~/App_Data/Sitefinity/WebsiteTemplates/COM/App_Themes/COM/Global/Layout.css"]',
k-tools='[
name: "custom",
exec: "myScript"
,
name: "formatting", width: 150, items: [
text: "COM Clean", value: ".green-line" ,
text: "COM Green", value: ".banner-green" ,
text: "COM Normal", value: ".banner-red"
]
,
"foreColor",
"backColor",
"bold",
"italic",
"underline",
"trikethrough",
"justifyLeft",
"justifyCenter",
"justifyRight",
"insertUnorderedList",
"insertOrderedList",
"indent",
"outdent",
"createTable",
"addColumnLeft",
"addColumnRight",
"addRowAbove",
"addRowBelow",
"deleteRow",
"deleteColumn",
"cleanFormatting",
name: "fullscreen",
template: "<a class=\"k-button js-custom-tool custom-tool\" ng-click=\"toggleFullScreen()\"><span class=\"js-fullScreen glyphicon\"></span></a>"
,
name: "htmlView",
template: "<button class=\"k-button pull-right js-custom-tool\" ng-click=\"toggleHtmlView()\">\\htmlViewLabel\\</button>"
]'>
</textarea>
<script type="text/javascript">
function myScript()
alert("Success");
</script>
Hello,
Here's a quick sample for this:
<script> function change(evt) console.log($(evt).val()); </script> <textarea id="editor" style="height: 340px;" kendo-editor="editorWidget" ng-model="sfModel" k-scope-field="editorWidget" sf-toggle-commands="strikethrough, justifyFull, subscript, superscript, fontName, fontSize, foreColor, backColor, print" k-encoded="false" k-stylesheets='[getPackageResourceUrl("/ResourcePackages/Bootstrap/assets/dist/css/styles.min.css")]', k-tools='[ "formatting", "bold", "italic", "underline", "trikethrough", "justifyLeft", "justifyCenter", "justifyRight", "justifyFull", "insertUnorderedList", "insertOrderedList", "indent", "outdent", name: "custom", template: "<select onchange=\"change(this);\"><option value=\"volvo\">Volvo</option><option value=\"saab\">Saab</option><option value=\"mercedes\">Mercedes</option><option value=\"audi\">Audi</option></select>" , name: "createLink", template: "<a href=\"\" class=\"k-tool k-group-start\" ng-click=\"openLinkSelector()\" title=\"@(Res.Get<ClientComponentsResources>().InsertHyperlink)\"><span class=\"k-tool-icon k-createLink\">@(Res.Get<ClientComponentsResources>().InsertHyperlink)</span></a>" , "unlink", name: "insertImage", template: "<a href=\"\" class=\"k-tool k-group-start\" ng-click=\"openImageSelector()\" title=\"@(Res.Get<ClientComponentsResources>().InsertImage)\"><span class=\"k-tool-icon k-insertImage\">@(Res.Get<ClientComponentsResources>().InsertImage)</span></a>" , name: "insertFile", template: "<a href=\"\" class=\"k-tool k-group-start\" ng-click=\"openDocumentSelector()\" title=\"@(Res.Get<ClientComponentsResources>().InsertFile)\"><span class=\"k-tool-icon k-insertFile\">@(Res.Get<ClientComponentsResources>().InsertFile)</span></a>" , name: "insertVideo", template: "<a href=\"\" class=\"k-tool custom-tool\" title=\"@(Res.Get<ClientComponentsResources>().InsertVideo)\" ng-click=\"openVideoSelector()\"><span class=\"glyphicon glyphicon-facetime-video\"></span></a>" , "createTable", "addColumnLeft", "addColumnRight", "addRowAbove", "addRowBelow", "deleteRow", "deleteColumn", "cleanFormatting", "strikethrough", "subscript", "superscript","fontName", "fontSize", "foreColor", "backColor", "print", name: "showAll", template: "<a class=\"k-tool custom-tool show-all-button\" title=\"@(Res.Get<ClientComponentsResources>().AllTools)\" ng-click=\"toggleAllTools()\"><span class=\"glyphicon glyphicon-option-horizontal\"></span></a>" , name: "fullscreen", template: "<a class=\"k-tool js-custom-tool custom-tool\" title=\"Fullscreen\" ng-click=\"toggleFullScreen()\"><span class=\"js-fullScreen glyphicon\"></span></a>" , name: "htmlView", template: "<button class=\"custom-tool btn btn-default btn-xs pull-right js-htmlview js-custom-tool\" ng-click=\"toggleHtmlView()\">\\htmlViewLabel\\</button>" ]'></textarea> <sf-link-selector-modal id="linkSelectorModal"></sf-link-selector-modal> <div class="mediaPropertiesModal" template-url="mediaPropertiesDialog" modal size="normal" existing-scope="true" window-class="sf-designer-dlg sf-timespan-selector-dlg" dialog-controller="sfMediaPropertiesController"></div>Is there an example available where the javascript function would insert html into the editor? Or even better where the function would prompt the user for some input text and then insert that text formatted with html into the editor?
Thank you.
Hi,
The following sample for the Kendo editor should help: http://dojo.telerik.com/@gyoshev/iFudI
Regards,
Velizar Bishurov
Telerik
Thank you!