最近30次来自stackoverflow.com 2024-07-12T00:41:20Z年7月12日 https://stackoverflow.com/feeds/tag？标记名=richtextbox+javascript和；排序=投票 https://creativecommons.org/licenses/by-sa/4.0/rdf https://stackoverflow.com/q/78450722 0 阿曼。W4u型 https://stackoverflow.com/users/23684057 2024-05-08T19:10:22Z 2024-05-08T19:10:22Z

<p>ReacT-native RichTextBox导航数据和在屏幕之间传递数据</p><p>我想在一个屏幕上有一个富文本框，我写的任何内容都会显示在下一个屏幕中，就像上一个屏幕的文本框中写的内容一样</p>（第页）

https://stackoverflow.com/q/1619167 248 佩卡 https://stackoverflow.com/users/187606 2009年10月24日下午1:20:17分 2023-05-17T10:33:09Z

<p>为了便于维护，我在CMS中存储了许多HTML块。它们由<code>&lt；表示；文本区域&gt</代码>s</p><p>有人知道某种JavaScript Widget，它可以在<code>textarea</code>或类似区域内为HTML进行语法高亮显示，同时仍然保持纯文本编辑器（没有所见即所得或高级函数）吗</p>（第页）

https://stackoverflow.com/q/583845 4 汤姆-雷曼 https://stackoverflow.com/users/25068 2009年02月24日T22:11:26Z 2022-11-15T07:27:17Z

<p>我的web应用程序与StackOverflow类似，因为不同的用户经常编辑相同的文本块</p>（第页）<p>目前我们只支持纯文本，因此很容易向用户显示文本在编辑之间是如何更改的</p>（第页）<p>我想在这些字段中支持富文本，但我的用户是非技术性的，因此任何类型的标记都不是一个选项</p>（第页）<p><strong>是否有支持差异的基于javascript的富文本编辑器</strong>理想情况下，差异也应该是富格文本，但如果需要，可以用降价或类似的方式呈现（我想不惜一切代价避免使用原始HTML）</p>（第页）

https://stackoverflow.com/q/16944429 0 用户1620350 https://stackoverflow.com/users/0 2013年6月5日T15:53:11Z 2020年2月6日至14日00时08分55秒

<p>我正在开发一个富文本编辑器</p>（第页）<p>如果i<code>document.execCommand（'bold'，false，null）</code>在<code>粘贴HTML之前插入一些文本，则它不起作用。我想发送命令“bold”，然后用粘贴HTML插入一些特殊文本，并使该文本变为粗体</p>（第页）<p>我使用粗体作为示例，但可以是任何execCommand</p>（第页）<p>有什么帮助吗</p>（第页）

https://stackoverflow.com/q/12549739 6 Nitish Borade公司 https://stackoverflow.com/users/1621657 2012年9月23日T04:28:00Z 2022-01-05T13:37:07Z

<p>有没有办法在GWT RichTextArea中设置cusror位置。在TextArea中有方法setCusrorPosition（）可以这样做，但在RichTextArea.中没有</p>（第页）<p>也许有一个本地JavaScript（从GWT调用）可以设置RichTextArea中的光标位置</p>（第页）

https://stackoverflow.com/q/62705449 8 RedDragonWebDesign网站设计 https://stackoverflow.com/users/3480193 2020-07-02T21:40:44 Z 2022-01-04T20:29:03Z

