Sign in Register
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Kris Janssen 210 posts 569 karma points c-trib
    Nov 01, 2014 @ 23:59
    Kris Janssen
    0

    Contour Rich Text FieldType

    Contour

    Hi guys,

    A rather urgent question I'm afraid.

    I thought it would be trivial to create a rich text field type for use with contour forms:

    1. I just took the code for the textarea field type.
    2. I added some references to the tinyMCE js in the view for my custom field type to actually replace a text area with the rich text editor.

    The form displays fine but data is not submitted.

    I guess this is because TinMCE replaces the text area (which is rendered invisible) with an iframe that has the same id as the original text area but with "_ifr" stuck at the end of it.

    Even if I change the code for my custom field type:

    public override List<object> ProcessValue(HttpContextBase httpContext)
    {
        List<object> objs = new List<object>();
        HttpRequestBase request = httpContext.Request;
        Guid id = this.AssociatedField.Id;
        string item = request[string.Concat(id.ToString(), "_ifr")] ?? "";
        objs.Add(item);
        return objs;
    }

    It does not work.

    The view:

    @model Umbraco.Forms.Mvc.Models.FieldViewModel

<script type="text/javascript" src="~/js/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent     indent | link image"
});
    </script>

    <label class="textarea">
    <textarea name="@Model.Name" id="@Model.Id" rows="9" class="form-control"
              @{if (Model.Mandatory || Model.Validate) { <text> data-val="true" </text>  }}
              @{if (Model.Mandatory) { <text> data-val-required="@Model.RequiredErrorMessage" </text>  }}
              @{if (Model.Validate) { <text> data-val-regex="@Model.InvalidErrorMessage" data-    regex="@Html.Raw(Model.Regex)" </text>  }}>
        @Model.Value
    </textarea>
    </label>

    The iframe generated by tinyCE

    <iframe id="6a21853a-46c2-4bde-84b5-ea032302851b_ifr" frameborder="0" allowtransparency="true" title="Rich Text Area. Press ALT-F9 for menu. Press ALT-F10 for toolbar. Press ALT-0 for help" src='javascript:""' style="width: 100%; height: 198px; display: block;">
</iframe>

    Anybody have an idea on how to get it working?

    Copy Link
  • Dennis Aaen 4499 posts 18254 karma points admin hq c-trib
    Nov 02, 2014 @ 00:15
    Dennis Aaen
    0

    Hi Kris,

    Perhaps this post can help you further with creating your custom field type using the rich text editor.

    http://our.umbraco.org/forum/umbraco-pro/contour/38385-Custom-Field-Type-in-V3

    Hope this helps,

    /Dennis

    Copy Link
  • Kris Janssen 210 posts 569 karma points c-trib
    Nov 02, 2014 @ 00:23
    Kris Janssen
    0

    Hi Dennis,

    I appreciate the feedback but I have made custom fieldtypes before so I know how to do it for simple cases.

    In this particular case, I can get my field type to display the TinyMCE just fine.

    The problem lies with the way Contour seems to retrieve the data from a field: The data seem to be taken from the texture with a specific id.

    However, when TinyMCE is applied to a textarea, the original texture is just hidden and a bunch of new elements are generated to show the WYSIWYG editor. Data then entered by the user will end up in an iFrame with a modified id from the id of the original text area (original id is appended with _ifr)

    Hoewever, when trying to modify the code behind of my FieldType to try and get the data entered from this new id, it does not work for some reason...

    That is why I posted all this code...

    Copy Link

  • Comment author was deleted

    Nov 03, 2014 @ 09:24

    Have a look at this stackoverflow thread, http://stackoverflow.com/questions/5807156/tinymce-not-sending-value so try adding a call to tinyMCE.triggerSave() on form submit

    Copy Link
  • Kris Janssen 210 posts 569 karma points c-trib
    Nov 03, 2014 @ 10:07
    Kris Janssen
    0

    Hi Tim,

    Thanks for the tip.

    I actually already tried 

    tinymce.init({
    selector: "textarea",
    setup: function (editor) {
        editor.on('change', function () {
            tinymce.triggerSave();
        });
    }
});

    And the value of the text area is indeed kept up to date with this but for some reason, upon submit, the data is not stored by contour.

    In contrast, if I use any of the markdown editors available left and right, e.g. http://toopay.github.io/bootstrap-markdown/

    It does work. However, in the case of those editors, it seems the actual innerhtml of the texture element gets updated.

    So maybe, I'll give that a try... I would still love to use TinyMCE though.

    Copy Link

  • Comment author was deleted

    Nov 03, 2014 @ 10:18

    Maybe this one can help http://stackoverflow.com/questions/11035657/not-getting-post-value-of-textarea-when-using-tinymce since the triggersave seems to be for when you are ajax submitting the form

    $('#elm1').html(tinymce.get('elm1').getContent());

    Copy Link
  • Kris Janssen 210 posts 569 karma points c-trib
    Nov 03, 2014 @ 10:37
    Kris Janssen
    0

    Also tried that now but it does not work.

    However, I am starting to think that there is some escaping or something going on.

    If I remove all editors from my textarea and try to submit:

    <p>test</p>

    The form does not go through apparently...

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft