Comments (1)
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
from vvvebjs.
Related Issues (20)
- ComponentSectionContent Error after the video element update HOT 5
- Db error: "Access denied for user 'root'@'localhost' (using password: NO)" Error code: "1045" HOT 1
- Media Manager files from S3 HOT 3
- Project improvements and doubts - invitation HOT 1
- Add NewPage Error?
- adding my own custom components HOT 1
- how to add text input to right area HOT 2
- PayloadTooLargeError: request entity too large HOT 1
- The model `text-davinci-003` has been deprecated HOT 1
- Adding a component using PHP and dynamically changing its attributes from the database HOT 1
- VvebJS Use Case Audit HOT 3
- Some bugs HOT 4
- Designer mode HOT 1
- Localhost XAMP HOT 7
- Vulnerabilities [VvvebJs] HOT 2
- VvvebJs 1.7.4 has a reflective XSS vulnerability HOT 2
- VvvebJs 1.7.4 has an arbitrary file upload vulnerability HOT 2
- docker-compose error HOT 1
- Can't update image or svg icon if I select element in second time HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vvvebjs.