Reputation:

CKEditor and MVC

I have integrated ckeditor into a MVC asp.net project. My problem is that the input is encoded back to the controller and then when redisplayed in a view the contents contain the encoded characters & html tags.

How do I show the inner html and still have the text encoded.

Any suggestions would be appreciated.

Upvotes: 4

Answers (3)

Nguyen Quy

Reputation: 121

I have integrated with CKeditor

<script type="text/javascript">

    $(document).ready(function () {
        CKEDITOR.replaceByClassEnabled = true;
        $('textarea.editor-basic, textarea.editor-standard, textarea.editor-richtext, textarea.editor-full').each(function (i, textarea) {
            var config = {};
            if ($(textarea).hasClass('editor-basic')) {
                config = {
                    language: 'en',
                    toolbar:
                        [
                            { name: 'basicstyles', items: ['Source', 'RemoveFormat'] }
                        ]
                };
            }
            else if ($(textarea).hasClass('editor-standard')) {
                config = {
                    language: 'en',
                    toolbar:
                        [
                            { name: 'basicstyles', items: ['Source', 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'] }
                        ]
                };
            }
            else if ($(textarea).hasClass('editor-richtext')) {
                config = {
                    language: 'en',
                    toolbar:
                        [
                            { name: 'basicstyles', items: ['Source', 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'] },
                            '/',
                            { name: 'colors', items: ['TextColor', 'BGColor', 'Maximize', 'ShowBlocks'] },
                            '/',
                            { name: 'fonts', items: ['Link', 'Styles', 'Format', 'Font', 'FontSize'] }
                        ]
                };
            }
            else if ($(textarea).hasClass('editor-full')) {
                config = {
                    language: 'en',
                    height: '500px',
                    toolbar:
                        [
                            { name: 'document', items: ['Source', '-', 'Save', 'NewPage', 'DocProps', 'Preview', 'Print', '-', 'Templates'] },
                            { name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },
                            { name: 'editing', items: ['Find', 'Replace', '-', 'SelectAll', '-', 'SpellChecker', 'Scayt'] },
                            '/',
                            { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'] },
                            {
                                name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv',
                                    '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl']
                            },
                            { name: 'links', items: ['Link', 'Unlink', 'Anchor'] },
                            { name: 'insert', items: ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar'] },
                            { name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] },
                            { name: 'colors', items: ['TextColor', 'BGColor', 'Maximize', 'ShowBlocks'] }
                        ]
                };
            }
            else {
                return;
            }
            CKEDITOR.replace(textarea.id, config);
        });
        $('textarea.editor-basic, textarea.editor-standard, textarea.editor-richtext, textarea.editor-full').each(function (i, textarea) {
            if (!$(textarea).hasClass('langdefault')) {
                $('#cke_' + textarea.id).hide();
            }
        });
        $('.sort_up, .sort_down').click(function () {
            var thisrow = $(this).parent().parent().parent();
            if ($(this).hasClass('sort_down')) {
                if (thisrow.next().find('.sort_up').length > 0) {
                    thisrow.next().after(thisrow);
                }
            }
            else {
                if (thisrow.prev().find('.sort_up').length > 0) {
                    thisrow.prev().before(thisrow);
                }
            }
            thisrow.parent().find('tr').removeClass('alternate-row');
            thisrow.parent().find('tr:odd').addClass('alternate-row');
            updateOrders();
            return false;
        });
        $('.sortable').tableDnD({
            onDrop: function (table, row) {
                $(table).find('tr').removeClass('alternate-row');
                $(table).find('tr:odd').addClass('alternate-row');
                updateOrders();
            }
        });

        $(".form-reset").bind("click", function () {
            $("input[type='text'], textarea").val("");
            for (var i in CKEDITOR.instances) {
                CKEDITOR.instances[i].setData("");
            }
        });
    });

</script>
<!-- in view page -->
<textarea name="desc" id="desc" class="form-textarea2 editor-basic"><%=Html.Encode(ViewBage.desc) %></textarea>

Upvotes: 0

Michiel Cornille

Reputation: 2097

any reason why you can't just use the <%=%> instead of the <%:%> tags for your RTE output?

Upvotes: 1

Matthew Groves

Reputation: 26096

What are you using to render the textarea? If you are using an Html helper (like Html.Textarea for instance), the encoding is done automatically.

Therefore, if you are using a RTE like CKEditor or TinyMCE, you probably don't want that. So, just write out a textarea by hand in the view, or better yet write your own Textarea extension method to limit/eliminate the encoding.

Upvotes: 1

CKEditor and MVC

Answers (3)

Related Questions