Comments (14)
I just was doing some more research on this topic and found this editor which appears very powerful and "easyish" to implement.
from sonicjs.
Something like this is definitely in the roadmap. Right now content editing is in place, but pretty basic, ie:
https://demo.sonicjs.com/admin/content/edit/users/488484b6-00df-4d43-b7a2-d554ae654f9a
from sonicjs.
By the way, I'd personally drop the whole admin folder for editing content. It really overly complicates this repo and causes some errors. Admin interfaces are a whole other ballgame. For actually editing the content in the database, I'd just use Retool and set up a resource that connects to the D1 database. It's quite trivial to do. Then this repo should just focus on setting up the backend correctly, i.e. D1 to KV and memory cache, schema set ups. You can even use Retool to upload images to Cloudflare and then that's solved also by jusing saving the SRC url into the D1 database.
from sonicjs.
Yeah, I agree developing a good admin dashboard to edit content is a very difficult thing to do, and not essential to the core functionality of this great little CMS. It would be best to create another repo which would run the admin dashboard that can be used to interact with D1. It is really a separate project.
from sonicjs.
@osseonews I don't disagree but it's been really helpful for me while building the API as we're "eating our own dogfood" plus the visual representation of data is a benefit. I will look into retool and other alternatives at some point as it would be nice to be able to focus on the API framework more exclusively. Thanks for the idea.
from sonicjs.
Yeah, totally understand. I used to be the same way until I discovered Retool a few months back. Now, I don't even bother with frontend admin tools any more. Frees up so much energy and time to focus just on the API stuff.
from sonicjs.
from sonicjs.
Yes, 100%. You only need paid versions , when you have multiple users that require access rights,
from sonicjs.
BTW, I was going to try to set up a Retool connection to D1, but busy on some other stuff now. But, I think the way it would work is that you set up REST API resource to the Cloudflare Worker and then since you already have the API routes set up, it should be trivial to do all the CRUD. And you would have an unbelievable amount of components to work with in Retool.
from sonicjs.
I also like the idea of separating the content editor from the rest of the repo. I coded up a simple Cloudflare pages app using the editor quill.js
You can see the code here
https://github.com/cryptoskillz/sonicjswithquill
and a working demo here
https://sonicjswithquill.pages.dev/b8c26807-6991-4b30-b1ef-a951d6adafc7#
All that would be required from Sonicjs is an edit button next to each row.
Also, if a POST/PUT endpoint was added to the posts API, we could use Sonicjs to fetch and store the data.
from sonicjs.
While I was looking for alternatives for the content editor I found grapejs which sounds really cool and modern. What do you guys think?
from sonicjs.
While I was looking for alternatives for the content editor I found grapejs which sounds really cool and modern. What do you guys think?
GrapeJs is just for editing web page HTML content, so not a good fit for an admin tool. I played with it quite a bit a couple of years ago. Its ok, but far from a great page builder compared to the popular Wordpress page builder plugins like Elementor, etc
from sonicjs.
Yeah, I get from this discussion that GrapeJS and page builder in general would be a separate step on this process. I'm running an experiment with EditorJS somewhat successfully and I'll happy to share the screens after the setup is complete.
from sonicjs.
Found a way to hack this quickly for formio (https://help.form.io/userguide/):
As an example in cms/api/forms.ts
:
function getField(fieldName): Field {
const disabled = fieldName == "id";
const type = getFieldType(fieldName);
return {
type,
key: fieldName,
label: fieldName,
disabled,
autoExpand: type === "textarea",
wysiwyg: type === "textarea",
rows: type === "textarea" ? 3 : undefined,
// placeholder: "Enter your first name.",
// input: true,
// tooltip: "Enter your <strong>First Name</strong>",
// description: "Enter your <strong>First Name</strong>",
};
}
function getFieldType(fieldName) {
switch (fieldName) {
case 'body':
return 'textarea';
break;
}
return fieldName === "password" ? "password" : "textfield";
}
Not sure if this will be overwritten in the future but for now this allows me to define a wyswyg.
from sonicjs.
Related Issues (20)
- Installation Process not clear HOT 2
- How to Secure Admin endpoint? HOT 1
- Bug in server.ts prevents this from running HOT 7
- Await updateD1Data to avoid race conditions HOT 2
- Installation Error: SonicJs Error: Error: D1_ERROR: no such table: users HOT 4
- Installation Error HOT 8
- Fix Bootstrap.js integration issue, breaking the form.io forms
- Admin UI/UX Auth Enhancements
- Integrate with Webstudio.is POC HOT 2
- Add unit tests to cover lucia (authentication - login/registration/tokens/access controls/etc) HOT 1
- Allow schema files to be edited in the browser
- Update Environment Variables Documentation HOT 1
- Support images transformation HOT 5
- Fast? HOT 6
- Migrate D1 in production adjustment
- Convert tests to vitest
- Add support for Cloudflare images
- Hello World example in routing is broken HOT 1
- categoriesToPost example is broken
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 sonicjs.