hookehuyr

fix 表格新增和文本对其操作方式调整

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-19 17:09:50 4 + * @LastEditTime: 2024-08-20 11:29:58
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 v-if="isCursorInTable" style="padding: 0.5rem 1.25rem;">
11 + <van-icon @click="addRow" name="https://cdn.ipadbiz.cn/custom_form/icon/add-line.png" />
12 + <van-icon @click="textCenter" name="https://cdn.ipadbiz.cn/custom_form/icon/text-align.png" style="margin-left: 1rem;" />
13 + </div>
10 <!-- <div @click="addRow">新增一行</div> 14 <!-- <div @click="addRow">新增一行</div>
11 <div @click="textCenter">文字居中</div> --> 15 <div @click="textCenter">文字居中</div> -->
12 <editor 16 <editor
...@@ -201,6 +205,8 @@ const tinymceId = ref( ...@@ -201,6 +205,8 @@ const tinymceId = ref(
201 // }, 205 // },
202 };*/ 206 };*/
203 207
208 +const isCursorInTable = ref(false);
209 +
204 const tinymceOptions = { 210 const tinymceOptions = {
205 // selector: selector, 211 // selector: selector,
206 language: 'zh_CN', 212 language: 'zh_CN',
...@@ -213,8 +219,8 @@ const tinymceOptions = { ...@@ -213,8 +219,8 @@ const tinymceOptions = {
213 // fontselect fontsizeselect 219 // fontselect fontsizeselect
214 // toolbar: 'table', // 工具栏显示 220 // toolbar: 'table', // 工具栏显示
215 toolbar: '', // 工具栏显示 221 toolbar: '', // 工具栏显示
216 - table_toolbar: 'tableinsertrowafter', // table_toolbar 配置 222 + // table_toolbar: 'tableinsertrowafter', // table_toolbar 配置
217 - // table_toolbar: '', // table_toolbar 配置 223 + table_toolbar: '', // table_toolbar 配置
218 contextmenu: 'tableinsertrowafter aligncenter', // 右键菜单 224 contextmenu: 'tableinsertrowafter aligncenter', // 右键菜单
219 width: $('.table-field-page').width() + 'px', 225 width: $('.table-field-page').width() + 'px',
220 paste_data_images: false, //允许粘贴图像 226 paste_data_images: false, //允许粘贴图像
...@@ -237,18 +243,41 @@ const tinymceOptions = { ...@@ -237,18 +243,41 @@ const tinymceOptions = {
237 // input.click(); 243 // input.click();
238 // }, 244 // },
239 init_instance_callback: function (editor) { 245 init_instance_callback: function (editor) {
240 - // editor.on('click', function (e) { 246 + editor.on('click', function (e) {
241 - // // tinymce 使用 <iframe> 实现功能,当点击 tinymce 的输入框时应该让表单设计器选中对应的字段, 247 + // // tinymce 使用 <iframe> 实现功能,当点击 tinymce 的输入框时应该让表单设计器选中对应的字段,
242 - // // 所以需要把点击事件转发给 iframe 外面的 textarea 248 + // // 所以需要把点击事件转发给 iframe 外面的 textarea
243 - // document.getElementById(editor.id).click(); 249 + // document.getElementById(editor.id).click();
244 - // let root = $('.tox.tox-silver-sink.tox-tinymce-aux').find('.tox-pop__dialog') 250 + // let root = $('.tox.tox-silver-sink.tox-tinymce-aux').find('.tox-pop__dialog')
245 - // nextTick(() => { 251 + // nextTick(() => {
246 - // setTimeout(() => { 252 + // setTimeout(() => {
253 +
254 + // console.warn(root);
255 + // }, 1000);
256 + // })
257 + // 获取当前编辑器实例
258 + const editor = tinymce.activeEditor;
247 259
248 - // console.warn(root); 260 + // 获取当前光标选中的节点
249 - // }, 1000); 261 + const selectedNode = editor.selection.getNode();
250 - // }) 262 +
263 + // 检查选中的节点是否在表格中
264 + isCursorInTable.value = editor.dom.getParent(selectedNode, 'table') !== null;
265 + });
266 + // 当光标进入表格时触发
267 + // editor.on('focusin', function (e) {
268 + // const selectedNode = editor.selection.getNode();
269 + // if (editor.dom.getParent(selectedNode, 'table')) {
270 + // isCursorInTable.value = true;
271 + // }
251 // }); 272 // });
273 +
274 + // 当光标从表格移出时触发
275 + editor.on('focusout', function (e) {
276 + const selectedNode = editor.selection.getNode();
277 + if (isCursorInTable.value && !editor.dom.getParent(selectedNode, 'table')) {
278 + isCursorInTable.value = false;
279 + }
280 + });
252 // 初始化实例 281 // 初始化实例
253 handleSetContent(props.table_html); 282 handleSetContent(props.table_html);
254 // 禁止图片复制 283 // 禁止图片复制
......