查找和替换以及所见即所得的编辑器 [英] Find and Replace and a WYSIWYG Editor

问题描述

我的问题如下：

我有一列：ProductName。现在，这里输入的文本是从tinyMCE输入的，因此它具有各种标签。用户希望能够在所有产品上执行查找并替换，并且它必须支持着色。

例如，假设这是一部分a ProductName：

其他文字.. < strong>文字文字< font color =＃ff6600 > colortext& reg;< / font>< / strong> ..其他文字

现在，用户想要替换：< / p>

< p $ p> /字体>

原始名称包含< strong> 标记，使其显示为粗体。因此，用户使它变得粗体 - 现在他搜索的文本是：

 < strong>< font color = ＃FF6600\" > colortext&安培; REG;< /字体>< /强> 
  

显然我不会找到它。另外还有空间的问题：在一个地方它有一个空间，而另一个空间不是。

有没有办法解决这个问题？

解决方案

来自搜索文本的HTML标签，并首先进行纯文本搜索。然后，逐个部分（即通过文本节点的文本节点），获取搜索文本部分的元素路径，并将它们与找到的文本中的对应部分进行比较。如果所有部件的路径匹配，您就完成了。

编辑：通过路径，我的意思是类似于XPath，或路径TinyMCE编辑器的概念。例如：搜索文本的纯文本部分是colortext& reg;。该文本节点在搜索文本中的路径是< strong> /< font color =＃ff6600> 。搜索文本正文中的相同纯文本（不重要），并将其作为路径，该路径也是< strong> /< font color =＃ff6600> 。 （将其与other text ..（ / ）和text text（< strong> 。）两条路径是相同的，所以这是一个真正的匹配。如果您有DOM树表示，确定路径应该不会很困难。

My problem is as follows:

I have a column: ProductName. Now, the text entered here is entered from tinyMCE so it has all kinds of tags. The user wants to be able to do a Find-And-Replace on all products, and it has to support coloring.

For example - let's say this is a portion of a ProductName:

other text.. <strong>text text <font color="#ff6600">colortext&reg;</font></strong> ..other text

Now, the user wants to replace the :

<font color="#ff6600">colortext&reg;</font>

The original name has the <strong> tag in it so it appears bold. So the users makes it bold - now the text he is searching for is:

<strong><font color="#ff6600">colortext&reg;</font></strong>

Obviously I'm not going to find it. Plus there's the matter of spaces: in one place it has a space in another it doesn't.

Is there a way to overcome this?

解决方案

Strip the HTML tags from the search text and do a plain text search first. Then, part by part (i.e., text node by text node), take the element path of the search text's parts, and compare these with their counterparts in the found text. If the paths for all parts match, you're done.

Edit: By path, I meant something similar to XPath, or the path notion of the TinyMCE editor. Example: plain text part of the search text is "colortext&reg;". The path of this text node in the search text is <strong>/<font color="#ff6600">. Search for the same plain text in the text body (trivial), and take it's path, which is also <strong>/<font color="#ff6600">. (Compare this with the path of "other text..", which is /, and of "text text", which is <strong>.) The two paths are the same, so this is a real match. If you have a DOM tree representation, determining the path shouldn't be difficult.

这篇关于查找和替换以及所见即所得的编辑器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！