HTML: Czy istnieje sposób wyświetlania obrazów w obszarze tekstowym?

1

można użyć CSS, aby ustawić obraz tła dla pola tekstowego, a js aby ustawić tekst

2010-09-25 08:51:56 yangqi

+0

Nie chcę tło dla textarea, chcę mieć obrazów wewnątrz pola tekstowego. A może chcesz zhakować tekst z tłem, żeby wyglądało na to, że w tekście jest obraz? Jeśli tak, to nie jest dobry pomysł, ponieważ będzie wiele obrazów, a także można je aktualizować i usuwać. Zmieniono moje pytanie, aby je zilustrować. – Adam

+0

O ile mi wiadomo, nie można używać obrazów w obszarze tekstowym, ani zestawu obrazów tła z CSS ani elementu img. – matsolof

+0

Nie wiem, co chcesz zrobić, ale możesz wstawić do textarea wszystko oprócz zwykłego tekstu. Podczas gdy możesz użyć CSS do ustawienia obrazu tła dla obszaru tekstowego, jeśli chcesz go zmienić, możesz użyć javascript do zmiany tła. – yangqi

1

Krótka odpowiedź brzmi: nie, to nie jest możliwe, przepraszam.

Źródło

2010-09-25 08:56:26 thomasmalt

+1

Dzięki za odpowiedź @thomasmalt, co sugerujesz, jak mam to zrobić? – Adam

+0

Nie jestem pewien, co próbujesz osiągnąć. Czy chcesz korzystać z obszarów tekstowych z obrazami, aby wyświetlać zawartość użytkownikowi, czy chcesz korzystać z obszaru tekstowego w formie, w której użytkownik przesyła tekst i przesyła obrazy? – thomasmalt

6

Rozumiem, że chcesz edytować tekst i obrazy, ale ... dlaczego to musi być wewnątrz textarea? Kontrola taka ma na celu utrzymanie zwykłego tekstu. Są tam wiele edytorów HTML napisane w JavaScript:

Źródło

2010-09-25 09:06:55

+0

Ponieważ nie chcę budować skomplikowanego edytora, tak jak powiedziałem, chcę tylko "tekst" i "zdjęcia". – Adam

+0

Pytanie użytkownika dotyczyło konkretnie obszaru tekstowego. –

+3

