Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
data-table
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Graphs
Network
Create a new issue
Commits
Issue Boards
Authored by
hookehuyr
2024-08-20 11:32:38 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
c4ff265835f7f2a8c3402026ef905b737a70fbe4
c4ff2658
1 parent
e8fb62d2
fix 表格新增和文本对其操作方式调整
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
42 additions
and
13 deletions
src/components/TEditor/index.vue
src/components/TEditor/index.vue
View file @
c4ff265
<!--
* @Date: 2024-07-12 13:28:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-08-
19 17:09:50
* @LastEditTime: 2024-08-
20 11:29:58
* @FilePath: /data-table/src/components/TEditor/index.vue
* @Description: 文件描述
-->
<template>
<div style="height: 100%; overflow: hidden;">
<div v-if="isCursorInTable" style="padding: 0.5rem 1.25rem;">
<van-icon @click="addRow" name="https://cdn.ipadbiz.cn/custom_form/icon/add-line.png" />
<van-icon @click="textCenter" name="https://cdn.ipadbiz.cn/custom_form/icon/text-align.png" style="margin-left: 1rem;" />
</div>
<!-- <div @click="addRow">新增一行</div>
<div @click="textCenter">文字居中</div> -->
<editor
...
...
@@ -201,6 +205,8 @@ const tinymceId = ref(
// },
};*/
const isCursorInTable = ref(false);
const tinymceOptions = {
// selector: selector,
language: 'zh_CN',
...
...
@@ -213,8 +219,8 @@ const tinymceOptions = {
// fontselect fontsizeselect
// toolbar: 'table', // 工具栏显示
toolbar: '', // 工具栏显示
table_toolbar: 'tableinsertrowafter', // table_toolbar 配置
//
table_toolbar: '', // table_toolbar 配置
//
table_toolbar: 'tableinsertrowafter', // table_toolbar 配置
table_toolbar: '', // table_toolbar 配置
contextmenu: 'tableinsertrowafter aligncenter', // 右键菜单
width: $('.table-field-page').width() + 'px',
paste_data_images: false, //允许粘贴图像
...
...
@@ -237,18 +243,41 @@ const tinymceOptions = {
// input.click();
// },
init_instance_callback: function (editor) {
// editor.on('click', function (e) {
// // tinymce 使用 <iframe> 实现功能,当点击 tinymce 的输入框时应该让表单设计器选中对应的字段,
// // 所以需要把点击事件转发给 iframe 外面的 textarea
// document.getElementById(editor.id).click();
// let root = $('.tox.tox-silver-sink.tox-tinymce-aux').find('.tox-pop__dialog')
// nextTick(() => {
// setTimeout(() => {
editor.on('click', function (e) {
// // tinymce 使用 <iframe> 实现功能,当点击 tinymce 的输入框时应该让表单设计器选中对应的字段,
// // 所以需要把点击事件转发给 iframe 外面的 textarea
// document.getElementById(editor.id).click();
// let root = $('.tox.tox-silver-sink.tox-tinymce-aux').find('.tox-pop__dialog')
// nextTick(() => {
// setTimeout(() => {
// console.warn(root);
// }, 1000);
// })
// 获取当前编辑器实例
const editor = tinymce.activeEditor;
// console.warn(root);
// }, 1000);
// })
// 获取当前光标选中的节点
const selectedNode = editor.selection.getNode();
// 检查选中的节点是否在表格中
isCursorInTable.value = editor.dom.getParent(selectedNode, 'table') !== null;
});
// 当光标进入表格时触发
// editor.on('focusin', function (e) {
// const selectedNode = editor.selection.getNode();
// if (editor.dom.getParent(selectedNode, 'table')) {
// isCursorInTable.value = true;
// }
// });
// 当光标从表格移出时触发
editor.on('focusout', function (e) {
const selectedNode = editor.selection.getNode();
if (isCursorInTable.value && !editor.dom.getParent(selectedNode, 'table')) {
isCursorInTable.value = false;
}
});
// 初始化实例
handleSetContent(props.table_html);
// 禁止图片复制
...
...
Please
register
or
login
to post a comment