Version
vue | ^2.6.11 |
vuetify | ^2.5.3 |
tinymce | 5.3.2 |
@tinymce/tinymce-vue | ^3 |
Codes:
<v-dialog v-model="xxx" width="1000" eager content-class="same-dialog" :retain-focus="false"> ··· <p-editor v-model="formParamer.content" :key="editorKey" class="px-3 pb-3"></p-editor> //封装过的tinymce ··· </v-dialog>
JavaScript part of Vue Code:
··· data() { return { ··· editorKey:'' ··· } }, mounted() { // The embedded editor component must be re-given the key when it is mounted again, otherwise the content editor will not work this.editorKey = '' + Math.random() } ···
solve the problem
1. The picture edit box form element of TinyMCE component in vuetify dialog box cannot be focused
add: Retain focus = "false"
2. Switch to another route and then switch back. Click the TinyMCE component, which cannot be edited.
Add a dynamic key to the TinyMCE component in the mounted hook added in the current component.
Similar Posts:
- What are the recommendations for pdf editor? Try this convenient and easy to use editing software
- Vue3’s use of reactive/torefs + V-model leads to the failure of response and the failure of El form input
- Error message of element and Vue framework
- These dependencies were not found: * throttle-debounce/debounce in ./node_modules/element-ui/lib/tooltip.js * throttle-debounce/throttle in ./node_modules/element-ui/lib/element-ui.common.js
- Solve the problem that SQL Server blocks the state’openrowset/opendatasourc of component ‘ad hoc distributed queries’
- Invalid prop: type check failed for prop value
- [Solved] HBuilderX Run uniapp Error: SassError: Invalid CSS after “}”: expected selector, was “,”
- Pep8: continuation line over indented for visual indent appears when wrapping Python code
- IntelliJ IDEA: Clone failed runnerw.exe CreateProcess failed with error 2
- Remote connection to Ubuntu 14.04 desktop environment through VNC under Windows