CODEWITHSUNDEEP
teleriksitecorerich-text-editorweb-forms-for-marketers
Jason Davidson
Jason Davidson

Reputation: 3

Web Forms For Marketers (WFFM) Rich Text Field Type

I need to create a custom field type in WFFM to accept rich text, and provide Sitecore's WYSIWYG editor for the user on the front-end. The form will be used to create a content item, and the rich text field will map to a field on that item's template. Has anyone done this? Can the Telerik editor be leveraged for this?

Upvotes: 0

Views: 496

Answers (1)

jammykam
jammykam

Reputation: 17000

If you need a simple WYSISYG editor on the front-end, then you can use any of the numerous open source editors available on the web. I would be wary of using the Telerik editor included in Sitecore unless you have the relevant licenses.

If you use a Multi-Line Text field on the form, Sitecore outputs a regular <textarea> on the front-end. I suggest you add a custom css class under /sitecore/system/Modules/Web Forms for Marketers/Settings/Meta data/Css Classes and select that from the CSS Class drop on the left when you select your field in the form designer, in order to allow you to target specific fields to be WYSIYG'd.

Add a reference to the javascript file and then instantiate your editor, passing in the css class defined above to only target those specific textareas.

If you are using ASP.Net MVC and CKEditor (for example):

  • Add reference to javascript in /Views/Form/Index.cshtml. You may need to add this to your Visual Studio from the WFFM module package.
  • Or add the reference in <head>: <script src="/path-to/ckeditor/ckeditor.js"></script>
  • Add the bottom of Index.cshtml (or just before your closing </body> tag), instantiate your editor, targeting only those <textarea> with specific css classes

e.g.

<!-- markup generated by WFFM -->
<textarea class="wffm-rte" data-val="true" data-val-length="..." data-val-required="..." id="wffm-generated" name="wffm-generated"></textarea>

<script>
    // Replace all <textarea class="wffm-rte"> elements with CKEditor instances.
    CKEDITOR.replaceAll('wffm-rte');
</script>

Be sure you sanitize your incoming data, you don't want a case of bobby tables.

Upvotes: 2

Related Questions