Hello everyone,
My problem is that:
When i want to use ckeditor on vuebootstrap modal, mouse doesn't focus to inputs on the form which opens when i clicked field. I saw solutions for jquery, but im using vuejs and CKEditor 4.
How can we solve this problem ? Anyone know ?
Related
guys. I have a small project, where i need to use Ckeditor 4 with VueJS 2.
So i downloaded all scripts from official website, but have a big problem: blur and focus event works only with last editor at the page.
Here my code, where i trying to initialize editor at the page.
<ckeditor
#blur="logEvent('blur', $event)"
:config="CKeditorConfig"
:value="editorData"
></ckeditor>
I tried to debug official ckeditor-vuejs port, and saw that each time my editor have same name.
I have component with tinyMCE wrapped in <tiny-mce-editor></tiny-mce-editor> in Vue Bootstrap Card component. However if I switch to second tab and back, the editor leaves plain textarea. I have tried many possible solutions I've found over the internet, but any seems work. The thing is that the editor component must be universal so I am not really able to catch it at card level and destroying it every tab switch that occurs. How am I supposed to fix this behavior? I am using tinyMCE v5 and completely depressed.
May try add
tinymce.remove("YourSelectorValue");
before tinymce initialization.
There is any way to make content editable to be drag-gable & Re-sizable without Plugin or with plugin in VueJs?
I will appreciate any views-Thanks.
I use Vue-Draggable, you can check out their github page here, see a demo here.
I am using import bModal from 'bootstrap-vue/es/components/modal/modal'; bootstrap-modal
I have following User Interface in Modal, here I need to choose department from a dropdown(getting item list using AJAX). Here I want to make it easy to add new department by clicking button beside the dropdonw - for such popup modal with UI.
In vuejs i have code for main modal -
showModal () {
this.clearForm();
this.formInfo.formSubmitted = false;
this.$refs[this.modalInfo.id].show();
}
this is working fine. Now on click event on green button, another modal should be opened over currently opened window. Unfortunately, currently modal is get hidden and new model opened. I have following code for extra modal-
showExtraModal:function(){
this.$refs['extraModal'].show();
}
How can I solve this problem in vue js.
Seems to be a limitation of Bootstrap (see docs):
Bootstrap only supports one modal window at a time. Nested modals aren’t supported as we believe them to be poor user experiences.
Since bootstrap-vue is just a wrapper around Bootstrap, the same limitation will likely apply.
I had a similar problem with pure Bootstrap; IIRC I solved it by altering the content of the modal instead of showing a new one (in Vue-speak: rendering a different component), kind of a mini-routing inside the modal.
I am working with angular 2 rc4 and we are using fuel-ui http://fuelinteractive.github.io/fuel-ui/#/ to load a modal.
What we are trying to achieve is the following:
we have a login component that we want to inject into the fuel-ui modal the problem is that the actual modal html code (actual DOM) is getting loaded after.
Fuel-ui gives a tag into which the html for the modal gets loaded into.
I have researched and tried DynamicComponentLoader although found out it is now deprecated.
What I need is to know what is the best way to inject my login component content
into the rendered DOM (tag with modal-body class from bootstrap html).
I have searched but perhaps someone had the same issue and stumbled upon a better link that explains how to do this.
Thank you, in advance, for your help.
Nancy
This seems very old now. But i think the latest in Angular helps you use content projection into a component.
You can add <ng-content></ng-content> as the body of your modal. In the parent component view add your custom component wrapped in the modal component. When modal shows up, you will have your component in it's content.
Also, Angular supports dynamic component creation.
Component templates are not always fixed. An application may need to
load new components at runtime.
You can look it up here for any help:
dynamic-component-loader