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!