调用Ckeditor内联Ioverride div风格

时间:2015-02-07 02:56:43

标签: javascript html css ckeditor

当我打电话给Ckeditor内联时,它总是改变我的html风格

示例:http://recordit.co/mKioZOnryg

我该如何解决?

HTML

<div contenteditable="true" style="width: 765px; height: 30px; padding-bottom: 5px; padding-top: 10px; padding-right: 0px; padding-left: 0px; line-height: 1.4em; text-align: center; background-color: #A6FFA9; margin-top: 0px; margin-bottom:0px; margin-left: 0px; margin-right: 0px; border-style:none; border-width: 0px; border-color: #ffffff;" id="template-bottom">

    <span  style="color:#000000; font-size: 26px; font-weight: bold; ">Fusce adipiscing massa vitae ipsum malesuada.</span>

</div>

CKeditor脚本

<script>

CKEDITOR.on( 'instanceCreated', function ( event ) {
  var editor = event.editor,
  element = editor.element;

  // Customize editors for headers and tag list.
  // These editors do not need features like smileys, templates, iframes etc.
  if ( element.is( 'h1', 'h2', 'h3' ) || element.getAttribute( 'id' ) == 'taglist' ) {
    // Customize the editor configuration on "configLoaded" event,
    // which is fired after the configuration file loading and
    // execution. This makes it possible to change the
    // configuration before the editor initialization takes place.
    editor.on( 'configLoaded', function () {
      // Remove redundant plugins to make the editor simpler.
      editor.config.removePlugins = 'colorbutton,find,flash,font,' +
        'forms,iframe,newpage,removeformat,' +
        'smiley,specialchar,stylescombo,templates';
      editor.config.extraAllowedContent = 'div(*)';
      // Rearrange the toolbar layout.
      editor.config.toolbarGroups = [
      { name: 'editing', groups: [ 'basicstyles', 'links' ] },
      { name: 'undo' },
      { name: 'clipboard', groups: [ 'selection', 'clipboard' ] },
        { name: 'about' }
      ];
    } );
  }
} );
</script>

0 个答案:

没有答案