remarkable 可以实时转换 里的内</div></div><div class="article"><div id="title"><h1 class='jian'>remarkable 可以实时转换 <textarea> 里的内</h1></div><div style="text-align:center;padding:5px 10px;background:#FAFFED;border:1px dotted #ccc;">作者: <a href="/user/plvukxtx.html">家有饿犬和聋猫</a> | 来源:发表于<span>2020-03-17 10:25 被阅读0次<span class="big" id="fontsize"></span></div><div class="content"><div id="rlist" class="rlist"><ol><li><a href="#r1">remarkable 可以实时转换 <textarea> 里的内</a></li><li><a href="#r2">JS实时计算textarea输入文字长度</a></li><li><a href="#r3">textarea change实时监听触发</a></li><li><a href="#r4">微信小程序|微信小程序的textarea的值value，总数不在</a></li><li><a href="#r5"><TextArea>标签内换行</a></li><li><a href="#r6">I am remarkable</a></li><li><a href="#r7">Unity编辑器扩展基础四、GUILayout</a></li><li><a href="#r8">关系型数据库全表扫描分片详解</a></li><li><a href="#r9">Markdown编辑器:Remarkable for Linux</a></li><li><a href="#r10">进程管理和调度</a></li></ol></div><pre><code>class MarkdownEditor extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); this.state = { value: 'Hello, **world**!' }; } handleChange(e) { this.setState({ value: e.target.value }); } getRawMarkup() { const md = new Remarkable(); return { __html: md.render(this.state.value) }; } render() { return ( <div className="MarkdownEditor"> <h3>Input</h3> <label htmlFor="markdown-content"> Enter some markdown </label> <textarea id="markdown-content" onChange={this.handleChange} defaultValue={this.state.value} /> <h3>Output</h3> <div className="content" dangerouslySetInnerHTML={this.getRawMarkup()} /> </div> ); } } 效果图： ReactDOM.render( <MarkdownEditor />, document.getElementById('markdown-example') ); </code></pre> <img src="https://img.haomeiwen.com/i14880985/408b40588761f3ef.png"> image.png <br> 地址：<a href="https://links.jianshu.com/go?to=https%3A%2F%2Freact.docschina.org%2F" target="_blank">https://react.docschina.org/</a> <p>问题：<br> Remarkable 不能转化/n 只能转换/n/n<br> 解决方法：</p> <pre><code> <div className={styles.value} style={{ whiteSpace: 'pre-line' }} > {completeDesc} </div> </code></pre> <p>加一个样式whiteSpace: 'pre-line<br> 效果：正常换行</p> <img src="https://img.haomeiwen.com/i14880985/9645e94ebb2716cf.png"> image.png </div><div class="relateds"><h2>相关文章</h2><ul><li id="r1"><a href="/user/plvukxtx.html"><img src="https://img.haomeiwen.com/is14880985/408b40588761f3ef.png" width="80"></a><h3><a href="/subject/fxjjzctx.html">remarkable 可以实时转换 <textarea> 里的内</a></h3><p>地址：</p></li><li id="r2"><a href="/user/aooluttx.html"><img src="https://img.haomeiwen.com/us6536866/9bfa0a64-6bcc-438f-93a6-30bd786566f9.jpg" width="80"></a><h3><a href="/subject/nzrtictx.html">JS实时计算textarea输入文字长度</a></h3><p>使用场景 使用textarea，然后限制输入的长度，实时在textarea末尾显示剩余可输入的字节数 判断点： 监...</p></li><li id="r3"><a href="/user/yrbtcttx.html"><img src="https://img.haomeiwen.com/ud/7-0993d41a595d6ab6ef17b19496eb2f21.jpg" width="80"></a><h3><a href="/subject/cwngyttx.html">textarea change实时监听触发</a></h3><p>在此次迭代中，留言回复模块中有一个输入字符，计算剩余字数的功能。本不是什么大功能，但是需要兼容pc和移动。 是利用...</p></li><li id="r4"><a href="/user/gjldottx.html"><img src="https://img.haomeiwen.com/us10673645/1e37b44c-c133-40c1-acf9-7be4f106e2bf.jpg" width="80"></a><h3><a href="/subject/epxtbktx.html">微信小程序|微信小程序的textarea的值value，总数不在</a></h3><p>textarea的光标总是定位到其它位置，不在textarea边界里，仔细发现后，才知道， textarea是行内...</p></li><li id="r5"><a href="/user/dxpkkttx.html"><img src="https://img.haomeiwen.com/us2857487/643cb249ce5b.jpg" width="80"></a><h3><a href="/subject/vewujqtx.html"><TextArea>标签内换行</a></h3><p>利用HTML中的换行符</p></li><li id="r6"><a href="/user/tryhyttx.html"><img src="https://img.haomeiwen.com/ud/11-4d7c6ca89f439111aff57b23be1c73ba.jpg" width="80"></a><h3><a href="/subject/rriohdtx.html">I am remarkable</a></h3><p>I am remarkable，we are remarkable，let’s more and more rem...</p></li><li id="r7"><h3><a href="/subject/tswtactx.html">Unity编辑器扩展基础四、GUILayout</a></h3><p>小结： 1、TextArea、TextField等文本输入框不能复制，TextArea可以换行，可以自适应宽。 2...</p></li><li id="r8"><a href="/user/boslsxtx.html"><img src="https://img.haomeiwen.com/is17039196/bfc725ee64041dfa.png" width="80"></a><h3><a href="/subject/oovkdctx.html">关系型数据库全表扫描分片详解</a></h3><p>导读：数据总线（DBus）专注于数据的实时采集与实时分发，可以对IT系统在业务流程中产生的数据进行汇聚，经过转换处...</p></li><li id="r9"><a href="/user/mlkidttx.html"><img src="https://img.haomeiwen.com/is4450982/c188b65fb124b393.png" width="80"></a><h3><a href="/subject/jricyqtx.html">Markdown编辑器:Remarkable for Linux</a></h3><p>Hello Remarkable 安利一款 Linux 上好用的 Markdown 编辑器：Remarkable....</p></li><li id="r10"><h3><a href="/subject/vsysfctx.html">进程管理和调度</a></h3><p>进程优先级 进程可以分为实时进程和非实时进程。 硬实时进程有严格的时间限制，某些任务必须在指定的时限内完成。这类进...</p></li></ul></div></div><div id="comments"><h2>网友评论</h2><ul></ul></div><ul></ul><div class="article_by"><div class="bytitle"><p>本文标题：<font color="#666">remarkable 可以实时转换 <textarea> 里的内</font></p><p>本文链接：<font color="#666">https://www.haomeiwen.com/subject/fxjjzctx.html</font></p></div></div></div><div class="meiwen-left fl mb"><div class="title ht"><h3>延伸阅读</h3><div class="share fr" id="bdshare"></div><i class="lt"></i><i class="rt"></i></div><div class="related"><ul class="related-list"><li><a class="meiwen" href="/mw/lbyctttx.html">那年盛夏诗歌</a></li><li><a class="meiwen" href="/sy/kbyctttx.html">环境监察队工作总结范文</a></li><li><a class="meiwen" href="/sy/hbyctttx.html">优秀教师学习心得范文</a></li><li><a class="meiwen" href="/sy/cbyctttx.html">华胥引的读后感300字</a></li><li><a class="meiwen" href="/yw/qbyctttx.html">《Its red》教学反思范文</a></li><li><a class="meiwen" href="/sy/fbyctttx.html">农资购销的合同范本</a></li><li><a class="meiwen" href="/sy/xbyctttx.html">竞选中队委优秀演讲稿</a></li><li><a class="meiwen" href="/yw/tbyctttx.html">辞金蹈海的成语解释</a></li><li><a class="meiwen" href="/ja/zvyctttx.html">《世纪宝鼎》公开课教案设计</a></li></ul></div><div class="picture" ><ul class="picture-list"><li><a class="meiwen" href="/article/69641.html"><img class="lazy" data-original="/uploads/allimg/1611/1-1611292156350-L.jpg" width="150" height="120" alt="因为爱你，所以牵挂"/><span>因为爱你，所以牵挂</span></a></li><li><a class="meiwen" href="/article/84632.html"><img class="lazy" data-original="/uploads/userup/2800/14V4C648-O08.jpg" width="150" height="120" alt="今生今世红尘醉——美到心碎的古诗词"/><span>今生今世红尘醉——美到</span></a></li><li><a class="meiwen" href="/article/53482.html"><img class="lazy" data-original="/uploads/allimg/1609/1-160ZPU1030-L.jpg" width="150" height="120" alt="一个90后的内心独白"/><span>一个90后的内心独白</span></a></li><li><a class="meiwen" href="/article/3639.html"><img class="lazy" data-original="/uploads/userup/1159/1432YGR-9294.jpg" width="150" height="120" alt="致已逝去的高中年华"/><span>致已逝去的高中年华</span></a></li></ul></div></div><div class="meiwen-left fl mb"><div id="pinglun"><div id="SOHUCS"></div></div></div><div class="meiwen-left fl"><div class="title ht"><h3>深度阅读</h3><ul class="list"><li><font color="#A2B088">您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！</font></li></ul><i class="lt"></i><i class="rt"></i></div><ul class="tags"><li><a class="meiwen" href="/huati/qingrenjie/">情人节</a></li><li><a class="meiwen" href="/huati/muqinjie/">母亲节</a></li><li><a class="meiwen" href="/huati/chongyangjie/">重阳节</a></li><li><a class="meiwen" href="/huati/qingmingjie/">清明节</a></li><li><a class="meiwen" href="/huati/duanwujie/">端午节</a></li><li><a class="meiwen" href="/huati/zhishujie/">植树节</a></li><li><a class="meiwen" href="/huati/yuanxiaojie/">元宵节</a></li><li><a class="meiwen" href="/huati/funvjie/">妇女节</a></li><li><a class="meiwen" href="/huati/yurenjie/">愚人节</a></li><li><a class="meiwen" href="/huati/shengdanjie/">圣诞节</a></li><li><a class="meiwen" href="/huati/fuqinjie/">父亲节</a></li><li><a class="meiwen" href="/huati/jiaoshijie/">教师节</a></li><li><a class="meiwen" href="/huati/ertongjie/">儿童节</a></li><li><a class="meiwen" href="/huati/laodongjie/">劳动节</a></li><li><a class="meiwen" href="/huati/qingnianjie/">青年节</a></li><li><a class="meiwen" href="/huati/jianjunjie/">建军节</a></li><li><a class="meiwen" href="/huati/wanshengjie/">万圣节</a></li><li><a class="meiwen" href="/huati/pinganye/">平安夜</a></li><li><a class="meiwen" href="/huati/guanggunjie/">光棍节</a></li><li><a class="meiwen" href="/huati/zhongqiujie/">中秋节</a></li><li><a class="meiwen" href="/huati/guoqingjie/">国庆节</a></li><li><a class="meiwen" href="/huati/ganenjie/">感恩节</a></li><li><a class="meiwen" href="/huati/labajie/">腊八节</a></li><li><a class="meiwen" href="/huati/">更多话题</a></li></ul></div><div class="cl"></div></div><div class="article-right"><div class="meiwen-right fr mb"><dt class="title hd"><h3>栏目导航</h3><i class="lt"></i><i class="rt"></i></dt><ul class="list-nav"><a class="meiwen" href="/c/hqtttttx.html">摄影</a><a class="meiwen" href="/c/vqtttttx.html">故事</a><a class="meiwen" href="/c/uttttttx.html">互联网</a><a class="meiwen" href="/c/cttttttx.html">读书</a><a class="meiwen" href="/c/yttttttx.html">旅行</a></ul></div></div><div class="meiwen-right fr mb"><div class="title hd"><h3>热点阅读</h3><i class="lt"></i><i class="rt"></i></div><ul class="right-list"><li><a class="meiwen" href="/subject/badjzctx.html">故宫钟表馆</a></li><li><a class="meiwen" href="/subject/radjzctx.html">你是我年少时的一场梦</a></li><li><a class="meiwen" href="/subject/ladjzctx.html">线性回归算法介绍</a></li><li><a class="meiwen" href="/subject/podjzctx.html">父亲，你儿子也许属于20%</a></li><li><a class="meiwen" href="/subject/kodjzctx.html">大寒小叙</a></li><li><a class="meiwen" href="/subject/qodjzctx.html">周濂用哲学告诉你，生活的意义。</a></li><li><a class="meiwen" href="/subject/ondjzctx.html">TDD练功房-Guess Number解读 [初稿]</a></li><li><a class="meiwen" href="/subject/vndjzctx.html">2020年春运起航</a></li><li><a class="meiwen" href="/subject/mndjzctx.html">利用 skimage 提取图片连通域, 并裁剪</a></li><li><a class="meiwen" href="/subject/endjzctx.html">再读《追风筝的人》</a></li></ul></div></div></div></div><div class="footer"><p class="p_1"><a href="/about/aboutus.html">关于我们</a>|<a href="/about/service.html">服务条款</a>|<a href="/about/contact.html">联系我们</a>|<a href="/subject/fxjjzctx.html">remarkable 可以实时转换 <textarea> 里的内</a>|<a href="/about/tougao.html">投稿指南</a>|<a href="/sitemap.html">网站地图</a>|<a href="/rssmap.html">RSS订阅</a>|<a href="/about/paiban.html">排版工具</a>|<a href="javascript:vod(0);" onclick="Mobileurl()">手机版</a></p><p class="p_2">提供<a href="/meiwen/zhaichao/">经典美文摘抄</a>,<a href="/sanwen/">优美散文欣赏</a>,<a href="/shige/xiandai/">现代诗歌精选</a>,<a href="/xiaoshuo/">短篇小说</a>,<a href="/diary/suibi/">心情随笔</a>,<a href="/qingshu/">表白情书</a><a href="/fanwen/">范文</a>,<a href="/gushi/">故事会在线阅读</a>欣赏</p><p class="p_2">Copyright © 2014-2023 <a href="/">Haomeiwen.com</a> All Rights Reserved. <a href="/">好美文阅读网</a> 版权所有</p><p class="p_2">备案信息：<i></i>桂公网安备 45052102000051号 · 桂ICP备13007215号-3</p><div class="footer_service"><p class="p_2">本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯</p><p class="p_2">所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！</p></div></div><script src="https://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript" src="https://apps.bdimg.com/libs/jquery-lazyload/1.9.5/jquery.lazyload.min.js"></script><script type="text/javascript">$("img.lazy").lazyload({effect : "fadeIn"});</script><script type="text/javascript" src="/img/jquery.meiwen.min.js"></script></body></html>