<p>在<code>&lt；中键入时，如何将光标保持在正确的位置；div id=&quot；rich文本框；contenteditable=&quot；真&quot&gt&它/div&gt</code>谁的innerHTML在每次击键时都会更改？替换innerHTML的操作会弄乱光标位置</p>（第页）<p>我更改innerHTML的原因是我添加了<code>&lt；span&gt</代码>标签。它是代码突出显示程序的一部分。span标记允许我放置正确的颜色突出显示</p>（第页）<p>我目前正在使用StackOverflow答案中的以下代码作为创可贴，但它有一个严重的错误。如果您点击<em><strong>输入</strong></em>，光标将停留在旧点，或转到随机点。这是因为该算法计算从光标开始的字符数。但它不将HTML标记或换行符计算为字符。并且richTextBox插入<code>&lt；br&gt</code>进行输入</p>（第页）<p>修复思路：</p><ul><li>修复以下代码？请参见<a href=“https://jsfiddle.net/AmpiralAkbar2/jou3vq9w/12网站/“rel=”nofollow noreferrer“>小提琴</a></li><li>用更简单的代码替换？我尝试了一些简单的东西，包括<code>window.getSelection（）</code>和<code>document.createRange（）</code>，但我无法实现</li><li>替换为没有此错误的richTextBox库或模块</li></ul><h2>屏幕截图</h2><p><a href=“https://i.sstatic.net/6dlqV.png（网址：https://i.sstatic.net/6dlqV.png）“rel=”nofollow noreferrer“><img src=”https://i.sstatic.net/6dlqV.png“alt=”在JSFiddle中呈现的richTextBox屏幕截图“/></a></p><p><div class=“snippet”data-lang=“js”data-hide=“false”data-console=“true”data-babel=“false”><div class=“snippet-code”><pre class=“snippet-code-js lang-js prettyprint-override”><code>//归于Liam（堆栈溢出）// https://stackoverflow.com/a/41034697/3480193类光标{静态getCurrentCursorPosition（parentElement）{var selection=window.getSelection（），charCount=-1，节点；if（selection.focusNode）{if（Cursor._isChildOf（selection.focusNode，parentElement））{node=selection.focusNode；charCount=selection.focusOffset；while（节点）{if（节点===父元素）{断裂；}if（节点.previousSibling）{node=节点.previousSibling；charCount+=节点.textContent.length；}其他{node=节点.parentNode；if（节点==为空）{断裂；}}}}}返回charCount；}静态setCurrentCursorPosition（字符，元素）{if（字符&gt；=0）{var selection=window.getSelection（）；let range=光标_createRange（元素，{count:chars}）；if（范围）{范围塌陷（false）；selection.removeAllRanges（）；selection.addRange（范围）；}}}静态创建范围（节点、字符、范围）{if（！范围）{range=文档.createRange（）range.selectNode（节点）；range.setStart（节点，0）；}if（字符数===0）{range.setEnd（节点，字符数）；}else if（节点&amp；字符计数&gt；0）{if（node.nodeType===节点.TEXT_node）{if（node.textContent.length&lt；chars.count）{chars.count-=节点.textContent.length；}其他{range.setEnd（节点，字符数）；chars.count=0；}}其他{for（var lp=0；lp&lt；node.childNodes.length；lp++）{range=光标_createRange（node.childNodes[lp]，chars，range）；if（字符数===0）{断裂；}}}} 返回范围；}static _isChildOf（节点，parentElement）{while（节点！==空）{if（节点===父元素）{返回true；}node=节点.parentNode；}返回false；}}window.addEventListener（'DOMContentLoaded'，（e）=&gt；{let richText=文档.getElementById（'rich-text'）；richText.addEventListener（“输入”，函数（e）{let offset=光标.getCurrentCursorPosition（richText）；//假设我们在这里使用innerHTML。innerHTML最终将被稍微更改的代码所取代。让s=richText.innerHTML；richText.innerHTML=“”；richText.innerHTML=s；Cursor.setCurrentCursorPosition（偏移量，richText）；richText.focus（）；//闪烁光标});});</代码></pre><pre class=“snippet-code-css lang-css prettyprint-override”><code>正文{边距：1em；}#富文本{宽度：100%；高度：450px；边框：1px纯黑色；光标：文本；溢出：滚动；调整大小：两者；/*在Chrome中，必须具有display:inline-block for contenteditable=true以防止添加&lt；div&gt&书信电报；p&gt；和&lt；span&gt；当你打字的时候*/显示：嵌入式块；}</code></pre><pre-class=“snippet-code-html lang-html prettyprint-override”><code>&lt；p&gt；单击第1行中间的某个位置。按enter键。开始键入。光标位于错误的位置。&它/p&gt；&它；p&gt；重置。单击第1行中间的某个位置。按enter键。再次按enter键。光标指向某个随机位置。&它/p&gt；&它；div id=“富文本”contenteditable=“true”&gt；测试123&lt；br/&gt；测试456&lt/div&gt</代码></pre></div></div></p><h2>浏览器</h2><p>谷歌Chrome v83，Windows 7</p>

https://stackoverflow.com/q/2857069 0 萨钦 https://stackoverflow.com/users/120487 2010年5月18日T12:11:07Z 2021-04-14T19:52:53Z

