可编辑的单线输入 [英] contenteditable single-line input

问题描述

对于我们在我工作的公司开发的应用程序，我们需要一个输入，支持在我们的基于JS的Web应用程序中插入表情符号。我们目前正在使用表情符号（即':-)'）的输入，并希望切换到插入实际的图形图片。

For an application we're developing at the company where I work, we need an input that supports inserting emoticons inside our JS-based web app. We're currently using an input with the emoticon shortcodes (ie ':-)') and would like to switch to inserting actual, graphical images.

我们的原始计划使用 contenteditable < div> 。我们使用粘贴事件的侦听器以及不同的键/鼠标交互，以确保没有不必要的标记进入contenteditable（我们从其容器标签中剥离文本，只留下我们插入的图像标签）。

Our original plan was to use a contenteditable <div>. We're using listeners for the paste event as well as the different key/mouse interactions to ensure no unwanted markup enters the contenteditable (we strip text out of its container tags and leave only image tags that we inserted ourselves).

但是，现在的问题是如果你放入足够的内容（即它的高度增加），div的大小调整。我们不希望发生这种情况，也不能接受只是隐藏文本（即： overflow：hidden ）。所以：

However, the problem right now is that the div resizes if you put in enough content (ie its height increases). We don't want this to happen, nor is it acceptable for the text to just be hidden (ie plain overflow: hidden). So:

有没有办法使contenteditable div像单行输入？

我想最好的，如果有一个相对简单的属性/ css属性，我错过了，将做我想要的，但如果必要CSS + JS建议也将赞赏。

I'd like it best if there is a relatively simple attribute/css property that I've missed that will do what I want, but if necessary CSS+JS suggestions will also be appreciated.

推荐答案

因此，对于后代：最简单的解决方案是让您的产品经理更改需求，以便进行多行编辑。这是我们的情况。

So, for posterity: the simplest solution is to get your product manager to change the requirements so you can do multiline editing. This is what ended up happening in our case.

然而，在这之前，我最终在创建一个手动移动单行富文本编辑器。我把它包装在一个jQuery插件到底。我没有时间完成它（有可能在IE的错误，Firefox工作最好，Chrome工作相当不错 - 评论是稀疏，有时不是很清楚）。它使用 Rangy库的部分内容（因为我不想依靠完整的库），以获得选择的屏幕位置，以便测试鼠标位置与选择（因此您可以拖动选择并移动框）。

However, before that happened, I ended up going quite a way in creating a manually moving single-line richtext editor. I wrapped it up in a jQuery plugin in the end. I don't have time to finish it up (there are probably bugs in IE, Firefox works best and Chrome works pretty well - comments are sparse and sometimes not very clear). It uses parts of the Rangy library (extracted because I didn't want to rely on the complete library) to get screen positions of selections in order to test for mouse position vs. selection (so you can drag selections and move the box).

使用3个元素。一个外部div（你称为插件的事情），它得到溢出：隐藏，然后2层嵌套里面。第一级是绝对定位，第二级是实际contenteditable。这种分离是必要的，因为否则一些浏览器将给予可感知绝对定位的元素抓握，让用户移动它...

Roughly, it works by using 3 elements. An outer div (the thing you call the plugin on), which gets overflow: hidden, and then 2 levels of nesting inside it. The first level is absolutely positioned, the second level is the actual contenteditable. This separation is necessary because otherwise some browsers will give the contenteditable absolutely positioned element grippies, to let the user move it around...

在任何情况下，整堆代码移动绝对定位的元素在顶部元素内部，从而移动实际contenteditable。

In any case, then there is a whole bunch of code to move the absolutely positioned element around inside the top element, thus moving the actual contenteditable. The contenteditable itself has white-space nowrap, etc. etc. to force it to stay a single line.

在插件中还有一些代码，它们可以删除任何一个从粘贴/拖动到框中的任何文本创建图像（如 br ，表格等）。你需要这个的一些部分（如brs，剥离/规范化段落等），但也许你通常想保留链接， em ，

There is also code in the plugin that strips out anything that isn't an image (like br, tables, etc. etc.) from any text that's pasted / dragged into the box. You need some parts of this (like the brs, stripping/normalizing paragraphs, etc.) but maybe you would normally want to keep links, em, strong and/or some other formatting.

来源： https://gist.github.com/1161922

这篇关于可编辑的单线输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！