How to add placeholder to html content inside </a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2022-05-09T08:41:25.870" class="fromnow">May 09 '22 at 08:41</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2022-05-09T08:41:25.870" datetime="2022-05-09T08:41:25.870">May 09 '22 at 08:41</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 441 times"> <span class="fc-light mr2">Viewed</span> 441 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="72169169" data-ownerid="12092064" data-score="0"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="72169169"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value=""></div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I have an iframe with a Doctype with body and html content inside as follows:</p> <pre><code><iframe> <html lang="en-US"> <head> <style id="mceDefaultStyles" type="text/css"></style> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <body> <p> <br data-mce-bogus="1"> </p> </body> <grammarly-desktop-integration data-grammarly-shadow-root="true"></grammarly-desktop-integration></html> </iframe> </code></pre> <p>Inside I have editable content in the iframe which edits p text content as if it a textarea with html content was. I want to implement something as a placeholder: "Edit html" on it. I've tried different approaches but none working as implementing css or script inserting content in the iframe with to try to edit the content dynamically but nothing works.</p> <p>Is there a proper approach to solve or a right way to do it?</p> <p>Thanks in advance for your response.</p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/javascript" class="post-tag js-gps-track" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/css" class="post-tag js-gps-track" title="show questions tagged 'css'" rel="tag">css</a> <a href="../../questions/tagged/iframe" class="post-tag js-gps-track" title="show questions tagged 'iframe'" rel="tag">iframe</a> <a href="../../questions/tagged/frontend" class="post-tag js-gps-track" title="show questions tagged 'frontend'" rel="tag">frontend</a> <a href="../../questions/tagged/placeholder" class="post-tag js-gps-track" title="show questions tagged 'placeholder'" rel="tag">placeholder</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked May 09 '22 at 08:41">asked May 09 '22 at 08:41</time> <a href="../../users/12092064/ruperto-arrecho" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/12092064.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Ruperto arrecho" /> </a> <div class="s-user-card--info"> <a href="../../users/12092064/ruperto-arrecho" class="s-user-card--link">Ruperto arrecho</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1</li> <li class="s-award-bling s-award-blingbronze" title="1 bronze badges">1</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-72169169" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="72169169" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-127511686" class="comment js-comment " data-comment-id="127511686" data-comment-owner-id="1427878" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment127511686_72169169"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Which part exactly is the problem now, creating a placeholder for a contenteditable element (if so, see https://stackoverflow.com/questions/20726174/placeholder-for-contenteditable-div), or getting it implemented inside the iframe?</span> – <a href="../../users/1427878/cbroe" title="91,630 reputation" class="comment-user ">CBroe</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/72169169/how-to-add-placeholder-to-html-content-inside-iframe#comment127511686_72169169"><span title="2022-05-09T08:44:45.817 License: CC BY-SA 4.0" class="relativetime-clean">May 09 '22 at 08:44</span></a></span> </div> </div> </li> <li id="comment-127511703" class="comment js-comment " data-comment-id="127511703" data-comment-owner-id="12092064" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment127511703_72169169"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Getting it implemented inside the iframe.</span> – <a href="../../users/12092064/ruperto-arrecho" title="1 reputation" class="comment-user owner">Ruperto arrecho</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/72169169/how-to-add-placeholder-to-html-content-inside-iframe#comment127511703_72169169"><span title="2022-05-09T08:45:42.760 License: CC BY-SA 4.0" class="relativetime-clean">May 09 '22 at 08:45</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">0 Answers<span style="display:none;" itemprop="answerCount">0</span></h2> </div> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>