Question

我正在使用WYSIWYG文本编辑器，我正在研究在WYSIWYG模式和BBcode模式之间切换的能力。在进行切换后，我无法让它以所见即所得模式显示。

function editormode()
{
 var html;

 var bbcode = new Array();
 var htmlcode = new Array();
  htmlcode[0] = "<b>";    bbcode[0] = "[b]";
  htmlcode[1] = "</b>";   bbcode[1] = "[/b]";
  htmlcode[2] = "<i>";    bbcode[2] = "[i]";
  htmlcode[3] = "</i>";   bbcode[3] = "[/i]";
  htmlcode[4] = "<u>";    bbcode[4] = "[u]";
  htmlcode[5] = "</u>";   bbcode[5] = "[/u]";
  htmlcode[6] = "<strike>";  bbcode[6] = "[strike]";
  htmlcode[7] = "</strike>";  bbcode[7] = "[/strike]";
  htmlcode[8] = "<sub>";   bbcode[8] = "[sub]";
  htmlcode[9] = "</sub>";   bbcode[9] = "[/sub]";
  htmlcode[10] = "<sup>";   bbcode[10] = "[sup]";
  htmlcode[11] = "</sup>";  bbcode[11] = "[/sup]";

 if (editormode == "true") {

  htmltext = document.getElementById('editor').contentWindow.document.body.innerHTML;

  for(i = 0; i < 12; i++){
   searchtext = htmltext.search(htmlcode[i]);

   if(searchtext != -1) {
    htmltext = htmltext.replace(htmlcode[i], bbcode[i]);
   }
  }

  html = document.createTextNode(htmltext);
  document.getElementById('editor').contentWindow.document.body.innerHTML = "";
  html = document.getElementById('editor').contentWindow.document.importNode(html,false);
  document.getElementById('editor').contentWindow.document.body.appendChild(html);

  editormode = "false";
 } else {

  htmltext = document.getElementById('editor').contentWindow.document.body.innerHTML;

  for(i = 0; i < 12; i++){
   searchtext = htmltext.search(bbcode[i]);

   if(searchtext != -1) {
    htmltext = htmltext.replace(bbcode[i], htmlcode[i]);
   }
  }

  html = document.createTextNode(htmltext);
  document.getElementById('editor').contentWindow.document.body.innerHTML = "";
  html = document.getElementById('editor').contentWindow.document.importNode(html,false);
  document.getElementById('editor').contentWindow.document.body.appendChild(html);

  editormode = "true";
 }
}

Answer 1

如果我看到的是正确的，看起来你正在对整个文本进行String.replace()，并且只使用字符串来找到要替换的目标。

我怀疑正在发生的事情是，您只是替换了您尝试查找和替换的标记的第一个实例。在传递字符串时使用String.replace()作为搜索参数时，它只会查找并替换匹配子字符串的第一个实例。

"hello".replace('l', 'r'); // returns "herlo" and not "herro"

尝试在执行替换之前将搜索字符串更改为全局正则表达式：

var tagEx = new RegExp(htmlcode[i], 'g');
htmltext.replace(tagEx, bbcode[i]);

我相信这会解决你的问题。此外，在执行此操作时，您可能不需要事先打扰String.search()。在没有匹配的字符串上调用String.replace()没有什么不好。所以，摆脱那个检查，甚至可以节省一些计算时间。

另一件值得一提的事情，我不确定这是否与其他代码冲突，是当你执行数组循环时，你没有使用var来实例化你的增量变量。与在var i=0中一样，有时会导致问题，因为不使用var会创建一个全局变量，这可能与其他地方的代码冲突。

希望有所帮助。

Answer 2

您的功能存在一些问题但是，字符串替换问题可能是使其看起来没有转换任何内容的错误。这是一个适用于我的函数的较小版本：

function editormode(is_editor_mode) {
    var replaceTagsByMode = function(html, is_editor_mode) {
        var tags = {};
        for (var i=0, a=['b', 'i', 'u', 'strike', 'sub', 'sup']; i<a.length; i++) {
            tags[['<', a[i], '>'].join('')] = ['[', a[i], ']'].join('');
            tags[['</', a[i], '>'].join('')] = ['[/', a[i], ']'].join('');
        }

        for (var html_tag in tags) {
            if (tags.hasOwnProperty(html_tag)) {
                html = html.replace.apply(
                        html, is_editor_mode ? [html_tag, tags[html_tag], 'g'] : [tags[html_tag], html_tag, 'g']);
            }
        }
        return html;
    };
    var editor_body = document.getElementById('editor').contentWindow.document.body;
    editor_body.innerHTML = replaceTagsByMode(editor_body.innerHTML, is_editor_mode);
}

Answer 3

最好使用执行此操作的现有代码，例如bbc2html（仅用于将bbcode转换为HTML）或bbeditor（用于整个编辑器）。另请参阅Simple WYSIWYG BBCode editor for JavaScript?。

如果您想自己编写，转换这些标记可能非常简单：

html = bbcode.replace(/\[(\/?(b|i|u|strike|sub|sup))\]/gi, '<$1>');

bbcode = html.replace(/<(\/?(b|i|u|strike|sub|sup))>/gi, '[$1]');

Javascript tostring问题

3 个答案: