{"id":35532,"date":"2018-01-16T03:01:33","date_gmt":"2018-01-15T17:01:33","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=35532"},"modified":"2018-01-14T19:47:54","modified_gmt":"2018-01-14T09:47:54","slug":"html-editing-via-div-and-textarea-parsing-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-editing-via-div-and-textarea-parsing-tutorial\/","title":{"rendered":"HTML Editing via Div and Textarea Parsing Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/contentEditable_true.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML Editing via Div and Textarea Parsing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/contentEditable_true_cursor.jpg\" title=\"HTML Editing via Div and Textarea Parsing Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">HTML Editing via Div and Textarea Parsing Tutorial<\/p><\/div>\n<p>The recent <a title='HTML Editing via Textarea and Div Primer Tutorial' href='#htmletdpt'>HTML Editing via Textarea and Div Primer Tutorial<\/a> started us out on an HTML Editing web application via &#8230;<\/p>\n<ul>\n<li>&#8220;div&#8221; <i>contenteditable=&#8221;true&#8221;<\/i> <i>Display edit<\/i> window for the web browser look of the underlying HTML &#8230; of &#8230;<\/li>\n<li>&#8220;textarea&#8221; <i>HTML edit<\/i> window<\/li>\n<\/ul>\n<p>Today we make some changes to fully utilize the screen space available to these two HTML elements, via CSS percentage width and height definitions.<\/p>\n<p>Then we started on our aim to make this a helpful web application for users try to learn about HTML.  So far, what we do to facilitate this is to parse the HTML of the textarea element on the right using our own parsing determinations.  The user sees an interpretation of what the HTML content consists of, around where the textarea cursor has been placed by the user.  We&#8217;d like to thank <a target=_blank title='Useful link' href='http:\/\/stackoverflow.com\/questions\/2897155\/get-cursor-position-in-characters-within-a-text-input-field'>this useful link<\/a>, as we used also when we presented <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/do-it-yourself-html-textarea-editor-cursor-tutorial\/' title='Do It Yourself HTML Textarea Editor Cursor Tutorial'>Do It Yourself HTML Textarea Editor Cursor Tutorial<\/a> some time ago, for some HTML textarea cursor position detection Javascript code.<\/p>\n<p>After the recent <a target=_blank title='Textarea Pointing Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/textarea-pointing-primer-tutorial\/'>Textarea Pointing Primer Tutorial<\/a> project also involving HTML textarea elements we thought this project might need special coding treatment regarding &#8220;paste&#8221; operations into the HTML elements, but our tests show otherwise.  You seem to be able to post text or HTML data into either side, and get results.  So that&#8217;s good.<\/p>\n<p>Again, you can try our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/contentEditable_true.html\" title=\"Click picture\">live run<\/a> link whose underlying HTML and Javascript and CSS can be perused and\/or downloaded as <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/contentEditable_true.html-GETME\" title=\"contentEditable_true.html\">contentEditable_true.html<\/a> if you like, and which changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/contentEditable_true.html-GETME\" title=\"contentEditable_true.html\">this way<\/a> to make this new parsing functionality happen.<\/p>\n<hr>\n<p id='htmletdpt'>Previous relevant <a target=_blank title='HTML Editing via Textarea and Div Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-editing-via-textarea-and-div-primer-tutorial\/'>HTML Editing via Textarea and Div Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/contentEditable_true.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML Editing via Textarea and Div Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/contentEditable_true.jpg\" title=\"HTML Editing via Textarea and Div Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">HTML Editing via Textarea and Div Primer Tutorial<\/p><\/div>\n<p>We want to reopen our comparison of HTML <a target=_blank title='HTML textarea information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_textarea.asp'>textarea<\/a> and <a target=_blank title='HTML div tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_div.asp'>div<\/a> elements, further to &#8230;<\/p>\n<ul>\n<li><a target=_blank title='HTML Textarea and Div Talents Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-textarea-and-div-talents-primer-tutorial\/'>HTML Textarea and Div Talents Primer Tutorial<\/a><\/li>\n<li><a target=_blank title='Textarea Pointing Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/textarea-pointing-primer-tutorial\/'>Textarea Pointing Primer Tutorial<\/a><\/li>\n<li><a target=_blank  href='https:\/\/www.rjmprogramming.com.au\/ITblog\/xml-subtraction-and-addition-genericization-tutorial\/'>XML Subtraction and Addition Genericization Tutorial<\/a><\/li>\n<li><a target=_blank  href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-input-element-types-randomized-iframe-tutorial\/'>HTML Input Element Types Randomized Iframe Tutorial<\/a><\/li>\n<\/ul>\n<p> &#8230; aspects to this discussion, because we want to introduce, on the HTML <i>div<\/i> element side of the ledger the (global) attribute &#8230;<\/p>\n<p><code><br \/>\n <a target=_blank title='HTML Global attribute contenteditable information from w3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp'>contenteditable<\/a>=\"true\"<br \/>\n<\/code><\/p>\n<p> &#8230; an attribute that can turn the HTML <i>div<\/i> element into a great &#8220;display&#8221; mode (HTML) editing tool.  Think those <a target=_blank title='Content Management System (CMS) information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Content_management_system'>Content Management Systems<\/a> &#8230;<\/p>\n<ul>\n<li>&#8220;textarea&#8221; <i>HTML edit<\/i> windows &#8230; teamed with those &#8230;<\/li>\n<li>&#8220;div&#8221; <i>Display edit<\/i> windows for the web browser look of that underlying HTML<\/li>\n<\/ul>\n<p> &#8230; and again, for all those budding bloggers out there, a bit rusty on the HTML this &#8230;<\/p>\n<p><code><br \/>\n&lt;div contenteditable=\"true\"&gt;HTML and\/or Textual content can go here&lt;\/div&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; once with the underlying HTML supplied to it, can be the go for you editing blog postings.<\/p>\n<p>You can try our pretty simple introductory view of this at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/contentEditable_true.html\" title=\"Click picture\">live run<\/a> link whose underlying HTML and Javascript and CSS can be perused and\/or downloaded as <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/contentEditable_true.html_GETME\" title=\"contentEditable_true.html\">contentEditable_true.html<\/a> if you like, and we hope you like.  If this all sounds very familiar to you, compare these ideas to those at <a target=_blank title='Do It Yourself HTML Editor Integration Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/do-it-yourself-html-editor-integration-tutorial\/'>Do It Yourself HTML Editor Integration Tutorial<\/a> if you like, and we hope you like.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d35497' onclick='var dv=document.getElementById(\"d35497\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/attribute\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d35497' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d35532' onclick='var dv=document.getElementById(\"d35532\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/parse\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d35532' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The recent HTML Editing via Textarea and Div Primer Tutorial started us out on an HTML Editing web application via &#8230; &#8220;div&#8221; contenteditable=&#8221;true&#8221; Display edit window for the web browser look of the underlying HTML &#8230; of &#8230; &#8220;textarea&#8221; HTML &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-editing-via-div-and-textarea-parsing-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,37],"tags":[112,216,257,2014,2442,281,342,1822,576,652,899,900,997,1262,1319],"class_list":["post-35532","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-attribute","tag-cms","tag-content","tag-content-management-system","tag-contenteditable","tag-css","tag-div","tag-editor","tag-html","tag-javascript","tag-parse","tag-parsing","tag-programming","tag-textarea","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/35532"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=35532"}],"version-history":[{"count":2,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/35532\/revisions"}],"predecessor-version":[{"id":35538,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/35532\/revisions\/35538"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=35532"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=35532"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=35532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}