I would like to make a page with vue.js and laravel, where I can show a pdf in a vue-component. I found a great lib for that vue-pdf, what can show the PDFs.
My problem is that the PDF reader can not zoom (in/out), is there any solution for that, (e.g.: css / js hack) or can anybody recommend me an another pdf reader in vue system?
Thanks in advance!
You might want to take a look at npm's panzoom
<template>
<pdf #loaded="onLoad" src="yourpdf.pdf" page="1" ref="mypdf"></pdf>
</template>
<script>
import pdf from 'vue-pdf';
import panzoom from 'panzoom';
export default {
components: {
pdf
},
methods: {
onLoad() {
panzooom(this.$refs.mypdf);
}
}
}
</script>
Related
I am using CK editor and passing the initial data to editor as shown below
import React from 'react';
import CKEditor from '#ckeditor/ckeditor5-react';
import ClassicEditor from '#ckeditor/ckeditor5-build-classic';
classEditor extends React.Component{
constructor(props){
super(props)
this.state={
editorState:'<div class="main"><div class="child-1"><div>Iam inside </div></div><div class="child-2">Child 2</div></div>'
}
}
render(){
return <CKEditor
editor={ClassicEditor}
data={this.state.editorState}
onInit={editor => {
// You can store the "editor" and use when it is needed.
console.log('Editor is ready to use!', editor);
}}
config={{
allowedContent:true,
extraAllowedContent:true
}}
onChange={(event, editor) => {
const data = editor.getData();
this.handleEditorChange(data);
console.log(data);
}}
/>
}
}
when the OnChange handler is called it is changing the initially passed html to something like this
<p>Iam inside</p><p>Child 2</p>
How Can I stop CK Editor replacing div tags with p tags and allow customStyles and classNames
Nikhil
Regarding your post, it seems like you are going to create a custom theme for your inline text in the editor.. I am not sure whether this is right.
However, if so, you can customize the editor theme and use it for your purpose.
CKEditor has powerful builtin function for it.
In addition, if you want to customize the editor, you can do.
Please have a look at the following links:
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/basic-api.html#creating-an-editor
https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/ui/theme-customization.html
Hope this helpful.
config.protectedSource.push(/<p[^>]*><\/p>/g);
Use This Code In editorConfig
CKEDITOR.editorConfig = function (config) {
config.protectedSource.push(/<i[^>]*><\/i>/g); };
I need to add a preloading animation for vue.js SPA application meanwhile files in the background are being loaded, using SVG and a progress bar. So instead of user seeing empty screen, he can see an animation. Something like gmail loading animation or https://jsfiddle.net/ Thank you for any advice
VueJS has lifecycles. The most important for that are :
beforeCreate, created, beforeMount, mounted.
So, In your component, below the data, you can write some logic in these lifecycles.
So, for example in beforeCreate or created hook you can display your SVG loader, and then in mounted (inserted in DOM), you hide it.
Example :
//MyComponent.vue
<template>
...
</template
<script>
export default {
data() {
return {
article : {},
user_id: null
},
created() {
//Display your SVG
},
mounted() {
//Hide your SVG
},
methods: {
//etc,etc
}
</script>
i have encountered an issue, when making a text editor with support of image based tags. There is a need to move those tags around freely in the text, which is being made impractical by this issue.
Basically when I start dragging an image, and then drop it on desired location, one of two results can happen: A) it works as intended and B) the image is dropped to the end/beginning of the sentence. You can see the behaviour in attached gif. Resulting behavior
I'm using react and typescript combination for creating the page with quill being inserted in a component.
// TextEditor/index.tsx
import * as React from 'react';
import * as Quill from 'quill';
import { TextEditorState, TextEditorProps } from '../#types';
import { generateDelta } from '../#utils/generateDelta';
const formats = [
'image'
];
class TextEditor extends React.Component<TextEditorProps, TextEditorState> {
constructor(props: TextEditorProps) {
super(props);
this.state = {
Editor: undefined
}
}
componentDidMount() {
const self = this;
this.setState({Editor: new Quill('#editor-container', {formats: formats, debug: 'warn'})});
}
changeText(text: string) {
if(typeof(this.state.Editor) !== 'undefined') {
this.state.Editor.setContents(generateDelta(text), 'api');
}
}
render() {
return (
<div id="editor-container"></div>
);
}
}
export default TextEditor;
And the usage of this component in another component is just
// editor.tsx
import TextEditor from '../QuillEditor/TextEditor';
...
onUpdate(text: string) {
this.refs.targetEditor.changeText(text);
}
...
render() {
return (
...
<TextEditor
ref={'targetEditor'}
/>
...
)
}
I have tried to change the text editor to just contentEditable div and that worked flawlessly, so it shouldn't be because of some css glitch.
Has anyone some idea of what could be causing this?
EDIT Feb 6:
I have found out, that this issue is manifesting only in Chrome, as IE and MS Edge did not encountered this issue. I have tried to switch off all extensions, yet the issue is still there. Private mode also didn't help.
After few days of research I have figured out what is causing the issue.
The combination of Quill and React won't work, because of the way React 'steals' input events, while creating the shadow DOM. Basically, because it tries to process my input in contenteditable div created by Quill, it causes some actions to not fire, resulting in the weird behaviour. And because Quill tries to do it by itself, outside of React DOM.
This I have proved in my simple testing project, where adding a simple input tag anywhere on the page broke down the Quill editor.
Possible solution would be to use react-quill or some other component container, however I haven't managed to make it successfully work, or write some yourself, which would incorporate Quill to React in its DOM compatible way.
I am a bit new to the world of ReactJS but I have been coding in Javascript for a while now. Loving what ReactJS is doing as I was coding in pure JS before using Design Patterns and OOP I consider this a HUGE upgrade for me.
A while ago I started using react-starter-kit from kriasoft.
Also I integrated react-bootstrap to this project to make my life a bit easier.
I followed the tutorial from react-bootstrap and I successfully added Bootstrap.
The problem is now I cannot use the build in <Link /> from react-starter-kit which I liked a lot because of its simplicity and "power".
The official approach from react-bootstrap is to install react-router-bootstrap and replace <Link to="/path"> with <LinkContainer to="/path"> but that means that I have to replace react-routing and universal-route with react-router, and this is something I would like to avoid.
What is the right way to integrate react-bootstrap with react-starter-kit and still be able to use universal-routing? What changes should I make in order to make LinkContainer behave as Link component does?
When using Link component from react-starter-kit a get this kind of error
Warning: validateDOMNesting(...): cannot appear as a descendant of . See Header > NavItem > SafeAnchor > a > ... > Link > a.
Related link for this issue .
(React-Bootstrap link item in a navitem)
The official recommendation from react-bootstrap, and react-router.
(https://github.com/ReactTraining/react-router/issues/83#issuecomment-214794477)
Also as I said I am a bit new to reactJS and there is the possibility I am missing something.
Would be nice if someone could clarify the difference between Link component from react-starter-kit
and Link from react-router.
Thanks in advance
I start using my own NavItem component instead of original:
import React, { PropTypes } from 'react';
import cx from 'classnames';
import Link from '../Link';
class NavItem extends React.Component {
static propTypes = {
className: PropTypes.string,
href: PropTypes.string.isRequired,
active: PropTypes.bool,
disabled: PropTypes.bool,
children: PropTypes.node.isRequired,
onClick: PropTypes.func,
};
static defaultProps = {
active: false,
disabled: false,
};
render() {
const { className, href, active, disabled, children, onClick } = this.props;
return (
<li role="presentation" className={cx(className, { active, disabled })}>
<Link to={href} onClick={onClick}>
{children}
</Link>
</li>
);
}
}
export default NavItem;
This is the approach I follow for now thanks to this post.
How can I change the NativeScript app theme during the app launch using the nativescript-themes plugin?
JS
import application = require("application");
let themes = require("nativescript-themes");
themes.applyTheme('dark-theme.css');
// TODO: Check if user is logged in
application.start({ moduleName: "views/signin/signin" });
This isn't working, and yes, this is TS but the transpiled JS doesn't work.
Actually the proper code is:
import application = require("application");
let themes = require("nativescript-themes");
application.cssFile = themes.getAppliedTheme('dark-theme.css');
application.start({ moduleName: "views/signin/signin" });
The theming system replaces the currently running "app.css"; so you no longer are using the default "app.css". If you need app.css still; then you just import into your theme.css files using the #import statement.
Please note; the 'dark-theme.css' that you are using in getAppliedTheme('dark-theme.css') is the default theme, if the theme has been changed/chosen by the user in the app and the app is starting up again, then it will use the actual chosen theme, not the default theme. ;-)
You can change the theme using the *
import { Theme } from "#nativescript/theme";
#Component({
selector: 'ns-app',
templateUrl: 'app.component.html',
})
export class AppComponent implements OnInit {
constructor() {}
ngOnInit(): void {
Theme.setMode(Theme.Light);
}
}
plugin then make changes in the main app.component.ts file as per the below code.
You can also change the mode by putting conditions in the ngOnInit lifecycle.