具有HTML5程序格式的单行文本编辑器

问题描述 投票:-6回答:2

我需要让用户在我网页的输入框中输入一系列标识符。

例如:trains cars planes

如果用户输入一个我可以识别的标识符,则需要在其左侧渲染一个图标,并更改标识符的格式(字体粗细,颜色,背景颜色,边角半径,填充等)。

例如:[fa-train]trains [fa-car]cars [fa-plane]planes

如果控件太长而无法容纳文本,则该控件必须自动调整其高度以适合文本。

用户不应以任何方式直接更改文本格式,或者说删除图标。如果用户复制或粘贴文本,则仅复制或粘贴纯文本,而没有有关图标的信息。

有没有简单的方法来实现此小部件?

javascript html twitter-bootstrap rich-text-editor
2个回答
3
投票

您可能对堆栈溢出使用的Tagit程序感兴趣。我相信您可以将自己的HTML标记添加到数组列表中。这应该可以解决您的图标问题。


-3
投票

您可以通过使用contenteditable属性和一些想象力来轻松创建嵌入式RTF编辑器。

只需单击虚线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>
© www.soinside.com 2019 - 2024. All rights reserved.