@DustinOprea - To niemożliwe. Kropka. Element '' może zawierać tylko zwykły tekst, a nie inne węzły. – <span class="text-secondary"> <small> <span></span> </small> </span> </p> </div> </div> </div> </div> </div> </article> <article class="board-top-1 padding-top-10"> <div class="post-col vote-info"> <span class="count">49<i class="fa fa-thumbs-up"></i></span> </div> <div class="post-offset"> <div class="answer fmt"> <p>Użyj div z contentEditable atrybut, który działa jak obszar tekstowy. W ten sposób tworzone są edytory WYSIWYG.</p> <p></p> <div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code" id="sn1"> <pre class="snippet-code-css lang-css prettyprint-override"><code class="prettyprint-override">div { width: 300px; height: 200px; border: 1px solid #ccc; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code class="prettyprint-override"><div contentEditable="true">Type here. You can insert images too <img src="http://t2.gstatic.com/images?q=tbn:ANd9GcQCze-mfukcuvzKk7Ilj2zQ0CS6PbOkq7ZhRInnNd1Yz3TQzU4e&t=1" /> </div></code></pre> </div> </div> <p></p> </div> <div class="post-info"> <div class="post-meta row"> <p class="text-secondary col-lg-6"> <span class="source"> <a rel="noopener" target="_blank" href="https://stackoverflow.com/q/5607496">Źródło</a> </span> </p> <p class="text-secondary col-lg-6"> <span class="float-right date"> <span>2011-04-09 19:56:29</span> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/560735/">Hussein</a></span> </p> <p class="col-12"></p> <p class="col-12"></p></div> </div>  <div class="comments"> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+7</span></div> <div class="col-lg-11"> <p class="commenttext">XSS niebo, to. – <span class="text-secondary"> <small> <span></span> </small> </span> </p> </div> </div> </div> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+1</span></div> <div class="col-lg-11"> <p class="commenttext">Dobra wiadomość: http://caniuse.com/#feat=contenteditable – <span class="text-secondary"> <small> <span></span> </small> </span> </p> </div> </div> </div> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+2</span></div> <div class="col-lg-11"> <p class="commenttext">Ten przykład robi naprawdę dziwne rzeczy, jeśli próbuję wstawić znaki nowej linii. W Chrome przynajmniej. – <span class="text-secondary"> <small> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/609251/">aroth</a></span> <span></span> </small> </span> </p> </div> </div> </div> </div> </div> </article> <div> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6208739752673518" data-ad-slot="1038284119" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="clearfix"> </div> <div> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-6208739752673518" data-ad-slot="1575177025"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="padding-top-10"></div> </div> </div> <script type="text/javascript" src="http://img.uwenku.com/uwenku/script/side.js?t=1644592048877"></script> <script type="text/javascript" src="http://img.uwenku.com/uwenku/plugin/highlight/highlight.pack.js"></script> <link href="http://img.uwenku.com/uwenku/plugin/highlight/styles/docco.css" media="screen" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $('pre').each(function(i, e) { hljs.highlightBlock(e, "<span class='indent'> </span>", false) }); </script> <div class="col-lg-3 col-md-4 col-sm-5"> <div id="rightTop"> <div class="row"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6208739752673518" data-ad-slot="5415218910" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="row sidebar panel panel-default"> <div class="panel-heading font-bold"> Ostatnie pytanie </div> <div class="m-b-sm m-t-sm clearfix"> <ul class="side_article_list"> <li class="side_article_list_item"> 1. <a href="http://pl.uwenku.com/question/p-mllbaygj-c.html" target="_blank" title="Jak wykryć urządzenia terminala przypisanego do pracy interaktywnej"> Jak wykryć urządzenia terminala przypisanego do pracy interaktywnej </a> </li> <li class="side_article_list_item"> 2. <a href="http://pl.uwenku.com/question/p-xxhvlogn-m.html" target="_blank" title="Jak wyświetlić plik DJVU w UIWebview"> Jak wyświetlić plik DJVU w UIWebview </a> </li> <li class="side_article_list_item"> 3. <a href="http://pl.uwenku.com/question/p-oqhfhcyv-x.html" target="_blank" title="Call to metoda niezdefiniowany PDOStatement :: setFetchMode()"> Call to metoda niezdefiniowany PDOStatement :: setFetchMode() </a> </li> <li class="side_article_list_item"> 4. <a href="http://pl.uwenku.com/question/p-klvvdpld-r.html" target="_blank" title="ACL - Zaimplementuj acl razem z paszportem"> ACL - Zaimplementuj acl razem z paszportem </a> </li> <li class="side_article_list_item"> 5. <a href="http://pl.uwenku.com/question/p-hoqmasfs-r.html" target="_blank" title="Jak uzyskać historię rejestrów połączeń telefonicznych profilu pracy organizacji w mojej aplikacji (opublikowanej jako aplikacja prywatna)"> Jak uzyskać historię rejestrów połączeń telefonicznych profilu pracy organizacji w mojej aplikacji (opublikowanej jako aplikacja prywatna) </a> </li> <li class="side_article_list_item"> 6. <a href="http://pl.uwenku.com/question/p-acrgsmmk-v.html" target="_blank" title="Uruchamianie wielu testów powoduje zakłócenia w testach nosa podczas łatania przy użyciu funkcji @ mock.patch.object, a czasami także podczas używania `with mock.patch.object`"> Uruchamianie wielu testów powoduje zakłócenia w testach nosa podczas łatania przy użyciu funkcji @ mock.patch.object, a czasami także podczas używania `with mock.patch.object` </a> </li> <li class="side_article_list_item"> 7. <a href="http://pl.uwenku.com/question/p-qioyucks-x.html" target="_blank" title="Jak zapobiec przywoływaniu animacji css po użyciu selektora ": active"?"> Jak zapobiec przywoływaniu animacji css po użyciu selektora ": active"? </a> </li> <li class="side_article_list_item"> 8. <a href="http://pl.uwenku.com/question/p-sdharorp-p.html" target="_blank" title="Jak zatrzymać doktrynę próbującą utworzyć tabelę dla widoku, który został odwzorowany na encji?"> Jak zatrzymać doktrynę próbującą utworzyć tabelę dla widoku, który został odwzorowany na encji? </a> </li> <li class="side_article_list_item"> 9. <a href="http://pl.uwenku.com/question/p-bhmhpeal-ba.html" target="_blank" title="Jak wprowadzić dane wejściowe ze zmianą rozmiaru w Tensorflow"> Jak wprowadzić dane wejściowe ze zmianą rozmiaru w Tensorflow </a> </li> <li class="side_article_list_item"> 10. <a href="http://pl.uwenku.com/question/p-oowsdosm-v.html" target="_blank" title="Błąd: Wykonanie nie powiodło się dla zadania ": app: transformDexArchiveWithExternalLibsDexMergerForDebug". >"> Błąd: Wykonanie nie powiodło się dla zadania ": app: transformDexArchiveWithExternalLibsDexMergerForDebug". > </a> </li> </ul> </div> </div> </div> <p class="article-nav-bar"></p> <div class="row sidebar article-nav"> <div class="row box_white visible-sm visible-md visible-lg margin-zero"> <div class="top"> <h3 class="title"><i class="glyphicon glyphicon-th-list"></i> Powiązane problemy</h3> </div> <div class="article-relative-content"> <ul class="side_article_list"> <li class="side_article_list_item">Brak powiązanych problemów^_^</li> </ul> </div> </div> </div> </div> </div> </div> </div>  <footer id="footer"> <div class="bg-simple lt"> <div class="container"> <div class="row padder-v m-t"> <div class="col-xs-8"> <ul class="list-inline"> <li><a href="http://pl.uwenku.com/contact">Skontaktuj się z nami</a></li> <li>© 2020 PL.UWENKU.COM</li> <li><a target="_blank" href="https://beian.miit.gov.cn/">沪ICP备13005482号-4</a></li> <li><script type="text/javascript" src="https://v1.cnzz.com/z_stat.php?id=1280101193&web_id=1280101193"></script></li> <li><a href="http://www.uwenku.com/" target="_blank" title="优文库">简体中文</a></li> <li><a href="http://hk.uwenku.com/" target="_blank" title="優文庫">繁體中文</a></li> <li><a href="http://ru.uwenku.com/" target="_blank" title="поле вопросов и ответов">Русский</a></li> <li><a href="http://de.uwenku.com/" target="_blank" title="Frage - und - antwort - Park">Deutsch</a></li> <li><a href="http://es.uwenku.com/" target="_blank" title="Preguntas y respuestas">Español</a></li> <li><a href="http://hi.uwenku.com/" target="_blank" title="कार्यक्रम प्रश्न और उत्तर पार्क">हिन्दी</a></li> <li><a href="http://it.uwenku.com/" target="_blank" title="IL Programma di chiedere Park">Italiano</a></li> <li><a href="http://ja.uwenku.com/" target="_blank" title="プログラム問答園区">日本語</a></li> <li><a href="http://ko.uwenku.com/" target="_blank" title="프로그램 문답 단지">한국어</a></li> <li><a href="http://pl.uwenku.com/" target="_blank" title="program o park">Polski</a></li> <li><a href="http://tr.uwenku.com/" target="_blank" title="Program soru ve cevap parkı">Türkçe</a></li> <li><a href="http://vi.uwenku.com/" target="_blank" title="Đáp ứng viên">Tiếng Việt</a></li> <li><a href="http://fr.uwenku.com/" target="_blank" title="Programme interrogation Park">Française</a></li> </ul> </div> </div> </div> </div> </div> </footer>  <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?f78a970f17b19a79fc477a3378096f29"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>

HTML: Czy istnieje sposób wyświetlania obrazów w obszarze tekstowym?

Odpowiedz