jquery - 使用 jQuery 更改 ckeditor 文本区域的背景

Question

如何使用 jQuery Adapter 动态更改 CKEditor 的背景图像？ 我有一个图像列表，每当用户点击其中一个图像时，我想用该图像更改编辑器区域的背景图像。我正在尝试的是:

$('#editor_content').ckeditor();
var editorInstance = $('#editor_content').ckeditor().editor;
$('img').click(function(ev){
editorInstance.setData('<style type="text/css"> body{ background-image: url(' + $(this).attr('src') + '); </style>');
});

从它改变背景图像的意义上说，这很好用。但是，如果用户按下退格键，它就会消失。我认为那是因为它直接在正文中添加了样式:

<p>
<style type="text/css"> 
body
{ 
    background-image: url(path/to/my/image.png); 
} 
</style>
</p>

Answer 1

如您所见，在编辑器的内容中添加新元素不是一个好主意，您必须获取编辑器的主体元素并更改其样式。

$('img').click(function(ev){
    editorInstance.getDocument().getBody().setStyle("background-image", "url(' + $(this).attr('src') + ')");
});

但只有当您在“全页”模式下工作时，此更改才会被保存，否则，编辑器只会返回正文的内容，而不会返回文档的其余部分。