使用文本格式选项创建表单输入,提供HTML输出

时间:2017-02-11 23:16:37

标签: javascript jquery html css angularjs

我想在网页中创建一个表单输入,并具有自定义文本格式选项,如粗体,斜体和添加超链接。

非常类似于在StackOverflow中提问的方式。 主要目的是获取用户在表单中输入的html输出。例如,如果用户选择Bold Button并键入内容,我应该将该部分作为

<b>Bold Content</b>

需要有关如何实现这一目标的建议。

由于

2 个答案:

答案 0 :(得分:3)

有很多方法可以解决这个问题,我将解决2个相当简单的方法

首先要注意的是,您希望将编辑器包装在具有#ifdef __linux #include <io.h> #elseif __apple #include<uio.h> 属性的容器元素中,然后使用包含文本字符串和&#34;事件&#34;的数组变量。样式字符串,以您喜欢的方式编码(可能是以contenteditable开头的字符串,如:)。

您不想做的是直接存储":bold",而是直接存储可以转换为html代码的状态。

每当用户写入时,您都会捕获键击(并防止它们出现默认行为)以添加到最后一个文本字符串(或者在最后一个事件是一个事件的情况下添加一个新键盘),并且如果击键就是说,退格,然后如果最后一项是一个事件,你删除数组尾部的所有事件(所以html,你后来转向&#34;这个 文字&#34;,会变成[ "this ", ":bold", "is ", ":no-bold", ":italic", "text", ":no-italic", ":bold" ]

现在你可以做两件大事。

首先,您可以为每个文本字符添加一个范围,并根据事件样式分配各种类,以便每个字符都有自己的元素:

[ "this", ":bold", "is", ":no-bold", ":italic", "tex" ]

浏览器渲染速度非常慢,但效果会很好。

你可以做的另一件事是通过处理每个文本字符串而不是每个字符来改进前面的例子,所以你要为数组中从文本到事件的每次转换开始一个范围,假设你&#39 ;重复遍历它,并添加对应于各种类型的类,直到从事件到文本的转换,在这种情况下,您插入文本,并在另一个事件发生之前关闭它,然后重复:

<span class="">t</span><span class="">h</span>...<span class="bold">i</span><span class="bold">s</span><span class="bold"> </span><span class="italic">t</span>...

更简洁,更容易理解。或者,您可以为每个<span class="">this </span><span class="bold">is </span><span class="italic">text</span>事件添加<b>标记,为:bold</b>添加:no-bold。然而,这是非常沮丧的。如果您错过了它:在css中,您可以font-weight来描述italic和其他样式的粗体和其他属性

答案 1 :(得分:0)

TinyMCE直接为您提供所有这些功能(以及更多功能)。