querySelector报错#categories_description[1]非有效选择器排查

• CSS选择器语法中，方括号[]是属性选择器的专用特殊符号，直接写#categories_description[1]时，解析器会把[1]识别为属性匹配规则，不属于合法的ID选择器写法，因此直接抛出语法错误。
• 你写的初始化代码存在两层拼接错误：一是把HTML属性转义用的"实体直接写到了JS字符串里，输出到前端的选择器字符串会带多余字符；二是你尝试的#{$id}是PHP双引号内的变量解析语法，如果你没把整段JS放在PHP双引号字符串中，这段内容会原样输出到前端，根本不会读取$id的变量值。

方案1：转义选择器特殊字符（保留原有ID规则） #

CSS选择器中匹配带特殊字符的ID时，需要在特殊字符前加双反斜杠转义，比如ID为categories_description[1]时，合法选择器写法为#categories_description\\[1\\]。
修正后的完整代码如下：

<?php
for ($i = 0, $n = count($languages); $i < $n; $i++) {
    $langId = $languages[$i]['id'];
    $inputName = 'categories_description[' . $langId . ']';
    // 提前转义ID里的方括号，生成合法的CSS选择器
    $ckSelector = '#' . str_replace(['[', ']'], ['\\\\[', '\\\\]'], $inputName);
    $editorContent = isset($categories_description[$langId]) 
        ? str_replace('&amp; ', '&amp;amp; ', trim($categories_description[$langId])) 
        : $CategoriesAdmin->getCategoryDescription($cInfo->categories_id, $langId);
    // 生成textarea时不要用&quot;拼接属性，直接写双引号即可
    echo HTML::textAreaCkeditor($inputName, 'soft', '750', '300', $editorContent, 'id="' . $inputName . '"');
?>
<script>
ClassicEditor
    .create(document.querySelector('<?= $ckSelector ?>'), {
        toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'imageUpload', 'ckfinder', 'blockQuote', 'insertTable', 'mediaEmbed', 'undo', 'redo', '|', 'help']
    })
    // 这里接你原有的编辑器回调逻辑
</script>
<?php } ?>

方案2：通用类批量初始化（更推荐，无转义成本） #

不需要处理ID特殊字符的话，直接给所有多语言CKEditor绑定统一class，批量初始化即可，容错率更高：

<?php
for ($i = 0, $n = count($languages); $i < $n; $i++) {
    $langId = $languages[$i]['id'];
    $inputName = 'categories_description[' . $langId . ']';
    $editorContent = isset($categories_description[$langId]) 
        ? str_replace('&amp; ', '&amp;amp; ', trim($categories_description[$langId])) 
        : $CategoriesAdmin->getCategoryDescription($cInfo->categories_id, $langId);
    // 给textarea加统一类名ckeditor-multilang
    echo HTML::textAreaCkeditor($inputName, 'soft', '750', '300', $editorContent, 'id="' . $inputName . '" class="ckeditor-multilang"');
}
?>
<script>
// 页面加载完成后批量初始化所有编辑器
document.querySelectorAll('.ckeditor-multilang').forEach(editorDom => {
    ClassicEditor.create(editorDom, {
        toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'imageUpload', 'ckfinder', 'blockQuote', 'insertTable', 'mediaEmbed', 'undo', 'redo', '|', 'help']
    })
    // 这里接你原有的编辑器回调逻辑
})
</script>

• "是HTML属性场景下的转义字符，只能写在HTML标签的属性值里，不能直接写到<script>标签内的JS代码中，否则会被当成普通字符串内容解析。
• PHP变量插值{$var}的写法仅在PHP双引号包裹的字符串内生效，直接写到HTML/JS模板里不会被PHP解析。

内容的提问来源于stack exchange，提问作者Michel