vue2使用 CKEditor 4 创建自定义表格

原创于 2025-09-22 11:55:15 发布 · 771 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #ui

vue2使用 CKEditor 4 创建自定义表格

首先，确保你已经安装了必要的依赖：

npm install ckeditor4-vue@^1.0.0 --save

下面是一个完整的 Vue 组件示例：

<template>
  <div class="ckeditor-container">
    <h3>自定义表格编辑器</h3>
    <ckeditor 
      v-model="editorData" 
      :config="editorConfig"
      @instanceCreated="onInstanceCreated"
      @dataReady="onDataReady"
    ></ckeditor>
    
    <div class="table-preview" v-if="showPreview">
      <h4>表格预览:</h4>
      <div v-html="editorData"></div>
    </div>
  </div>
</template>

<script>
import CKEditor from 'ckeditor4-vue';
import Vue from 'vue';

// 注册 CKEditor 组件
Vue.use(CKEditor);

export default {
  name: 'CkeditorTable',
  data() {
    return {
      editorData: '<p>请在此处插入或编辑表格...</p>',
      showPreview: false,
      editorConfig: {
        // 配置工具栏，确保包含表格相关按钮
        toolbar: [
          ['Format', 'Font', 'FontSize'],
          ['Bold', 'Italic', 'Underline', 'Strike', 'RemoveFormat'],
          ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote'],
          ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
          ['Link', 'Unlink', 'Image'],
          // 表格相关工具
          ['Table', 'TableProperties', 'TableCellProperties'],
          ['Source']
        ],
        
        // 表格插件配置
        table_toolbar: 'TableInsertRowBefore TableInsertRowAfter TableDeleteRow TableInsertColumnBefore TableInsertColumnAfter TableDeleteColumn',
        table_cell_toolbar: 'TableMergeCells TableSplitCell TableCellProperties',
        
        // 允许的内容规则，确保表格相关标签和属性被允许
        allowedContent: true,
        
        // 自定义表格样式
        contentsCss: [
          'http://cdn.ckeditor.com/4.16.2/full-all/contents.css',
          'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'
        ],
        
        // 额外的插件
        extraPlugins: 'table,tabletools,tableresize',
        
        // 表格默认属性
        tableDefaultAttributes: {
          class: 'table table-bordered table-striped'
        },
        
        // 表格单元格默认属性
        tableCellDefaultAttributes: {
          style: 'padding: 8px; text-align: left;'
        }
      },
      editorInstance: null
    };
  },
  methods: {
    // 编辑器实例创建时的回调
    onInstanceCreated(evt) {
      this.editorInstance = evt.editor;
      console.log('CKEditor 实例已创建');
      
      // 可以在这里添加自定义表格操作
      this.addCustomTableCommands();
    },
    
    // 数据准备就绪时的回调
    onDataReady() {
      this.showPreview = true;
    },
    
    // 添加自定义表格命令
    addCustomTableCommands() {
      const editor = this.editorInstance;
      
      // 示例：添加一个创建特定样式表格的命令
      editor.addCommand('insertCustomTable', {
        exec: function(editor) {
          // 创建一个 3x3 的表格
          const tableHtml = `
            <table class="table table-hover custom-table">
              <thead>
                <tr>
                  <th style="background-color: #f5f5f5;">表头 1</th>
                  <th style="background-color: #f5f5f5;">表头 2</th>
                  <th style="background-color: #f5f5f5;">表头 3</th>
                </tr>
              </thead>
              <tbody>
                <tr><td>单元格 1</td><td>单元格 2</td><td>单元格 3</td></tr>
                <tr><td>单元格 4</td><td>单元格 5</td><td>单元格 6</td></tr>
              </tbody>
            </table>
          `;
          
          // 将表格插入到编辑器中
          editor.insertHtml(tableHtml);
        }
      });
      
      // 为自定义命令添加按钮
      editor.ui.addButton('CustomTable', {
        label: '插入自定义表格',
        command: 'insertCustomTable',
        toolbar: 'table',
        icon: 'https://cdn-icons-png.flaticon.com/128/1082/1082733.png'
      });
      
      console.log('已添加自定义表格命令');
    }
  },
  mounted() {
    // 可以在这里初始化一些数据或执行其他操作
  }
};
</script>

<style scoped>
.ckeditor-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 20px;
}

.table-preview {
  margin-top: 30px;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

/* 自定义表格样式 */
::v-deep .custom-table {
  width: 100%;
  margin-bottom: 1rem;
  border-collapse: collapse;
}

::v-deep .custom-table th,
::v-deep .custom-table td {
  border: 1px solid #ddd;
  padding: 0.75rem;
  vertical-align: top;
}

::v-deep .custom-table thead th {
  vertical-align: bottom;
  background-color: #f8f9fa;
}
</style>