+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Module builder: custom module fields: creating and using a markdown interface widget for entering data

Module builder: custom module fields: creating and using a markdown interface widget for entering data

8 posts, 1 answered
  1. Luke
    Luke avatar
    56 posts
    Registered:
    18 Mar 2013
    09 Apr 2013
    Link to this post
    Hello & thanks for your time. I am a UI designer and I'm fairly new to SiteFinity, ASP.NET, C#, Visual Studio and compiled language development in general. 

    I am working with SiteFinity 5.1 and am creating a custom content module with a Long Text field for entering content data. In the "Add a field" form dialog window, the field "Interface widget for entering data" by default provides me with three choices: Rich text editor, text area, or Custom. A screenshot is attached.

    The text area lacks any of the formatting functionality necessary for composition (paragraphs, breaks, list items, headings, links, etc.) but the rich text editor's bells and whistles offer more functionality than is necessary and so it is a distraction (not to mention a potential hazard from a look-and-feel standpoint.)

    A markdown-only editor field like: http://pagedown.googlecode.com/hg/demo/browser/demo.html would be ideal. Markdown provides practical composition functionality but it doesn't conflate that with design and styling the way WYSIWYG editors do. Limitation creates form.

    Any beginner-friendly suggestions on how I might accomplish this for SiteFinity 5.1 (a local installation) using just text editors or Visual C# 2010 Express would be greatly appreciated.

    Thanks in advance!
    Answered
  2. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    Registered:
    02 Dec 2016
    12 Apr 2013
    Link to this post
    Hi Luke,

    You can easily achieve this functionality using the out of the box feature for creating custom toolsets for our WYSIWYG editor.
    Once you've created a custom toolset, and determined the desired tools in it, you can easily go to your module field under Advanced Settings ->ContentView->Controls->YourModule and then set this toolset for the desired edit/create view (i.e. you can actually have different toolsets depending on whether you're creating or editing an item as well).
    For your convenience I've recorded a short video demonstrating this functionality.

    Regards,
    Boyan Barnev
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Luke
    Luke avatar
    56 posts
    Registered:
    18 Mar 2013
    12 Apr 2013 in reply to Boyan Barnev
    Link to this post
    Boyan thank you for taking the time to explain that with the screencast, that is very informative. I appreciate your time. 

    However I think we might be talking about two different things. If I'm not mistaken the field your toolset renders is still a WYSIWYG editor in which the user, after toggling from "Design" to "Code" view, can still enter HTML tags. Correct?

    I am actually pursuing a markdown replacement for the standard HTML long text field. My goal is to decouple content authoring from content presentation. Markdown or some other lightweight markup language geared towards non-HTML content authoring would be idea.

    Using a custom toolset to reduce the number of formatting options available is one step towards control, but if the user is still ultimately working in HTML then my problem remains.
  4. Pavel Benov
    Pavel Benov avatar
    341 posts
    Registered:
    14 Mar 2016
    12 Apr 2013
    Link to this post
    Hi Luke,

    Thank you for the additional information.

    Yes you are correct that the HTML will be available for editing. In order to disable the HTML view of the WYSIWYG editor please go to Administration->Settings->Advanced->ContentView->Controls->YourModule->Views->Insert or Edit (or both) and at the top you will see the HTML field edit modes field. In it write Design as a value and Save - see image for reference. This will leave only the Design view for your custom field text editor.

    I hope this helps and please let me know if you need any further assistance.

    Kind regards,
    Pavel Benov
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. Luke
    Luke avatar
    56 posts
    Registered:
    18 Mar 2013
    15 Apr 2013 in reply to Pavel Benov
    Link to this post
    Hi Pavel, thanks for your time. I would rather have the text area render a markdown editor and not accept HTML, as this is a tidy way to provide formatting control for web writers within practical limits and separate the creation of content from modification of the site's design patterns.
  6. Pavel Benov
    Pavel Benov avatar
    341 posts
    Registered:
    14 Mar 2016
    16 Apr 2013
    Link to this post
    Hello Luke,

    Setting the HTML field edit modes to Design as per the instructions from my previous post will remove the ability of the users to input HTML tags and thus meddle with the output structure of the content.

    Basically the users will only have the ability to write text in the area. You can also restrict the ability of the formatting of that text by enabling/disabling the editor's tools as Boyan have instructed earlier. 

    Regards,
    Pavel Benov
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  7. Luke
    Luke avatar
    56 posts
    Registered:
    18 Mar 2013
    16 Apr 2013 in reply to Pavel Benov
    Link to this post
    Hello Pavel, thanks for the reply but that is really only a workaround and not a solution. To go back to my original post, the problem is that a CMS should provide web writers with "...practical composition functionality but [in a way that] doesn't conflate that with design and styling the way WYSIWYG editors do." 

    A partially-disabled HTML editor just imposes an obstacle the average user will naturally try to circumvent by copying-and-pasting from their word processor or clipboard. Even if you disable copy-and-paste, they won't understand why they cannot do it and the experience will just seem broken.

    Markdown, conversely, is a markup language expressly created for formatting written content. By working within the limits of the markdown formatting syntax, content writers are able to focus solely on writing composition separate from presentation (styling of the theme or templates.) 

    I've already added this as a suggestion for a future SiteFinity release. As a content module field input method, Markdown is a very logical alternative to provide along with text-only and rich text editor. 

    Thanks for the detailed instructions on the workaround!
  8. Pavel Benov
    Pavel Benov avatar
    341 posts
    Registered:
    14 Mar 2016
    19 Apr 2013
    Link to this post
    Hello Luke,

    With the WYSIWYG editor we are trying to bring to our users rich text editing experience.

    However as you might know the HtmlField in Sitefinity wraps the RadEditor. What you can try is to map a custom template of the HtmlField and incorporate the Export/Import to/from Markdown functionality of the RadEditor from this Demo.

    Kind regards,
    Pavel Benov
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
8 posts, 1 answered