Блог

Я пытаюсь использовать форматированный текстовый редактор Yahoo в своем веб-приложении. Я новичок в веб-программировании, поэтому это может показаться глупым вопросом.

Я использую пользовательскую модель под названием «blogpost». Она содержит следующие свойства:

Заголовок Body Дата создания Author

Я хочу использовать пользовательский редактор только для свойства «body». Когда я нажимаю отправить, он создает другие свойства модели из простых текстовых полей. Я поместил следующий код в свой код формы ввода.

 <div class="yui-skin-sam">
        <textarea name= "msgpost" id="msgpost" cols="50" rows="10">
        </textarea>
        <script>

            var myEditor = new YAHOO.widget.Editor('msgpost', {
            height: '300px',
            width: '522px',
            dompath: true, //Turns on the bar at the bottom
            animate: true //Animates the opening, closing and moving of Editor windows
            });

            myEditor.render();

            YAHOO.util.Event.on('Create', 'click', function () {
                myEditor.saveHTML();
                var body = myEditor.get('element').value;

            });                              
        </script>
        @ViewData.Add("Body",//how do I add the javascript variable "body" ?)


</div>
  

Как мне «опубликовать» переменную javascript «body», чтобы конструктор моделей MVC распознал ее?

Вы не можете сделать это в своем представлении MVC. Вам нужно сделать это на javascript.

Вам нужно подключить событие отправки в форме, а затем получить значение текста в редакторе и добавить его к данным post. Что-то вроде:

 $('form').submit(function(event){
    // cancel the default action
    event.preventDefault();
    var body = escape(myEditor.get('element').value);

    var theForm = $(this);
    $.post(theForm.attr('action'), theForm.serialize()   'amp;body='   body, function (data) {
        // do whatever with the result
    });
});
  

Другим способом сделать это было бы добавить скрытое поле в вашу форму и обновить это поле значением редактора:

 <input id="body" name="body" type="hidden" value=""/>
  

тогда вместо установки body переменной вы можете сделать это:

 YAHOO.util.Event.on('Create', 'click', function () {
    myEditor.saveHTML();
    $('#body').attr('value', myEditor.get('element').value);
}); 
  

Тогда данные будут в форме, а форма обработает все остальное.

Напишите какой-нибудь javascript, чтобы сохранить содержимое редактора в скрытом вводе и опубликовать его вместе с формой. Затем вы сможете получить доступ к содержимому в действии контроллера MVC, используя editorBodyText в качестве строкового параметра.

Например, Javascript и HTML:

 <script type="text/javascript" >
   $(document).ready(
        function () {
             $("#submitButton").click( 
                 function(){ 
                        $("#editorBodyText").val(myEditor.get('element').value);
                 }
             );
        }
   );
</script>

<input id="editorBodyText" name="editorBodyText" type="hidden" value=""/>
<input id="submitButton" type="submit" value="save" />
  

Контроллер MVC:

 public ActionResult HandlePost(string editorBodyText){
 //TODO: process your data here e.g. save to DB.
}