Comments (1)
I tried the below. My tests worked in the console, but I'm still not seeing it work in Ckeditor5 Source Editing Mode.
init() {
const editor = this.editor;
editor.on('ready', () => {
const SourceEditing = editor.plugins.get('SourceEditing');
console.log(SourceEditing);
if(SourceEditing) {
console.log('SourceEditing plugin found!');
SourceEditing.formatHtml = (input) => {
console.log('Custom html format found!');
// const elementNamesToFormat = 'div|p|span|a|img';
const elementsToFormat = [
{ name: 'address', isVoid: false },
{ name: 'article', isVoid: false },
{ name: 'aside', isVoid: false },
{ name: 'blockquote', isVoid: false },
{ name: 'details', isVoid: false },
{ name: 'dialog', isVoid: false },
{ name: 'dd', isVoid: false },
{ name: 'div', isVoid: false },
{ name: 'dl', isVoid: false },
{ name: 'dt', isVoid: false },
{ name: 'fieldset', isVoid: false },
{ name: 'figcaption', isVoid: false },
{ name: 'figure', isVoid: false },
{ name: 'footer', isVoid: false },
{ name: 'form', isVoid: false },
{ name: 'h1', isVoid: false },
{ name: 'h2', isVoid: false },
{ name: 'h3', isVoid: false },
{ name: 'h4', isVoid: false },
{ name: 'h5', isVoid: false },
{ name: 'h6', isVoid: false },
{ name: 'header', isVoid: false },
{ name: 'hgroup', isVoid: false },
{ name: 'hr', isVoid: false },
{ name: 'li', isVoid: false },
{ name: 'main', isVoid: false },
{ name: 'nav', isVoid: false },
{ name: 'ol', isVoid: false },
{ name: 'p', isVoid: false },
{ name: 'section', isVoid: false },
{ name: 'table', isVoid: false },
{ name: 'tbody', isVoid: false },
{ name: 'td', isVoid: false },
{ name: 'th', isVoid: false },
{ name: 'thead', isVoid: false },
{ name: 'tr', isVoid: false },
{ name: 'ul', isVoid: false }
];
const elementNamesToFormat = elementsToFormat.map(element => element.name).join('|');
const formatted = input.replace(/\n\s*/g, '').replace(/\s{2,}/g, '');
return formatted.replace(new RegExp(`</?(${elementNamesToFormat})( .*?)?>`, 'g'), '$&');
};
const testString = 'Hello\nWorld!\nThis\nis\nmy\nstring';
console.log('Before formatting:', testString);
const formatted = SourceEditing.formatHtml(testString);
console.log('After formatting:', formatted);
} else {
console.log('SourceEditing plugin not found');
}
});
}
from ckeditor5.
Related Issues (20)
- Consider moving the cell properties menu to the main table properies menu
- Automatic text transformation TS typings are inconsistent with documentation
- The WProofreader SDK Cloud simply does not work the same in different browsers
- How to edit only parts of the html and each part will have ckeditor/toolbar?
- CKEditor displays the code (Insert code block) in one line. HOT 1
- Set image width manually via numeric input field
- Docs issue report from "installation/integrations/react/react.html"
- How to trigger mention suggestion list without white space HOT 2
- Content extending past the margin in Word gets cut short when pasting it into the editor
- htmlSupport does not work HOT 1
- i want to embed twitter, and the link started with x.com
- [Docs] Update filenames in browser builds
- Table caption is not accessible via keyboard navigation HOT 1
- Add insert image integration for menu bar
- Crash Course: Instructions to use CKEditorInspector. It fails to import
- Issue in upgrade CkEditor 5 version to latest one
- Source Editing is not working in Inline Editor HOT 1
- How can I add interactive Html Tags like Button, Input feild inside the Ckeditor5 Content in Angular 17
- CKEditor5 rendering is stripping nested HTML content, providing data loss for user HOT 1
- Docs issue report from "features/converters/import-word/import-word.html"
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 ckeditor5.