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

正如您所发现的那样，在编辑器的内容中添加一个新元素是个坏主意，相反，您必须获取编辑器的body元素并更改其样式。

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

但是，只有当您在＆＃34;整页＆＃34;中工作时，才会保存此更改。模式，否则，编辑器只返回正文的内容而不是文档的其余部分。

Answer 2

此方法也适用于编辑器中插入的新图像（jsFiddle）：

CKEDITOR.replace( 'textarea', {
    on: {
        contentDom: function() {
            this.editable().on( 'click', function( evt ) {                   
                this.setStyle( 'background-image', 'url(' + evt.data.getTarget().getAttribute( 'src' ) + ')' );
            } );            
        }
    }
} );

使用jQuery适配器：

$( 'textarea' ).ckeditor( {
    contentDom: function() {
        ...
    }
} );

请参阅editor#contentDom事件。

Answer 3

$('body').on('keypress','.editor-content', function(e) {
   if (e.keyCode == 8) {
    editorInstance.setData('<style type="text/css"> body{ background-image: url(' + $(this).attr('src') + '); </style>');
   }
});

当用户按退格键时，再次更新编辑器的背景属性。

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

3 个答案: