CKEditor4 surroundContents 方法使用JS实现

CKEditor4 的 surroundContents 方法可以使用以下 JavaScript 代码实现：

function surroundContents(element, wrapper) {
    wrapper = wrapper || document.createElement('div');
    element.parentNode.insertBefore(wrapper, element);
    wrapper.appendChild(element);
    return wrapper;
}

该方法接受两个参数，第一个参数是要包裹的元素，第二个参数是包裹元素的容器。如果没有传递容器参数，则会创建一个 div 元素作为容器。该方法会将元素插入到容器中，并返回容器元素。

注意：该方法只适用于 CKEditor4 版本，其他版本可能会有所不同。

相关问题

CKEditor4 Range 的 surroundContents 方法使用JS实现

CKEditor4 Range 的 surroundContents 方法可以使用以下代码实现：

var range = editor.getSelection().getRanges()[0];
var wrapper = editor.document.createElement('div');
range.surroundContents(wrapper);

其中，editor 是 CKEditor4 的实例对象，getSelection() 方法返回当前选区对象，getRanges() 方法返回选区的范围数组，[0] 表示取第一个范围，surroundContents() 方法将选区的内容包裹在指定的元素中。

希望这个回答能够帮到你！

ckeditor4使用教程

CKEditor 4 是一款强大的富文本编辑器，可用于创建各种类型的文档，包括博客文章、电子邮件、新闻稿等。下面是 CKEditor 4 的使用教程：

1. 下载 CKEditor 4

CKEditor 4 可以从官方网站上免费下载。下载完成后，将其解压缩到您选择的位置。

2. 集成 CKEditor 4

将 CKEditor 4 集成到网站中很简单。只需将编辑器文件夹复制到您的服务器上，并在需要使用编辑器的页面上包含以下 JavaScript 代码：

<script src="/path/to/ckeditor.js"></script>

3. 创建一个基本的编辑器

要在页面上创建一个基本的 CKEditor 4 编辑器，只需在页面中包含以下代码：

<textarea name="editor1"></textarea>
<script>
    CKEDITOR.replace( 'editor1' );
</script>

4. 自定义编辑器

CKEditor 4 允许您根据需要自定义编辑器。您可以添加按钮、工具栏、插件等。以下是一些示例代码：

添加一个自定义按钮：

CKEDITOR.plugins.add( 'myplugin', {
    icons: 'myplugin',
    init: function( editor ) {
        editor.ui.addButton( 'MyButton', {
            label: 'My Button',
            command: 'mycommand',
            toolbar: 'insert'
        } );

        editor.addCommand( 'mycommand', {
            exec: function( editor ) {
                // Do something here.
            }
        } );
    }
} );

添加一个自定义工具栏：

var editor = CKEDITOR.replace( 'editor1', {
    toolbar: [
        { name: 'document', items: [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ] },
        { name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
        { name: 'editing', items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
        { name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },
        '/',
        { name: 'styles', items: [ 'Styles', 'Format' ] },
        { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
        { name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl' ] },
        { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
        { name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
        { name: 'about', items: [ 'About' ] }
    ]
} );

添加一个插件：

CKEDITOR.plugins.addExternal( 'myplugin', '/path/to/myplugin/' );

这些示例只是 CKEditor 4 自定义的一部分。您可以查看官方文档以获取更多示例代码和详细信息。