hookehuyr

表格组件使用命令直接新增一行和文字居中测试

1 <!-- 1 <!--
2 * @Date: 2024-07-12 13:28:27 2 * @Date: 2024-07-12 13:28:27
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-08-07 13:19:06 4 + * @LastEditTime: 2024-08-19 17:09:50
5 * @FilePath: /data-table/src/components/TEditor/index.vue 5 * @FilePath: /data-table/src/components/TEditor/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
9 <div style="height: 100%; overflow: hidden;"> 9 <div style="height: 100%; overflow: hidden;">
10 + <!-- <div @click="addRow">新增一行</div>
11 + <div @click="textCenter">文字居中</div> -->
10 <editor 12 <editor
11 api-key="no-api-key" 13 api-key="no-api-key"
12 v-model="myValue" 14 v-model="myValue"
...@@ -212,7 +214,8 @@ const tinymceOptions = { ...@@ -212,7 +214,8 @@ const tinymceOptions = {
212 // toolbar: 'table', // 工具栏显示 214 // toolbar: 'table', // 工具栏显示
213 toolbar: '', // 工具栏显示 215 toolbar: '', // 工具栏显示
214 table_toolbar: 'tableinsertrowafter', // table_toolbar 配置 216 table_toolbar: 'tableinsertrowafter', // table_toolbar 配置
215 - contextmenu: 'tableinsertrowafter', // 右键菜单 217 + // table_toolbar: '', // table_toolbar 配置
218 + contextmenu: 'tableinsertrowafter aligncenter', // 右键菜单
216 width: $('.table-field-page').width() + 'px', 219 width: $('.table-field-page').width() + 'px',
217 paste_data_images: false, //允许粘贴图像 220 paste_data_images: false, //允许粘贴图像
218 // min_height: 300, 221 // min_height: 300,
...@@ -328,6 +331,13 @@ const onBlur = (e) => { ...@@ -328,6 +331,13 @@ const onBlur = (e) => {
328 emits("blur", handleGetContent()); 331 emits("blur", handleGetContent());
329 } 332 }
330 333
334 +const addRow = () => {
335 + tinymce.activeEditor.execCommand('mceTableInsertRowAfter')
336 +}
337 +const textCenter = () => {
338 + tinymce.activeEditor.execCommand('JustifyCenter')
339 +}
340 +
331 defineExpose({ 341 defineExpose({
332 handleSetContent, 342 handleSetContent,
333 handleGetContent, 343 handleGetContent,
......