Question

我正在创建一个Wordpress主题，包括一个允许＆＃34;自动更多标签插入的TinyMCE版本＆＃34;。我的意思是一个特殊的功能，插入一个＆＃34;阅读更多＆＃34;在Wordpress编辑器中指定数量的字符（例如400）后标记。这样做的原因是，Wordpress博客主页上列出的每篇文章都显示在二次预告图像旁边，而没有经验的作者需要一种简单的方法来使他们的预告文本占据与图像大致相同的高度。

我通过创建一个简单的TinyMCE-Plugin部分地实现了这个功能，但这个插件非常容易出错，而且可能是一个不太优雅的解决方案。您可以查看完整代码here。

该插件的工作原理是获取编辑器的HTML内容，在第400个字符上切片html（在本例中），随后从第一部分中删除任何html标签并计算两个开始部分的长度差异： / p>

function insertMore(ed, offset) {

    var content = ed.getContent();
    var contentStripped = ed.getContent({format:'text'});
    if (content.length > offset) {

        content = content.replace(/<!--more-->/g,'');

        var firstHalfUnstripped = content.slice(0, offset);
        var firstHalfStripped = firstHalfUnstripped.replace(/<(?:.|\n)*?>/gm, '');

        var diff = firstHalfUnstripped.length - firstHalfStripped.length;

        offset = offset + diff;

        var beg = null;
        var realOffset = offset;
        while(beg !== " ") {
            beg = content.slice(realOffset, realOffset+1);
            realOffset++;
            if(beg === "") {
                break;
            }
        }

        content = [content.slice(0, realOffset), '<!--more-->',
        content.slice(realOffset)].join('');

        ed.setContent(content);

    }

}

然后将长度差异添加到最初计算的分割位置，以便实际的预告文本可以或多或少地正确地限制为预定义的字符数。

最后，脚本搜索偏移后最近的空格，在此位置再次分割HTML内容，并将两个半部分连接在一起，并在表示中间更多标记的字符串中加入。

这种作品，但你可以想象，不是很好。它删除了<p>和</p>之类的html标签，但是当编辑器中有一个包含空格的html元素时，很可能会失败。

例如，如果我们有一个包含在链接中的图像，这对于wordpress帖子非常常见，它最终会被分成两半，如果碰巧包含像第400个字母那样的东西：

<a href="image.png"><img class="alignright wp-image-543 size-full" src="image.png" alt="Image" width="250" height="250" /></a>

--> <a href="image.png"><img class="alignright wp-image-543 size-full" 
    <!--more-->
    src="image.png" alt="Image" width="250" height="250" /></a>

这将破坏Wordpress生成的代码，因此是不可接受的。但是，我无法找到更好或甚至不同的方法。我尝试使用TinyMCE4s setCursorLocation来将Cursor位置更改为400个字符，以便能够使用＆＃34;在光标位置插入更多标记＆＃34;功能，但根本无法使用。

此

tinyMCE.get(0).selection.setCursorLocation(tinyMCE.get(0).getBody(), 400)

刚刚返回IndexSizeError: Failed to execute 'setStart' on 'Range': There is no child at offset 400.

当我尝试手动设置范围时，会发生同样的事情。

忽略TinyMCE并尝试按照here说明在textarea中设置光标位置根本没有效果。

我该如何正常工作？提前谢谢！

在TinyMCE4 / Wordpress中自动添加更多标签

0 个答案: