HTML5中具有过程格式的单行文本编辑器
A single-line text editor with procedural formatting in HTML5
我需要让用户在网页的输入框中输入一系列标识符。
例如:trains cars planes
。
如果用户输入了我识别的标识符,我需要在其左侧呈现一个图标,并更改标识符的格式(字体大小、颜色、背景色、圆角半径、填充等)。
例如:[fa-train]trains [fa-car]cars [fa-plane]planes
。
如果小部件太长而无法容纳文本,则它必须自动调整其高度以容纳文本。
用户不应该以任何方式直接更改文本的格式,或者说删除图标。如果用户复制或粘贴文本,则只复制或粘贴纯文本,而不包含有关图标的信息。
有没有一种简单的方法来实现这个小部件?
您可能对堆栈溢出使用的Tagit程序感兴趣。我相信您可以将自己的HTML标记添加到数组列表中。这应该可以解决您的图标问题。
您可以使用contenteditable
属性和一些想象力轻松创建内联富文本编辑器。
只需点击虚线div并写一个句点"。"在句子末尾。
$('#editor').bind("DOMSubtreeModified", function() {
//alert($('#editor').html);
var texto = $('#editor').html();
var pos = texto.search('perro');
if (pos != -1) {
//alert('perro hallado en '+pos);
var tam = 5;
var inicio = texto.slice(0, pos);
var urlperro = "http://cdns2.freepik.com/foto-gratis/_318-57958.jpg";
var fin = texto.slice(pos + tam, texto.length);
$('#editor').html(inicio + '<img src="' + urlperro + '" width="35">' + fin);
}
});
#editor {
border=1px;
border-style: dashed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Custom HTML5 inline rich text editor</h1>
<h2>Instructions</h2>
<p>Try editing the text inside the dashed container it will replace some special combination of characters to rich text in html format.</p>
<div id="editor" contenteditable="true">Tengo un pequeño perro que vive conmigo</div>
相关文章:
- 如何使用jquery在填充自动完成的值后使文本框只读
- 使用Clipboard.js复制span文本
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 用程序搜索JQuery数据表中的文本
- jQuery匹配JSON对象的部分文本
- onkeyup无法动态创建多个文本区域
- 如何在下面的ES6循环中获得前面的文本
- 将输入字段中的文本提交到我的数据库,同时将其添加到我的列表中
- 让文本输入幻灯片显示输入时的新文本输入?然后向后滑动
- 借助asp.net验证或java脚本对多个文本进行验证
- 无法在ajaxStart中更改跨度文本
- 高亮显示时编辑文本大小和颜色
- HTML5中具有过程格式的单行文本编辑器
- 限制文本区域中单行的行数和字母数
- 如何使用javascript在文本文件上的单行中写入数据
- 动态表单行文本框的总和
- 如何创建单行文本输入字段
- 如何在 HTML 文档中插入文本文件的单行
- 流体宽度单行文本区域
- DIV内容文本显示在单行/单行中