Showing
1 changed file
with
33 additions
and
4 deletions
| 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,7 +243,7 @@ const tinymceOptions = { | ... | @@ -237,7 +243,7 @@ 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(); |
| ... | @@ -248,7 +254,30 @@ const tinymceOptions = { | ... | @@ -248,7 +254,30 @@ const tinymceOptions = { |
| 248 | // console.warn(root); | 254 | // console.warn(root); |
| 249 | // }, 1000); | 255 | // }, 1000); |
| 250 | // }) | 256 | // }) |
| 257 | + // 获取当前编辑器实例 | ||
| 258 | + const editor = tinymce.activeEditor; | ||
| 259 | + | ||
| 260 | + // 获取当前光标选中的节点 | ||
| 261 | + const selectedNode = editor.selection.getNode(); | ||
| 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 | // 禁止图片复制 | ... | ... |
-
Please register or login to post a comment