<p>我必须将<code>OnKeyPress</code>事件附加到文本类型为&quot；的SharePoint多行列；增强富文本“</strong>。下面是我正在使用的jscript代码</p><pre><code>&lt；脚本&gt；var ele=文档.getElementById（inpID）；if（ele！=空）{ele.onkeypress=function（）{calLen（this）；}；}函数calLen（obj）{if（obj.value.length&gt；=5）{警报（“不能超过字符限制5”）；obj.value=对象值子字符串（0,5）；}&它/脚本&gt；</code></pre><p>但这项活动并没有得到重视</p>（第页）<p>使用文本类型为&quot；的SharePoint Multiline TextBox<strong>，一切都很好；纯文本&quot</strong></p>（第页）<p>有人能帮我解决这个问题吗</p>（第页）

https://stackoverflow.com/q/12031199 2 亚历克斯·卢亚 https://stackoverflow.com/users/258274 2012年8月20日T00:58:26Z 2021-03-14T10:07:14Z

<p>以下代码用于将属性样式设置为body元素并向其注册剪切/粘贴代码，但失败了。奇怪的是，调试时，变量<code>body</code>不为null，属性&quot；风格&quot；存在，但框架没有此子项。运行工作没有按预期工作，调用<code>setBodyContent（）</code>时抛出了NPE</p>（第页）公共类TextAreaExt扩展了RichTextArea{私有BodyElement主体；@覆盖受保护的void onLoad（）{super.onLoad（）；body=（（FrameElement）getElement（）.cast（））.getContentDocument（）.getBody（）；body.setAttribute（“样式”，“颜色：灰色”）；寄存器OnCut（正文）；}public void setBodyContent（字符串文本）{body.setInnerText（文本）；}private native void registerOnCut（BodyElement元素）/*-{var that=这个；控制台.log（registerOnCut）；element.oncut=$entry（函数（事件）{//调用方法根据内容调整高度返回false；});element.onpaste=$entry（函数（事件）{//invoke方法根据内容调整高度返回false；});}-*/;}</code></pre>

https://stackoverflow.com/q/63256579 三 米盖尔·安吉尔·马拉奎因（Miguel Angel Marroquin Jordan） https://stackoverflow.com/users/12007705 2020-08-04T23:54:28Z 2020-10-20年T16:08:22Z

<p>我正在使用React-Quill将富文本编辑器添加到我的应用程序中</p>（第页）<p>在我的数据库中有下一个字符串存储：</p><pre><code>const text='&lt；p&gt；您好&lt；强烈&gt；世界&lt/强&gt&它/p&gt&书信电报；p&gt&书信电报；强&gt；下一行&lt/强&gt&它/p&gt；'；</code></pre><p>现在我想；渲染（&quot；）；REACT组件中的文本常量，但带有&quot；施蒂尤林“；HTML提供给它的</p><p>你好<strong>世界</strong></p><p><strong>下一行</strong></p><p>我该怎么做？或其他富文本编辑器来实现这一点</p>（第页）

https://stackoverflow.com/q/61007481 0 莫希特·钱德尔 https://stackoverflow.com/users/12174711 2020-04-03T08:04:17兹 2020-04-03T08:04:17Z

<p>我正在一个laravel网站上工作，我有一个用Vue构建的富文本编辑器。约。我在编辑页面上，想在富格文本编辑器中显示以前保存的内容以进行一些编辑。在这个页面上，我得到了一个PHP laravel变量<code>{{cms-&gt；p_content}}</code>，它的值存储在数据库中，如何在富文本编辑器中显示这个变量的值</p>（第页）<p>我的代码</p><pre><code>&lt；fieldset class=“form-group”&gt；&它；文本区域name=“p_content”class=“表单控制”id=“编辑器”rows=“10”行placeholder=“内容”v-tinymce-editor=“content”&gt；&它/文本区域&gt；&它/字段集&gt；</code></pre><p>VueJ系列</p><pre><code>$（函数（）{//tinymce指令Vue.指令（'tinymce-editor'，{twoWay：正确，绑定：函数（）{var self=此；tinymce.init公司({选择器：“#编辑器”，设置：函数（编辑器）{//初始化tinymceeditor.on（'init'，function（）{tinymce.get（'editor'）.setContent（self.value）；});//键入keyup事件时editor.on（'keyup'，function（）{//获取新值var new_value=tinymce.get（'editor'）.getContent（self.value）；//设定模型值self.set（新值）});}});},update:函数（newVal、oldVal）{//设置val和触发事件$（this.el）.val（newVal）.trigger（'keyup'）；}})新Vue({el:“#tinymce-form”，数据：{内容：“”}})})</code></pre>

https://stackoverflow.com/q/48748177 1 被征服的袋熊 https://stackoverflow.com/users/7073944 2018年2月12日T13:56:54Z 2019-12-18 T13:31:54 Z

<p>我想在我的Froala Editor框中添加一个¶Plicrow符号（CSS实体00B6）和换行符（CSS主体21B5），以便我的用户能够对正在发生的事情有一些了解。其他RT编辑器似乎提供了这一开箱即用的功能，但尽管我发现Froala是一个优秀且经过精心设计的产品，但这一功能缺失了</p>（第页）<p>我找到了这个优秀的SO答案<a href=“https://stackoverflow.com/questions/43181961/visualize-line-break-and-paragraph-break-with-symbols-in-html-similar-to-word“>使用类似于单词</a>的html符号可视化line-break和paragraph break。但是，跨浏览器解决方案在br之前添加了一个span。我正在查看包含富文本编辑插件的contentEditable元素，我担心这样的注入会以某种方式破坏内容</p><p>有一个工作<a href=“https://codepen.io/JEE42/pen/XZRvLM“rel=”nofollow noreferrer“>codepen here</a>使用上述问题中的非跨浏览器CSS专用解决方案</p><pre><code>抱歉，我无法按照以下开放式问题提供片段。。。</code></pre><p><a href=“https://stackoverflow.com/questions/46156470/set-up-a-so-snippet-for-forala-editor“>为Froala Editor设置SO代码段</p><p>这就是它的样子</p>（第页）<p>问题-如何使用纯CSS解决方案或不会让Froala崩溃的js解决方案实现这种跨浏览器行为</p>（第页）<p><a href=“https://i.sstatic.net/uPali.png“rel=”nofollow noreferrer“><img src=”https://i.sstatic.net/uPali.png“alt=”在此处输入图像描述“></a></p>

https://stackoverflow.com/q/57494361 8 瓦比哈夫·布瓦 https://stackoverflow.com/users/53233738 2019-08-14T12:05:34Z 2019-08-20T13:02:10Z

<p>问题陈述：我最近从CKEditor 4更新到了CKEditor 5，并且遇到了渲染Html页面的问题。我发现，当我向CKEditor 5提供HTML内容时，它会删除所有样式并呈现为纯HTML</p>（第页）<p>我经历了一些不同的问题，我发现CKEditor 5实现了一个自定义数据模型。这意味着加载到编辑器中的每一部分内容都需要转换为该模型，然后呈现回视图</p>（第页）<p><strong>*以下是在ckeditor5中重现问题的预览链接：*</strong></p><p>CK编辑器4:<a href=“https://codepen.io/bhuvavaibhav2rs/pen/rNBxbwG“rel=”noreferrer“>https://codepen.io/bhuvavaibhav2rs/pen/rNBxbwG</a></p><p>CKEditor 5:<a href=“https://codepen.io/bhuvavaibhav2rs/pen/yLBerKb网站“rel=”noreferrer“>https://codepen.io/bhuvavaibhav2rs/pen/yLBerKb网站</a></p><p>在CKEditor 4中，提供以下配置后，它按预期工作：</p><pre><code>CKEDITOR.replace（'editor1'{全文：true，allowed内容：true});</code></pre><p>在CKEditor 5中，我们无法找到相同的上述配置</p>（第页）<p><a href=“https://i.sstatic.net/FNKpi.png“rel=”noreferrer“><img src=”https://i.sstatic.net/FNKpi.png“alt=”在此处输入图像描述“></a></p>

https://stackoverflow.com/q/54593487 1 迈克·弗林 https://stackoverflow.com/users/280602 2019-02-08T13:30:27Z 2019-02-08T13:30:27Z

<p>是否有一个富格文本编辑器，允许粗体、斜体、链接等简单命令，但不允许颜色、字体大小更改、字体系列更改、图像等。这还需要进行粘贴，因为最终用户执行粘贴时，那些不需要格式化的项必须提升网站的外观</p><p>目前我正在使用TinyMCE，但对其他任何可能能够做到这一点的东西都持开放态度，包括TinyMC中的选项</p>（第页）

https://stackoverflow.com/q/52432839 0 捆扎器 https://stackoverflow.com/users/10392455 2018年9月20日20:29:48Z 2018年9月20日22:12:10Z

<p>我有一个SharePoint解决方案，我想验证富文本多行字段。我合并了以下代码</p>（第页）<p>问题是，当最初选择save时，函数会在文本框中选取值。如果出现验证错误，我将显示一条错误消息，向用户解释必须更改的内容。更改文本框中的值并再次选择保存时，将提取原始值，而不是文本框中更新的值</p>（第页）<p>如何在每次选择保存时在多行格式文本框中选取更新的值</p>（第页）函数findFieldControl（fieldTitle）{var control=$（'[title=“'+fieldTitle+'”]'）；回流控制；}函数PreSaveAction（）{var commentsBox=findFieldControl（'Comments'）警报（commentsBox.val（））；}</code></pre>

https://stackoverflow.com/q/50785994 0 用户9775822 https://stackoverflow.com/users/0 2018年6月10日16:55:02Z 2018年6月10日16:55:02Z

<p>我正在制作我自己的富文本编辑器。所以我不是通过URL插入图像，而是通过本地文件</p>（第页）<p>I帧</p><pre><code>&lt；iframe style=“width:100%；height:300px；”name=“richTextField”&gt&它/iframe&gt；</code></pre><p>我的问题是如何在iframe中插入图像</p>（第页）<pre><code>函数图像（）{$（'#myModal'）.modal（'show'）；var文件=document.getElementById（“image”）.files；$（“#uploadImage”）点击（function（）{加载图像文件为URL（）；});}函数loadImageFileAsURL（）{var filesSelected=document.getElementById（“image”）.files；if（文件Selected.length&gt；0）{var fileToLoad=文件选择[0]；if（fileToLoad.type.match（“image.*”））{var fileReader=新的fileReader（）；fileReader.onload=函数（fileLoadedEvent）{var imageLoaded=document.createElement（“img”）；imageLoaded.src=fileLoadedEvent.target.result；//如何插入图像？？$（'#myModal'）.modal（'hide'）；};fileReader.readAsDataURL（fileToLoad）；}}}</code></pre>

https://stackoverflow.com/q/50728136 6 克里斯托弗·斯特鲁贝 https://stackoverflow.com/users/9905146 2018年6月6日T19:27:33Z 2018年6月6日T19:27:33Z

<p>我找不到任何文档说明如何在summernote编辑器中获得光标的位置。我知道如何在普通文本区域中完成这项工作，但在summernote中，编辑器会将其呈现为div，因此我感到很困惑</p>（第页）<p>有人对如何解决这个问题有什么想法吗？或者在当前版本的summernote中，这根本不可能实现吗。我愿意接受黑客攻击</p>（第页）

https://stackoverflow.com/q/50177611 1 布莱恩·梅恩斯 https://stackoverflow.com/users/231716 2018年5月4日下午4点46分25秒 2018年5月4日20:31:55Z

<p>我必须支持编辑将用于Crystal报告的HTML内容，因此我设置tinyMCE编辑器以使用特定标记。我有以下格式自定义设置：</p><pre><code>tinymce.init({..格式：{粗体：{inline:“b”}，斜体：{inline:“i”}，下划线：{inline:“u”}，forecolor:{inline:'font'，属性：{color:'%value'}}}});</code></pre><p>然而，当我打电话时：</p><pre><code>tinymce.activeEditor.setContent（d.Template）；</code></pre><p>并且<code>d.Template</code>包含以下HTML示例：</p><pre><code>&lt；p&gt；欢迎使用&lt；b&gt；站点&lt/b&gt&书信电报；i&gt；谢谢您&lt/i&gt；感谢您的光临。&它/p&gt；</code></pre><p>问题是tinyMCE正在添加<code>&lt；b&gt</code>标记为<code>&lt；强&gt</code>和<code>&lt；i&gt</code>标记为<code>&lt；em&gt</代码>。有没有办法让tinyMCE使用格式部分中定义的内容，而不是将HTML转换为默认值。我理解为什么这样做，但我目前无法支持这些标签</p>（第页）

https://stackoverflow.com/q/49059686 0 山地征服者 https://stackoverflow.com/users/8604111 2018-03-01T22:26:36Z 2018-03-02T03:38:06Z

<p>所以我创建了一个反应记事本。我使用<code>react</code>作为前端，使用<code>node js</code>+<code>mongodb</code>作为后端。然后我添加了<a href=“https://quilljs.com/docs/quickstart/“rel=”nofollow noreferrer“>在我的应用程序中使用富文本编辑器</p><p>问题是，我将这个文本编辑器集成到了我的项目中，现在我可以将具有html样式的数据输入到我的数据库中，但我不知道应该使用<code>react quill</code>的哪一部分来显示从服务器获取到我的应用程序的笔记数据</p>（第页）<p>你能帮我吗</p>（第页）<p>这里是<a href=“https://github.com/zenoamaro/react-quill“rel=”nofollow noreferrer“>react-quill github页面，这里是https://quilljs.com/docs/api/#内容“rel=”nofollow noreferrer“>react-quill文档</a></p><p>我很难在这个文档中找到特定的信息，也许我经验不足</p>（第页）<p>现在，我被这个问题困扰着：</p><p><a href=“https://i.sstatic.net/5eLP8.png“rel=”nofollow noreferrer“><img src=”https://i.sstatic.net/5eLP8.png“alt=”在此处输入图像描述“></a></p><p>这是我的<code>NoteNew</code>组件：</p><pre><code>import React，{Component}from'React'；从“react-quill”导入ReactQuill；从“redux-form”导入{Field，reduxForm}；从“react-router-dom”导入{Link}；从“react-redux”导入{connect}；从“..”导入{addNote}/行动/行动'；类注释新建扩展组件{建造师（道具）{超级（道具）；此状态={内容：“”，};}handleContentChange（值）{this.setState（｛content:value｝）；}onSumbit（值）{const content=this.state.content；const currentTime=this.formatDateAndHour（）；const currentTimeRaw=新日期（）；this.props.add注释({…值，内容，创建时间：currentTime，timeRaw:currentTimeRaw}，（）=&gt；this.props.history.push（'/'）);}格式日期和时间（）{常量monthNames=[“一月”，“二月”，“三月”，“四月”，“五月”，“六月”，“七月”，“八月”，“九月”，“十月”，“十一月”，“十二月”，];const日期=新日期（）；const day=日期.getDate（）；const monthIndex=日期.getMonth（）；const year=date.getFullYear（）；const小时=date.getHours（）；const分钟=date.getMinutes（）；const dayShow=天&lt；10 ? `0${day}`：day；const hourShow=小时&lt；10 ? `0${hour}`：hour；const minutesShow=分钟&lt；10 ? `0${分钟}`：分钟；返回`$｛dayShow｝${monthNames[月索引]}${year}${hourShow}:${minutesShow}`；}错误视图（）{const{addNoteStatus}=this.props；if（addNoteStatus===“错误”）{返回(&它；div className=“error-del”&gt；对不起，出了点问题。请稍后再试。&它/分区&gt；);}返回&lt；div/&gt；；}renderFieldTitle（字段）{const className=`form-group${field.meta.touced&amp&amp；字段.元数据.错误？'has-danger“：”}`;返回(&它；div className={className}&gt；&lt；label className=“form-title”htmlFor=“title”&gt；{字段.labelToShow}&它/标签&gt；&它；br/&gt；&它；input className=“form-control-title”type=“text”{…field.input}/&gt；&它；div className=“text-help”&gt；{field.meta.touched？字段.meta.error:“”}&它/div&gt；&它/分区&gt；);}渲染（）{const{handleSubmit}=this.props；返回(&它；div className=“row form-fields text-center”&gt；&它；form-onSubmit={handleSubmit（this.onSumbit.bind（this））}&gt；&它；字段name=“title”labelToShow=“注释标题”组件={this.renderFieldTitle}/&gt；&它；ReactQuill公司value={this.state.content}onChange={this.handleContentChange.bind（this）}name=“content”labelToShow=“内容”组件={this.renderFieldContent}/&gt；&它；button type=“submit”className=“btn-btn-secondary-submit-button”&gt；&lt；i className=“fa fa-check”aria-hidden=“true”/&gt；&它/按钮&gt；&它；链接到=“/”className=“btn btn-secondary back-button”&gt；&它；i className=“fa fa-times”aria-hidden=“true”/&gt；&它/链接&gt；{this.errorView（）}&它/形式&gt；&它/div&gt；);}}函数验证（值）{常量错误={}；if（！values.title | | values.title.length&lt；3）{errors.title='输入至少3个字符长的注释标题！'；}返回误差；}函数mapStateToProps（状态）{返回{addNoteStatus:状态。addNoteStatus，};}导出默认reduxForm({验证，form:'备注新表单唯一'，})（connect（mapStateToProps，｛addNote｝）（NoteNew））；</code></pre><p>下面是我的<code>NoteShow组件：</p><pre><code>import React，{Component}from'React'；从“react-redux”导入{connect}；从“react-router-dom”导入{withRouter}；从“..”导入{prepareEdit、deleteOneNote}/行动/行动'；类NotesShow扩展组件{onEditClick（）{const{selectedNoteFromState}=this.props；this.props.prepareEdit（selectedNoteFromState，（）=&gt；{this.props.history.push（'/notes/edit'）；});}删除单击（）{const{selectedNoteFromState}=this.props；this.props.deleteOneNote（selectedNoteFromState，（）=&gt；{this.props.history.push（'/'）；});}错误视图（）{const{delNoteStatus}=this.props；if（delNoteStatus===“错误”）{返回(&它；div className=“col-sm-3 col-md-3 col-lg-3 col-xl-3 error-del text-center”&gt；对不起，出了点问题。请稍后再试。&它/div&gt；);}返回&lt；div/&gt；；}时间视图（）{const｛selectedNoteFromState｝=this.ops；const{allNotesFromStateObj}=this.props；const noteToView=所有NotesFromStateObj[selectedNoteFromState]；if（noteToView.editTime）{返回(&它；p className=“text-center date-time”&gt；上次编辑时间：{noteToView.editTime}&它/p&gt；);}返回(&lt；p className=“text-center date-time”&gt；创建时间：{noteToView.createTime}&lt/p&gt；);}renderNoteDetail（）{const{selectedNoteFromState}=this.props；const{allNotesFromStateObj}=this.props；const noteToView=所有NotesFromStateObj[selectedNoteFromState]；返回(&它；div className=“col-sm-8 col-md-7 col-lg-8 col-xl-8 pull sm-right text-justify note-show”&gt；&它；h2 className=“text-center”&gt；{noteToView.title}&lt/h2&gt；&它；p className=“note-text”&gt；{noteToView.content}&lt/p&gt；&它；小时/&gt；{this.timeView（）}&它；按钮className=“btn-btn-secondary pull xs-left small-buttons”onClick={this.onEditClick.bind（this）}&gt；&它；i className=“fa-fa-pencil”aria-hidden=“true”/&gt；&它/按钮&gt；&lt；按钮className=“btn-btn-secondary pull xs-right小按钮”onClick={this.onDeleteClick.bind（this）}&gt；&它；i className=“fa fa-trash-o”aria-hidden=“true”/&gt；&它/按钮&gt；&它/div&gt；);}渲染（）{const{statusFromState}=this.props；const{selectedNoteFromState}=this.props；如果(statusFromState===“fetch_all_notes_success”&amp&amp；从状态中选择笔记！==无效的) {返回(&它；div&gt；{this.renderNoteDetail（）}{this.errorView（）}&它/div&gt；);}返回&lt；div/&gt；；}}函数mapStateToProps（状态）{返回{selectedNoteFromState:状态.selectedNote，statusFromState:状态.fetchAllStatus，来自状态对象的所有注释：状态注释，delNoteStatus:状态.delNoteStatus，};}使用路由器导出默认值(连接（mapStateToProps，{prepareEdit，deleteOneNote}）（NoteShow）);</code></pre>

https://stackoverflow.com/q/41842146 0 用户2573690 https://stackoverflow.com/users/2573690 2017-01-25T01:52:25Z 2018年1月24日上午9:00:51Z

<p>我在我的网站上的一个模态表单上有以下TextArea。一切正常，如果我在提交表单时将文本区域留空，就会显示错误</p>（第页）<pre><code>&lt；div class=“lineEnter displayNone lineErrorRefere”&gt&书信电报；标签&gt&它/标签&gt&书信电报；p class=“errorField displayNone”id=“summaryRefer”&gt；此字段是必需的&lt/p&gt&它/div&gt；&它；div class=“lineEnter”&gt；&它；标签&gt；这个人能代表你表达什么知识、技能或能力&它/标签&gt；&它；textarea class=“form-control”id=“refer_summary”cols=30&gt&它/文本区域&gt；&它/div&gt；</code></pre><p>现在，我想格式化这个文本区域中的文本，所以我正在使用NicEdit，但似乎无法正常工作。我已经像下面这样更改了我的代码，但现在当我尝试提交表单时，始终会显示NicEdit文本区域为空的错误，即使在文本区域中输入了值</p>（第页）<pre><code>&lt；script type=“text/javascript”src=“http://js.nicedit.com/nicedit-latest.js“&gt；&lt；/script&gt；&它；script type=“text/javascript”&gt；//&它；！[CDATA（CDATA）[bkLib.onDomLoaded（函数（）{new nicEditor（｛buttonList:['fontSize'，'bold'，'talic'，'underline'，'trikeThrough'，'subscript'，'superscript']｝）。panelInstance（'fer_summary'）；});//]]&gt；&它/脚本&gt；</code></pre><p>NicEdit文本区域显示正确，但我一定遗漏了一些内容。。。因为我现在不能提交表格</p>（第页）<p>感谢您的任何帮助</p>（第页）<h2>编辑：</h2><p>找到答案后，我只需要使用NicEdit的content（）函数从文本中获取数据，而不仅仅是获取文本区域的值。我做了以下工作：</p><pre><code>var content=nicEditors.findEditor（'refer_summary'）.getContent（）；</code></pre>

https://stackoverflow.com/q/48274788 4 坎沃尔·吉尔 https://stackoverflow.com/users/9162382 2018年1月16日T05:42:55Z 2018年1月17日T08:40:24Z

<p>我在我的网站中使用了富文本编辑器ckeditor，它运行良好，但我希望它看起来像博客使用的文本编辑器，如下图所示。这怎么可能</p>（第页）<p><a href=“https://i.sstatic.net/N84a8.png“rel=”nofollow noreferrer“>这就是我想要的样子</a></p>

https://stackoverflow.com/q/46982363 0 卸扣卸扣 https://stackoverflow.com/users/8698071 2017年10月27日T19:43:40Z 2017年10月28日T15:31:04Z

<p>为了使文本区域能够处理一些基本格式，我用相同的单格字体和位置在其上放置了一个div。div将显示相同的文本，但带有颜色和粗体</p>（第页）<p>然而，div中的文本会妨碍用户选择文本区域中的文本</p>（第页）<pre><code>&lt；div class=“centerc”&gt；&它；div class=“copyc”&gt；&它；textarea id=“input”class=“ipaded epaded txtarea”行=20列=80&gt&它/文本区域&gt；&它；div id=“copyadd”class=“copyadd”&gt&它/div&gt；&它--这是用于格式化^-->；的DIV；&它/分区&gt；&它/div&gt；</code></pre><p>-webkit-user-select：无-ms-user-select：无；user-select：无；etc没有解决这个问题，只是让用户也无法在div中选择文本。如果需要更多的CSS代码，我会对其进行注释，但我认为没有必要这样做</p>（第页）<p>如何阻止div让用户无法从文本区域选择文本（如果可能的话）？如果没有，我使用的方法有其他选择吗</p>（第页）<p>编辑：我应该从一开始就说明我想要多种格式</p>（第页）

https://stackoverflow.com/q/2672099 2 凯尔 https://stackoverflow.com/users/243494 2010年4月20日02时06分55秒 2017-02-21T17:09:20Z

<p>我看过免费的javascript html编辑器，但我还没有发现任何能直观地处理链接的编辑器。我喜欢gmail编辑这样做（也喜欢blogger.com这样做）</p><p>有人知道是否有一个开源编辑器以这种方式处理链接吗？Jquery会更好</p>（第页）

https://stackoverflow.com/q/4557729 三 丹尼斯·博布罗夫尼科夫 https://stackoverflow.com/users/557581 2010年12月29日T20:49:26Z 2016年12月23日08:03:25Z

<p>在输入框中设置文本样式的基本方法是什么？你能给我看一个如何分别更改文本颜色的最简单的例子吗</p>（第页）

https://stackoverflow.com/q/35145960 1 Nadimul De Cj公司 https://stackoverflow.com/users/5566169 2016年2月2日T05:48:32Z 2016年2月29日T06:30:18Z

<p>我想禁用wysihtml5文本编辑器中的所有键盘键<br>我正在使用此编辑器https://github.com/bassjobsen/wysihtml5-image-upload“rel=”nofollow“>https://github.com/bassjobsen/wysihtml5-image-upload</a><br>谁能帮我做这个吗<br>我尝试过“load”事件，它运行得很好，但我不能使用“onkeypress”或“onkeyup”\</p><pre><code>var defaultOptions=$.fn.wysihtml5.defaultOptions={“字体样式”：false，“颜色”：假，“emphasis”：错误，“列表”：false，“html”：假，“链接”：false，“图像”：真实，事件：{“load”：函数（）{console.log（'已加载！'）；}},</code></pre>

https://stackoverflow.com/q/9159965 三 尼克 https://stackoverflow.com/users/621681 2012年2月6日T12:16:29Z 2015年6月30日19:14:30 Z

<p>我正在为我正在开发的web应用程序寻找一个非常小的jQuery富文本框插件</p><p>用户只需要看到“文本框”，而不需要看到任何工具栏，因为所有的丰富格式都将根据他们键入的内容进行编码</p>（第页）<p>我曾尝试使用iframe创建自己的文件，但存在问题。其中之一是当在div中包装字符串时，插入符号被移动到开头，如果不单击，就无法在div内移动<a href=“http://jsfiddle.net/DVjYa/“rel=”nofollow“>http://jsfiddle.net/DVjYa/</a></p><p>这是一个问题，因为我需要它像正常的文本框一样工作。在普通文本框中，您可以使用箭头键导航，而无需单击。因此，为什么我要寻找一个已经克服了这些问题的插件</p>（第页）

https://stackoverflow.com/q/27584786 2 大卫 https://stackoverflow.com/users/1940394 2014年12月20日下午2:12:47Z 2014年12月20日22:28:13Z

<p>我正在修改WYSIWYG编辑器。是的，我完全了解<code>execCommand（）</code>，但我不喜欢http://www.quirksmode.org/dom/execCommand.html“rel=”nofollow“>它会变得多么混乱和不一致</p><p><strong>注意：</strong>与其他问题一样，这不是一个如何使其发挥作用的问题，而是如何保持最终结果的整洁</p>（第页）<p>下一个最好的选择似乎是<code>window.getSelection（）</code>，它的效果很好，直到我遇到这样的情况：</p><pre><code>&lt；p id=“para”contenteditable=“true”&gt；有点&lt；b&gt；a&lt/b&gt&书信电报；span class=“blackColor”&gt；龙&lt/span&gt&书信电报；i&gt；格尔&lt/i&gt；句子。&它/p&gt；</code></pre><p>给用户的是什么</p><区块报价><p>一点<strong>A</strong>lon<em>ger</em>句子</p></blockquote><p>所以，到目前为止，这就是我想到的大胆的东西：</p>＜pre＞＜code＞函数bold（）{var box=document.getElementById（“段落”）；var sel=window.getSelection（）；if（sel.rangeCount&lt；1）return；var范围=sel.getRangeAt（0）；if（！validSelection（range.startContainer，box）||！validSelection（range.endContainer，方框）{回报；}//从第一个元素中获得我们需要的var数据=range.extractContents（）；for（var i=0；i&lt；data.childNodes.length；++i）{var b=document.createElement（'b'）；b.innerHTML=data.childNodes[0].textContent；data.appendChild（b）；data.removeChild（data.firstChild）；}range.extractContents（）；range.insertNode（数据）；}</code></pre><p>这很有效，但它可能会很快变得很乱</p>（第页）<pre><code>&lt；p id=“para”contenteditable=“true”&gt；A&lt；b&gt；b&lt/b&gt&书信电报；b&gt；它&lt/b&gt&书信电报；b&gt&它/b&gt；的&lt；b&gt；a&lt/b&gt&书信电报；span class=“blackColor”&gt；龙&lt/span&gt&书信电报；i&gt；ger&lt/i&gt；句子。&它/p&gt；</code></pre><p>这是在为“it”调用<code>bold（）</code>，然后调用“bit”之后完成的</p>（第页）<p>如果我在多个元素上调用它，例如“of a long”</p><pre><code>&lt；p id=“para”contenteditable=“true”&gt；有点&lt；b&gt；的&lt/b&gt&书信电报；b&gt；a&lt/b&gt&书信电报；b&gt&它/b&gt&书信电报；b&gt；龙&lt/b&gt&书信电报；b&gt；g&lt/b&gt&书信电报；i&gt；呃&lt/i&gt；句子。&它/p&gt；</code></pre><p>这似乎比<code>execCommand（）</code>糟糕得多，但我仍然希望以干净的方式完成这项工作。什么是正确的方法来做到这一点，我不会有非常混乱的代码，一旦所有的说和做？此外，我也意识到其他格式已经从原始文件中丢失。我正在做一些事情，但我现在最重要的是保持干净</p>（第页）<p>我在检查器中注意到，如果我按[Ctrl]+B，然后撤消，事情会分解为多个文本节点，但在实际代码中不会太混乱。然而，这只适用于粗体、斜体和下划线，我想实现更多的功能</p>（第页）<p>最后，我愿意清理<code>execCommand（）</code>，但如果我可以自己编写代码的话。。。好。。。我喜欢编码。：）</p>（第页）<p>谢谢</p>（第页）

https://stackoverflow.com/q/25236714 1 笨蛋 https://stackoverflow.com/users/769326 2014年8月11日06:01:32Z 2014年8月27日T18:51:55Z

<p>我正在使用Kendo UI编辑器。我想突出显示编辑器中键入/粘贴的多余字符。这就是我所做的：</p><pre><code>$（函数（）{var$editor=$（'#txt-editor'）；$editor.kendoEditor（编辑程序）({keydown:验证RichTextEditor});});函数ValidateRichTextEditor（e）{var编辑器=$（e.sender.textarea），kendoEditor=编辑器.data（'kendoEditor'），characters=kendoEditor.body.innerText.length，limit=editor.data（'valLengthMax'）；if（字符数&gt；限制）{var textNodes=getTextNodes（kendoEditor.body），charCount=0，startNode，startOffset；for（var i=0，textNode；textNode=textNodes[i++]；）{var chars=charCount+textNode.length；if（限制字符数）{//将文本节点设置为起始节点//如果字符达到限制startNode=textNode；startOffset=chars-charCount；断裂；}//将文本节点的长度添加到当前字符数charCount+=textNode.length；}var range=kendoEditor.createRange（）；range.setStart（startNode，startOffset）；kendoEditor.selectRange（范围）；kendoEditor.document.execCommand（'backColor'，false，'#fcc'）；}}函数getTextNodes（节点）{var text节点=[]；//节点类型3是文本节点if（node.nodeType==3）{textNodes.push（节点）；}其他{var children=节点.childNodes；对于（var i=0，len=children.length；i&lt；len；i++）{textNodes.push.apply（textNodes，getTextNodes（children[i]））；}}return textNodes；}</code></pre><p><a href=“http://jsfiddle.net/dork/113173n7r/“rel=”nofollow“>jsfiddle</a></p><p>到目前为止，高亮显示有效，但光标位置始终位于高亮显示开始的位置。如何定位光标，使其记住最后一个位置？例如，我只是继续键入，光标应该位于编辑器内容的末尾。或者，当我单击内容中间的某个位置时，光标应该从我单击内容的位置开始</p>（第页）<p>如能在此方面提供帮助，我们将不胜感激。谢谢</p>（第页）

https://stackoverflow.com/q/24211123 2 拉胡尔·普拉萨德 https://stackoverflow.com/users/260998 2014年6月13日17:47:48Z 2014年8月12日下午2:01:00

<p>我想禁用Textangular模块中的copy-paste而不接触其代码<br>我仔细查看了它的代码，发现“粘贴”操作有一个事件绑定<br></p><p>是否可以从外部解除粘贴事件的绑定？例如，当控制器加载或使用其他指令时</p>（第页）

https://stackoverflow.com/q/21933878 2 杰西恩 https://stackoverflow.com/users/3337032 2014年2月21日T11:57:38Z 2014年7月22日19:28:30 Z

<p>我正在使用JavaScript开发一个富文本框。通过阅读Mozilla中的一些优秀参考，我开发了内容可编辑的div，使文本具有粗体、斜体、下划线和一些更基本的效果。但当我将效果应用于整个文本时，之后我就无法将光标（carat）放在标签的一边。比如，当我键入某些内容时，我的Div（contenteditable=“true”）将变为可编辑。我键入“ABC”。然后我选择“ABC”并按下加粗按钮。我得到了粗体文本，但在那之后，我无法在没有“Bold”标记的情况下输入div。有人能给我解答吗。通过观察下面的代码和输出，我希望能够澄清我的问题。提前谢谢你</p>（第页）<pre><code>$（function（）{$（“#btn_bold”）点击（函数（）{document.execCommand（“bold”，true，“”）；});});</code></pre><p>HTML代码</p>（第页）<pre><code>&lt；div class=“container”&gt；&它；div id=“myEditTextBox”contenteditable=“true”&gt；&它/div&gt；&它；button id=“btn_bold”type=“button”class=“btn-btn-default”title=“bold”&gt；B&lt/按钮&gt；</code></pre><p>所以当我输入ABC并选择它时，我得到了“<b>ABC</b>”，这很好。现在，当我单击div以对其进行聚焦并键入时，它会附加到“<code>&lt；b&gt；&lt；/b&gt；</code>”后面，“不在”<code>&lt；div&gt；</code>“所以在”<b>ABC</b>“之后，如果我写D，输出是”<b>ABC</b>“，但我想要的是”<b>ABC>D“。谢谢你</p>（第页）

https://stackoverflow.com/q/23645764 1 纳吉语的 https://stackoverflow.com/users/2115468 2014年5月14日T04:42:09Z 2014年5月22日12:23:59Z

<p><b>代码</b></p><pre><code>&lt；r： inputRichText width=“702”height=“200”id=“commentVal”&gt&它/r： inputRichText&gt；</code></pre><p><b>Getter方法</b></p><pre><code>getCommentVal（）.getValue（）.toString（）；</code></pre><p><i> 问题陈述</i></p><p>当我在Mozilla Firefox或IE的getter方法中运行包含<code>r:inputRichText</code>的页面时，<code>r:input RichText</code>将返回其内容，但在chrome浏览器中执行时，相同的方法将返回空值</p>（第页）<p>请帮我纠正这个问题</p>（第页）<p>谢谢你</p>（第页）