CKEDITOR各种操作获取CKEDITOR的内容|添加功能

最新推荐文章于 2025-09-10 19:40:20 发布

转载最新推荐文章于 2025-09-10 19:40:20 发布 · 1.8k 阅读

web ui 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何使用CKEditor控件进行页面内容的循环操作、通过ID获取内容，以及添加功能控件如链接功能。主要内容包括：遍历页面CKEditor实例获取内容与选区，插入新内容；通过ID直接获取特定CKEditor实例的内容；添加自定义功能控件以增强编辑体验。

1、循环页面的CKEDITOR控件

for (var instance in CKEDITOR.instances) {
var oldContent = CKEDITOR.instances[instance].getData(); //内容
var selection = CKEDITOR.instances[instance].getSelection(); //选中内容

CKEDITOR.instances[instance].insertHtml(“新内容”);//赋值

}

2、通过ID取值

var content = CKEDITOR.instances.name.getData();

page：<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>

<CKEditor:CKEditorControl ID="name" runat="server" ></CKEditor:CKEditorControl>

3、添加功能控件：

CKEDITOR.plugins.add('linkcontent', {
    lang:['zh-cn'],
    requires: ['dialog'],
    init: function(editor){
  // Add the link and unlink buttons.
  editor.addCommand('linkcontent', new CKEDITOR.dialogCommand('linkcontent'));

        editor.ui.addButton('Linkcontent', {
            label: editor.lang.tbTip,
            icon: this.path + 'images/link.png',
           command: 'autolink'
        });
        CKEDITOR.dialog.add('linkcontent', this.path + 'dialogs/linkcontent.js');
    }
});