Spediteur: WYSIWYG Editor for SPIP
Posted Sunday 11 January 2026 by Urs Riggenbach.
Since 2018 I’ve integrated several WYSIWYG editors with SPIP, for use in the frontend via the porte-plume / pencil plugin. Today I’m announcing Spediteur, an open source WYSIWYG editor that I plan to release for the SPIP platform.
The previous WYSIWYG implementations I’ve done have been quite useful for my clients and collaborators. As developer I can set up each page in HTML, and hand it over to the client/users who can then tweak the text and make simple changes to the website’s contents themselves, autonomously.
I love SPIP because of its stability, performance and elegant templating language. I like that whenever something is more complicated, I can write real code effectively. And I like that SPIP’s codebase is relatively small, so when I need to do something at a deeper level, I can read through it relatively quickly.
For many projects I have the need to make complex content editable for my clients and collaboraters, without them needing to know HTML. Spediteur allows me to create pages in full HTML in line with a project’s requirements, and then hand it over to the client. The client then sees and can directly edit the final result.
Before, the simple WYSIWYG implementations I’ve used over the years were never perfect, but recently the fact that there is no up to date WYSIWYG editor for SPIP at this point felt like a real limitation both for me and for the SPIP ecosystem. A good project to contribute to open source perhaps? Here we go.
Spediteur
Spediteur is a WYSIWYG editor for SPIP. It allows you to graphically edit your website.
It has the following features:
– Inline editing: Built atop the porte-plume functionality, SPIPedit allows you to edit content directly in the side. No backend, no code: Just edit what you see, as you see it, on the website.
– Full WYSIWYG HTML editing support
– Typographical edits via keyboard shortcut and menu (bold, italics, underline, undo, redo)
– Source view for editing raw html
– Modeles support: SPIPedit highlights inserted modeles, so users know what they can edit, and what’s loaded as modele-component
It aims to have the following features in the future:
– Upload images via SPIP documents
– Improve saved HTML syntax (match as closely as possible to SPIP’s native syntax)
– Bi directional source-graphical view updates (Updates in source view reflect in WYSIWYG view)
– Hotload Modeles when they are added (Adding a modele loads it dynamically into the WYSIWYG view)
– move and copy, paste modeles.
– configure modeles (click on modele area, opens dialog to tweak modele source code, or for img modeles, SPIP document picker/upload
– various improvements based on feedback and edge cases
A quick Demo of Spediteur:
I noticed a project called SPIPedit already exists - I’ve therefore chosen Spediteur as the name of the plugin.
Technical points
When SPIP renders a website, it performs various syntax checks on the content of, say, an article. Users may have placed titles, links, pictures and modeles (SPIP custom elements) into the article. SPIP understands all this and then renders the page’s HTML and the browser displays the page.
Spediteur is adding additional markup around modeles. With this additional markup, the WYSIWYG editor can show which areas are actually editable, and which are custom elements (modeles) that cannot be edited (they can be deleted, moved, or reconfigured, at least that’s the idea, see todo section above).
Using target=”_blank”>Contenteditable, Spediteur is able to show the website 100% as-is, so users can edit the site "live". Squire editor is used under the hood to make the contenteditable experience solid.
On save, the HTML is parsed back into SPIP markup, meaning that the wrapping elements are removed and we have a clean, SPIP compatible output that is saved to the article, and can also be edited as usual in SPIP’s backend.
Next steps
At the moment, I just have a basic implementation that is usable for me, but needs polishing to become an actual SPIP plugin.
I’ll be using that to get feedback from users, to improve the system. Then I plan to package the solution as a SPIP plugin.
To make this possible, some changes may be needed to the SPIP core. I’ll be seeking out input from the community on how to make this possible.
I am interested to make an effort to build compatibility between Spediteur and SPIP’s core syntax and tackle the other todos. An example is that the current implementation adds <p>-tags around paragraphs, so in order to improve SPIP-compatibility, the parser would need to remove these consistently before saving. Newlines are also an issue. The goal would be that the conversion from source to Spediteur and back to source will create changes to the source just where edits are made, and not affect any newlines, etc to keep diffs minimal.
So, stay tuned… 🙂
Questions, feedback? Send me an email!
Since 2018 I’ve integrated several WYSIWYG editors with SPIP, for use in the frontend via the porte-plume / pencil plugin. Today I’m announcing Spediteur, an open source WYSIWYG editor that I plan to release for the SPIP platform.
The previous WYSIWYG implementations I’ve done have been quite useful for my clients and collaborators. As developer I can set up each page in HTML, and hand it over to the client/users who can then tweak the text and make simple changes to the website’s contents themselves, autonomously.
I love SPIP because of its stability, performance and elegant templating language. I like that whenever something is more complicated, I can write real code effectively. And I like that SPIP’s codebase is relatively small, so when I need to do something at a deeper level, I can read through it relatively quickly.
For many projects I have the need to make complex content editable for my clients and collaboraters, without them needing to know HTML. Spediteur allows me to create pages in full HTML in line with a project’s requirements, and then hand it over to the client. The client then sees and can directly edit the final result.
Before, the simple WYSIWYG implementations I’ve used over the years were never perfect, but recently the fact that there is no up to date WYSIWYG editor for SPIP at this point felt like a real limitation both for me and for the SPIP ecosystem. A good project to contribute to open source perhaps? Here we go.
Spediteur
Spediteur is a WYSIWYG editor for SPIP. It allows you to graphically edit your website.
It has the following features:
– Inline editing: Built atop the porte-plume functionality, SPIPedit allows you to edit content directly in the side. No backend, no code: Just edit what you see, as you see it, on the website.
– Full WYSIWYG HTML editing support
– Typographical edits via keyboard shortcut and menu (bold, italics, underline, undo, redo)
– Source view for editing raw html
– Modeles support: SPIPedit highlights inserted modeles, so users know what they can edit, and what’s loaded as modele-component
It aims to have the following features in the future:
– Upload images via SPIP documents
– Improve saved HTML syntax (match as closely as possible to SPIP’s native syntax)
– Bi directional source-graphical view updates (Updates in source view reflect in WYSIWYG view)
– Hotload Modeles when they are added (Adding a modele loads it dynamically into the WYSIWYG view)
– move and copy, paste modeles.
– configure modeles (click on modele area, opens dialog to tweak modele source code, or for img modeles, SPIP document picker/upload
– various improvements based on feedback and edge cases
A quick Demo of Spediteur:
I noticed a project called SPIPedit already exists - I’ve therefore chosen Spediteur as the name of the plugin.
Technical points
When SPIP renders a website, it performs various syntax checks on the content of, say, an article. Users may have placed titles, links, pictures and modeles (SPIP custom elements) into the article. SPIP understands all this and then renders the page’s HTML and the browser displays the page.
Spediteur is adding additional markup around modeles. With this additional markup, the WYSIWYG editor can show which areas are actually editable, and which are custom elements (modeles) that cannot be edited (they can be deleted, moved, or reconfigured, at least that’s the idea, see todo section above).
Using target=”_blank”>Contenteditable, Spediteur is able to show the website 100% as-is, so users can edit the site "live". Squire editor is used under the hood to make the contenteditable experience solid.
On save, the HTML is parsed back into SPIP markup, meaning that the wrapping elements are removed and we have a clean, SPIP compatible output that is saved to the article, and can also be edited as usual in SPIP’s backend.
Next steps
At the moment, I just have a basic implementation that is usable for me, but needs polishing to become an actual SPIP plugin.
I’ll be using that to get feedback from users, to improve the system. Then I plan to package the solution as a SPIP plugin.
To make this possible, some changes may be needed to the SPIP core. I’ll be seeking out input from the community on how to make this possible.
I am interested to make an effort to build compatibility between Spediteur and SPIP’s core syntax and tackle the other todos. An example is that the current implementation adds <p>-tags around paragraphs, so in order to improve SPIP-compatibility, the parser would need to remove these consistently before saving. Newlines are also an issue. The goal would be that the conversion from source to Spediteur and back to source will create changes to the source just where edits are made, and not affect any newlines, etc to keep diffs minimal.
So, stay tuned… 🙂
Questions, feedback? Send me an email!
Also posted on:
https://discuter.spip.net/t/spediteur-a-wysiwyg-editor-for-spip/195751
