ng + "\">" + html + "</pre>"); } }; });4、在你的HTML页面引入CKEditor，并在初始化时加载这个插件：
```html
<!DOCTYPE html>
<html>
<head>
<script src="ckeditor/ckeditor.js"></script>
</head>
<body>
<textarea id="editor1"></textarea>
<script>
CKEDITOR.replace('editor1', {
extraPlugins: 'insertcode'
});
</script>
</body>
</html>
```
5、为了实现代码高亮，你需要在页面中引入`SyntaxHighlighter`库。可以从官方网站（http://alexgorbatchev.com/SyntaxHighlighter/）下载，将所需的CSS和JS文件添加到你的HTML文件中：
```html
<link href="path/to/syntaxhighlighter.css" rel="stylesheet" type="text/css">
<script src="path/to/syntaxhighlighter.min.js" type="text/javascript"></script>
```
6、为了使`SyntaxHighlighter`能够自动识别并高亮编辑器中插入的代码，需要在文档加载完成后调用`SyntaxHighlighter.all()`函数：
```javascript
window.onload = function() {
SyntaxHighlighter.all();
};
```
这样，你就成功地在CKEditor中集成了`SyntaxHighlighter`代码高亮插件。现在，用户可以在编辑器中插入代码，并且插入的代码会根据所选语言自动进行颜色高亮显示，极大地提高了代码的可读性。
在实际应用中，你可能还需要对样式进行自定义，以适应你的网站设计。你可以通过修改`SyntaxHighlighter`的CSS文件来调整代码块的样式，如背景色、字体、行号等。此外，`SyntaxHighlighter`支持多种编程语言，可以根据需要添加或删除语言选项。
总结来说，CKEditor是一款强大的富文本编辑器，通过自定义插件可以实现各种功能扩展。在这个例子中，我们创建了一个名为`insertcode`的插件，允许用户在编辑器中插入代码，并使用`SyntaxHighlighter`库进行代码高亮。这个过程包括创建插件文件、定义对话框、加载插件以及引入和配置`SyntaxHighlighter`库。通过这种方式，你可以为CKEditor增添更多实用的功能，满足不同用户的需求。
