百度翻译API翻译文本编辑器中的内容（不影响图片、视频）

前阵子用C#做了个多语言网站（11国语言……），要求是只填写英文内容，其他语言内容自动翻译填充至数据库。然后选择了百度翻译API，毕竟需要的11个语种都支持，而且通用翻译的标准版是完全免费的😁

don't say so much，百度翻译传送门在此：百度翻译开放平台
使用说明非常详细，并且提供了各语言的Demo，上手简单，这里就不多说了，主要想说下翻译文本编辑器时遇到的问题。

文档的常见问题里有说明，通用翻译API不支持对HTML进行直接翻译，这就对文本编辑器中的内容十分的不友好……

而网站需求更是要求自动翻译成其他10国语言，所以我就考虑了一种解决方案，简单来说就是将文本编辑器中的纯文本内容提取出来，将HTML中对应内容使用特定的占位符替换，制作成模板，页面展示时则将对应语言的翻译结果回填至模板中进行展示。

一、提取文本编辑器中的纯文本
那么问题来了，首先要做的就是如何将文本编辑器中的纯内容提取出来？这里以KindEditor和UEditor举例：
1.KindEditor：KindEditor在初始化时，可以设置afterBlur: function () { this.sync();}，这句可以将文本编辑器的内容同步至textarea中，然后则可以获取textarea的值来获取纯文本内容了！当然也没有这么简单，尝试之后就可以发现，后台获取到的值其实包括了“\r\n”、“\t”以及一些图片、视频等的标签😂，这仍然违背了我们获取纯文本内容的初衷，不用担心，首先可以先去掉所有图片、视频等标签内容（我是在页面中正则替换了下），replace(/<.*?>/ig, '')，“\t”同理，去掉即可，然后以“\r\n”为分隔符进行截取，将每段的文本内容截取成数组，content.Split("\r\n".ToCharArray(), StringSplitOptions.RemoveEmptyEntries);StringSplitOptions.RemoveEmptyEntries可以去掉数组中的空值，但是无法去掉whitespace，遇到空格仍需手动排除。到此，我们便获取到了KindEditor文本编辑器中的纯文本内容，即待翻译内容的数组。

2.UEditor：百度文本编辑器提供了获取getPlainTxt()方法可以直接获取保留换行和空格的纯文本，（为什么不用getContentTxt()？毕竟还是需要通过换行符将内容进行分段的，制作模板、翻译回填都会方便一些），获取到文本内容之后的处理方式与KindEditor相同，去掉多余标签和格式，以换行符分段，得到待翻译内容的数组。

二、将HTML中对应内容使用特定占位符替换，制作成模板
需要翻译的内容已经获取到了，接下来就是将这些内容在HTML中进行替换，将每段内容replace即可。试验结果证明，草率了……我们获取到的HTML内容中其实有部分特殊字符是通过转义字符表达的，比如：&#39; 对应 ' / &quot; 对应 " / &lt; 对应 < / &gt; 对应 > / &nbsp; 对应 空格。

既然如此，我们需要先将这些转义字符替换成本该对应的符号，str.Replace("&#39;", "'").Replace("&quot;", "\"").Replace("&lt;", "<").Replace("&gt;", ">").Replace("&nbsp;", " ");，然后就可以将每段待翻译的内容替换成为自己特定的占位符，比如{0}、{1}、{2}……注意要避免选择文本编辑器中可能会经常输入的内容进行占位，或者可以限制禁止在文本编辑器中输入特定占位符格式的内容。

三、翻译并将翻译结果回填至模板
通用翻译标准版是免费的，但是QPS（每秒访问量）为1，所以为了避免耗费太多时间，直接翻译多段文本，就是将咱们文本编辑器中的所有段内容一次性翻译完成，每段内容使用“\n”进行分隔，返回结果的译文当然也是数组格式的，然后即可按照翻译顺序将翻译结果回填至模板中，再次替换特定的占位符。

通过这噼里啪啦一顿操作之后，就可以将文本编辑器中的内容带样式翻译出来了，希望可以给要翻译页面内容的人提供思路。当然，这只是我自己摸索的方法，可能考虑得不全也不怎么完善，欢迎各路神仙大佬指点更好的方案，我再完善😄