We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Hello, I want add new component like code editor, can add anything html & style in this (like ckeditor).
The text was updated successfully, but these errors were encountered:
Hi
Can you please provide more details, do you want to replace the text editor (that shows on element double click) with ckeditor?
There is a plugin to replace the default text editor with ckeditor you only need to download ckeditor and uncomment the plugin code https://github.com/givanz/VvvebJs/blob/master/editor.html#L1668-L1675
If you want to have a component that adds ckeditor to the page you can use something like
Vvveb.Components.extend("_base", "widgets/ckeditor", { name: "Ckeditor", attributes: ["data-component-ckeditor"], image: "icons/code.svg", dragHtml: '<img src="' + Vvveb.baseUrl + 'icons/code.svg">', html: `<div data-component-ckeditor> <div class="ckeditor">This is some sample content.</div> </div>`, afterDrop: function (node) { //check if ckeditor is included and if not add it after component drop let body = Vvveb.Builder.frameBody; if ($("#ckeditor-script", body).length == 0) { $(body).append('<script id="ckeditor-script" src="https://cdn.ckeditor.com/ckeditor5/39.0.2/classic/ckeditor.js"></script>'); $(body).append(`<script> ClassicEditor .create( document.querySelector( '.ckeditor' ) ) .then( editor => { console.log( editor ); } ) .catch( error => { console.error( error ); } ); </script>`); } return node; }, properties: [] });
You will also need to add the component to a group to be visible in the list
https://github.com/givanz/VvvebJs/blob/master/libs/builder/components-widgets.js#L19
Vvveb.ComponentsGroup['Widgets'] = ["widgets/googlemaps", "widgets/ckeditor"];
You might also want to make the element not editable to allow select by adding
[data-component-ckeditor]
to the non editable components list in
https://github.com/givanz/VvvebJs/blob/master/scss/vvvebjs-editor-helpers.scss#L69
Sorry, something went wrong.
No branches or pull requests
Hello, I want add new component like code editor, can add anything html & style in this (like ckeditor).
The text was updated successfully, but these errors were encountered: