Ckeditor Opens up in a dialog box, I want it to open without

277 views Asked by At

I've been wracking my brain on this but I just can't seem to get it to happen. So I have a asp.net application that when clicking a button, instantiates a dialog box with ckeditor, and then it takes the data that's inside ckeditor's textarea and posts it to a discussion area on that same page, This all works, however the issue is that I want to remove the dialog box completely and just have ckeditor open on page load somewhere without waiting for the "click".

PLEASE someone help me understand a solution.

Here's the code:

 function DiscussionViewModel() {
    var self = this;
    self.New = ko.mapping.fromJS(newDiscussion);
    self.Threads = ko.mapping.fromJS(threads, mapping);
    self.AddNewThread = function () {
        $("#dvAddDiscussion").dialog('open');
        ko.mapping.fromJS(newDiscussion, self.New);

        if (CKEDITOR.instances["txtDiscussioinDescription"] != undefined) {
            CKEDITOR.instances["txtDiscussioinDescription"].setData('');
        }
    };

This then links with the dialog box.

$(function () {
    $("#accordion").accordion();
    var dialog = $("#dvAddDiscussion").dialog({
        autoOpen: true,
        width: 720,
        height: 500,
        title: 'Discussion',
        modal: true,
        open: function () {
            if (typeof DISABLE_FOR_DIALOG != 'undefined')
                DISABLE_FOR_DIALOG = true;
            CKEDITOR.replace('txtDiscussioinDescription');

        },
        close: function (parameters) {
            if (typeof DISABLE_FOR_DIALOG != 'undefined')
                DISABLE_FOR_DIALOG = false;
            if (CKEDITOR.instances["txtDiscussioinDescription"] != undefined) {
                CKEDITOR.instances.txtDiscussioinDescription.updateElement();
                CKEDITOR.instances.txtDiscussioinDescription.destroy();
            }

        }
    });
    dialog.parent().appendTo($("#dvDialogs"));
    $("#frmAddDiscussion").data("validator").settings.submitHandler = discussionViewmodel.SubmitReply;
    $("#frmAddDiscussion").bind('click', function () {
        CKEDITOR.instances.txtDiscussioinDescription.updateElement();
    });
});

UPDATE: Adding in the HTML as requested by J.

@using System.Web.Script.Serialization

@model List

@{
    ViewBag.Title = "Threads";
    Layout = null;// "~/views/shared/_Layout.cshtml";
}
<div class="threads" id="dvThreads">
    <div class="thread">
        <a href="javascript:void(0)" data-bind="click: $parent.GetReplies.bind($data)">
        </a>
    </div>

    <a href="javascript:void(0)" data-bind="click: AddNewThread, text: 'Add New Discussion'" class="btn new"></a>

    <script type="text/html" id="tmplReply">


        <div class="detail">
            <div class="miniDesc">
                <span>by </span>
                <span data-bind="text: User"></span>
                <abbr class="timeago" data-bind="text: CreatedDate,attr:{title:CreatedDate}"></abbr>
                &nbsp;<a href="javascript:void(0)" data-bind="click: $root.EditReply.bind($data)" class="btnEdit">Edit</a>
            </div>
            <p data-bind="html: Description"> </p>

            <br class="clear" />
        </div>
    </script>
    <div id="dvDialogs">
        @Html.Partial("Add", Model[Model.Count - 1].New)
    </div>
</div>

<script type="text/javascript">
    var [email protected](new JavaScriptSerializer().Serialize(Model[Model.Count - 1].New));
    var [email protected](new JavaScriptSerializer().Serialize(Model[Model.Count - 1].New.Type));
    var [email protected](new JavaScriptSerializer().Serialize(Model[Model.Count - 1].New.TypeId));
    var [email protected](new JavaScriptSerializer().Serialize(Model));
    var addDiscussionUrl = '@Url.Action("Add","Discussion")';
    var threadsUrl  ='@Url.Action("ThreadsJson","Discussion")';
    var summariesUrl='@Url.Action("Summaries","Discussion")';
</script>
0

There are 0 answers