textarea instead div

[ferrycode]

is it possible to bind to text area instead of div ???

[ghost]

At the moment it's not possible to use textarea, see this previous issue #54

[benjibee]

Though this is a beautiful little bit of code, and a great idea, but I agree with the idea of this being an issue, really.

If you are editing text, you are likely going to need to save it at some point, and only successful controls are sent via forms… so why not make this fully compatible with W3C specs?

As it is if JS is disabled the content is no longer editable at all and the data cannot be changed… c'mon!

[kerwitz]

As a workaround you could present the content in textareas and only replace those with divs when initializing the editor. This will save you when JS is disabled.
Saving shoudn't be that much of a problem either, simply wrap the editor in a form and hook in on the submit event of that, then replace the divs back with textareas once the user submits the form.
Voila, safe implementation.

People need a bit of imagination these days.. c'mon. ;)

[wmeints]

As much as I love the idea of a simple div for the editor, it's quite hackey to copy the content over to some hidden element to post it to the server. Especially since things can be fixed simply by basing the whole editor on a textarea.

Right now, I can't integrate this without breaking half the editor functionality of the CMS I'm working on.

[jordandh]

The editors that use a textarea element usually hide the textarea and show an editable iframe document. They then keep the hidden textarea in sync by copying the contents of the iframe document into the textarea. As far as I know you cannot execute the rich text commands on the text in a textarea. This leaves us with using contenteditable on other elements and copying over the value before posting. denoir's solution to this is pretty solid. Alternatively you could submit the data via ajax.

[wmeints]

So basically, the best option is to sync a hidden textarea with the div and go from there?

[kerwitz]

When implemented the right way my solution shouldn't be that hacky at all, you know it happens that libraries won't be compatible with your current setup and you need to customize them or the way you implement them in some way.

This is how I did it for ace editor:

    $('.source-editor').each(function () {
        $this = $(this);
        if (!$this.data('ace')) {
            if (!$this.attr('id')) $this.attr('id', randomString(10));
            if ($this.is('textarea')) {
                var $that = $('<div id="'+$this.attr('id')+'" class="'+$this.attr('class')+'" data-name="'+$this.attr('name')+'"></div>')
                    .insertAfter($this)
                    .data('ace-original', $this.val());
                $this.remove();
                $this = $that;
            } else {
                $this.data('ace-original', $this.html());
            }
            $this.data('ace', ace.edit($this.attr('id')));
        }
    });
    $('form#config').on('submit', function () {
        var $form = $(this);
        $('.source-editor').each(function () {
            var $editor = $(this);
            $('<textarea name="'+$editor.data('name')+'"></textarea>')
                .val($editor.data('ace').getSession().getValue())
                .appendTo($form)
                .hide();
        });
    });

[scaryguy]

I'm sorry but this major feature absence turns this cool project to something useless...

In the modern web world, we DO use inputs and textareas to save data through our applications...

So, I was about to use this inside my project but after reading this issue I've changed my mind.

I think you'd better work on an implementation with textarea... Just a friendly suggestion...

[kerwitz]

Guys, why don't you stop complaining and start making pull requests instead?
It's open source for a reason.
I already described an effective workaround above that is simple to
implement. Are you really telling me you're not using an open source
product because it doesn't fit your workflow? Just dive in there and
make it fit. You got the code, you got the solution: go for it.

[f-do]

That's the best answer @DeNoir - you are so right +1

[felipevanc]

It's like a beautiful bicylce without wheels.

[felipevanc]

denoir.. I have no ability whatsoever to modify this project in order to make it work over textareas you guys are our only hope, plus I assume there must be a major difficulty to make it work over textarea otherwiase you guys already have done that.

[adampatterson]

I think you could use jQuery to post the form but before the submission load the wysiwyg contents into a hidden textarea.

I can see that this editor would work perfect with auto save but I am validating this for a CMS and have other fields that need to be submitted.

[amirmasoud]

$('#btn-publish-post').click(function(){
$('#textarea-id').html($("#editor-id").html());
});

before submitting the original form copy content of the div to textarea.

[ajw1970]

I'm still just evaluating this but I'm assuming the problem comes from losing focus when going out of the textarea to click a button to format what was selected in the textarea... until it lost focus.

[netwire88]

There's a couple ways to solve this. Here's my way:

1. create a hidden input field with id = 'hidden1' or whatever you want.
2. create a div with id = 'editor1'
3. before form is submitted either via ajax (in this case), or submit, copy the html of #editor1 into #hidden1
4. when displaying output, just copy in the reverse direction.

  $(document).on("ajax:before", "#form-wysiwyg", function(e) {
    $('#hidden1').val($('#editor1').html());
  });

  $('#editor1').html($('#hidden1').val());

[benjibee]

Yeah… there are plenty of ways to pass this information to various successful inputs via Javascript or jQuery. The point (of my original comment) is that this will not work with Javascript disabled. Just not a good practise.

[johnantoni]

+1 for textarea support

[kerwitz]

@felipevanc

denoir.. I have no ability whatsoever to modify this project in order to make it work over textareas you guys are our only hope, plus I assume there must be a major difficulty to make it work over textarea otherwiase you guys already have done that.

It is really just a matter of ~20 lines of code, there's not that much magic to it. I did not make a pull request yet because I didn't need the fix for this project but for ace it is the same process though.

@benjibee

The point (of my original comment) is that this will not work with Javascript disabled. Just not a good practise.

When you deliver the original value in a textarea the user can still edit and save it.

[AlexanderPilhar]

I wanted to use this editor in ASP.NET MVC with Razor - and, obviously, encountered the same issue. Anyway, you guys already came up with some good ideas and since this is not closed yet, I'll add my two cents:

// enable editor on div
$('#editor-premise-description').wysiwyg();

// bind to event (occurs whenever the editor's content is changed)
$('#editor-premise-description').bind('DOMSubtreeModified', function () {

   // #Description is a hidden input
   // update #Description's value with editor's content
   $('#Description').attr('value', $('#editor-premise-description').html());
});

This way my data model's property (Description) will always be up to date, on every key stroke and format change.

Of course, this needs the use of JavaScript and JQuery - I don't see much of a problem there, since using this editor already requires the use of JavaScript and JQuery.

For ASP.NET MVC: you will need to set [AllowHtml] on your viewmodel's/model's property - otherwise there will be a complaint because of dangerous input value!