WYSIWYG editors

Thank you for that.
When I use that code, I get this result…

Bizarre. I just copy/pasted the code from #21 to a new HTML document on my PC, opened it in my browser and this is what I see:

Do you have any errors in the console?

I tried it on my local host and it did just now work so I looked into the code and found that https:/ - was missing the second slash and now is okay.
Now I am back to the same issue before - it doesn’t post to the post.asp page. It’s just blank.

Oh. Well spotted.

What is just blank?

Try logging the editor’s HTML to the console, i.e.

form.addEventListener('submit', function(e){
  e.preventDefault();
  console.log(editor.firstChild.innerHTML);
});

Does that show up for you?

So I took this code:

      form.addEventListener('submit', function(e){
        e.preventDefault();
        hiddenInput.value = editor.firstChild.innerHTML

…and replaced it with your code - with and without - this.submit();

Still posts to a blank page.

What did you see in the console?

Then something else is going on. This is what you should be seeing:

Are you using the code from #21 as it was posted, or have you made any alterations?

I have no issues with the editor… I see what you just showed in the pic.

It’s when submitted - it’s a blank page.

Okay… I am using #21 as posted:
I found the first issue where it posted to a blank page. The form input name was left off. Got that fixed.

<input type="hidden" id="myHtml" **name= "myHtml**">

So it posts okay and the only issue I can see is that the font style (Sans Serif, Serif, etc) and font weight (normal, bold, etc) only posts as normal text and size. It shows in the editor put only posts as normal.

This HTML looks a little funny…

<button type="submit">Submit</submit>

Changed to:

<input type="submit" value="Submit"></submit>

Thank you.

Still looks a little funny…

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit

So if I remove </submit> would that satisfy you? If not, just let me know what I am doing wrong.
Thank you.

1 Like

If you paste the HTML code into the validator textarea and check, it should give some clue about what to do

3 Likes

Thank you for that, I wasn’t familiar with that. Everything validates! Good to use in future.

3 Likes

Strange. As you can see from the attached screenshot, it is being passed to the event handler in the correct form.

Can you post the output of what you are receiving on the server (before doing any sanitizing or anything).

The result once you post:
2

view source of page:


<p><span class="ql-size-large">I am a paragraph</span></p><p><br></p><p><span class="ql-size-huge">I am a paragraph</span></p><p><br></p><p><span class="ql-size-large">I am a paragraph</span></p><p><br></p><p><span class="ql-font-serif ql-size-large">I am a paragraph</span></p>

So I was thinking that perhaps on the post page the span class is not identified so I copied over the links to the post page and same result.

Sorry, you’re a couple of steps ahead of me. What are the contents of the myHtml variable as it is being received on the server.

I’m not overly familiar with ASP, but this should show you the data the ASP page is receiving:

Form data is: <%=Request.Form%>  

What does that output if you add it to the very top of your ASP file?

Once the contents are received from the asp page it’s just html at that point. Here’s the post page:

<%myHtml=Request.Form ("myHtml")%>
<%response.Write myHtml%>

This works because it’s normal html:

Results on post page:
2
View source of post page:

<p><strong style="color: rgb(230, 0, 0);">Red and Bold</strong></p><p><br></p><h2>H2 This is a paragraph</h2><p><br></p><p><em><u>italic and underlined here</u></em></p>

I am no expert at this but again I wonder if the prior example doesn’t show because it’s not normal html and needs to be defined by css?

Hope I explained everything correctly.

So whatever the user enters into the editor is submitted correctly to the ASP page.

Where is this data not displaying correctly? I still haven’t understood that.