Question

有没有办法让CKEDITOR显示源模式选项作为两个标签（HTML / SOURCE视图）而不是单个Source按钮？

Answer 1

没有。但是在CKEditor API的帮助下，这是一块蛋糕（JSFiddle）。

<强> HTML 即可。标签基于“无线电+标签”技术，这种技术非常常见，并在this article中有所描述。请注意，由于编辑器本身将更改其内容，因此无需创建真正的选项卡。我这样做是为了减少JS - 你仍然可以使用JS来控制你的标签。

<div class="tabs">
    <input type="radio" id="tab-wysiwyg" name="mode" checked>
    <label for="tab-wysiwyg">WYSIWYG</label>

    <input type="radio" id="tab-source" name="mode">
    <label for="tab-source">Source</label>

    <textarea id="editor">Hello!</textarea>    
</div>

<强> JS 即可。请注意，侦听器也可以应用于您使用的jQuery或任何其他DOM库。我使用CKEditor DOM API来保持简单。唯一值得一提的是editor.setMode。您还可以在外部附加侦听器：CKEDITOR.replace返回编辑器实例，该实例也存储在全局CKEDITOR.instances对象中。

CKEDITOR.replace( 'editor', {
    toolbarGroups: [ { name: 'basicstyles' } ],
    on: {
        instanceReady: function() {            
            var doc = CKEDITOR.document,
                editor = this;

            doc.getById( 'tab-wysiwyg' ).on( 'click', function() {
                editor.setMode( 'wysiwyg' );
            } );

            doc.getById( 'tab-source' ).on( 'click', function() {
                editor.setMode( 'source' );
            } );            
        }
    }
} );

CSS （适用于标签页）。造型，eyecandy ......

.tabs [type=radio] {
    display: none;
    position: absolute;
}

.tabs [type=radio] + label {
    font-size: 12px;
    display: block;
    float: left;
    border: 1px solid #bbb;
    cursor: pointer;
    padding: .5em 1em;
    color: #888;
    position: relative;
    margin-right: -1px;
    margin-bottom: -1px;
    opacity: .8;
    font-weight: bold;    
}

.tabs label:hover {
    background: #f7f7f7;
}

.tabs [type=radio]:checked + label {
    background: rgb(244,244,244);
    opacity: 1;
    color: #000;
}

.tabs .cke_editor_editor {
    clear: both;
}

额外：您还可以使用config.toolbarCanCollapse选项和editor.execCommand( 'toolbarCollapse' );来最小化源模式下的工具栏。玩得开心！

CKEDITOR：将源模式显示为选项卡而不是单个按钮

1 个答案: