Looking into mentions and what i’m wanting is a bit like what’s seen in a mix of twitter, discord and this forum
Essentially *Italic* **Bold** ***Bold and Italic*** along with what discord and twitter have which is when using an @ mention It becomes a nice colour even when creating the tweet to clearly show it is in a mention format.
I know there is tons of WYSIWYG editors but not sure any of them have these exact features?
I found one for react but it is a good example of the kind of editor I am looking for mainly the Markdown preview and Mentions:
Hi @Sorry_Duh u can do that with simple javascript, here you have an example i made:
<!DOCTYPE html>
<html>
<head>
<title>Text Field with Bold Formatting</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Enter your text:</h2>
<div class="form-group">
<input type="text" class="form-control" id="myInput" placeholder="Type here">
</div>
<h3>Result:</h3>
<p id="result"></p>
</div>
<script>
document.getElementById('myInput').addEventListener('input', function() {
var inputText = this.value;
var formattedText = inputText.replace(/\*\*\*(.*?)\*\*\*/g, '<strong><em>$1</em></strong>'); // Bold and Italic
formattedText = formattedText.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>'); // Bold
formattedText = formattedText.replace(/\*(.*?)\*/g, '<em>$1</em>'); // Italic
document.getElementById('result').innerHTML = formattedText;
});
</script>
</body>
</html>
Thanks for the suggestion but this is not quite what i’m after I want the markdown and mentions etc to be visually updated in the area you type same way Twitter, Discord etc process this.
Twitter when typing you use @mention and while you are typing that mention becomes blue in the same place you are already typing, the markdown is the same Discord is a good example of that along with mentions (I believe Discord actually use this one).
Oh sorry, ok then i think u can use the EasyMDE library and there are some examples in the community about the mentions or u can implement Mention.js
Here u have an example i tested some time ago with EasyMDE:
<!DOCTYPE html>
<html>
<head>
<title>Rich Text Field</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde@2.8.0/dist/easymde.min.css">
</head>
<body>
<div class="container">
<h2>Enter your text:</h2>
<textarea id="myInput"></textarea>
</div>
<script src="https://cdn.jsdelivr.net/npm/easymde@2.8.0/dist/easymde.min.js"></script>
<script>
var easyMDE = new EasyMDE({
element: document.getElementById('myInput'),
renderingConfig: {
singleLineBreaks: false,
codeSyntaxHighlighting: false,
},
});
</script>
</body>
</html>
Thanks for the suggestion this one seems very buggy even on their example things like **test* are becoming bold when it should be wrapped like **test** seems finding a good one might be quite a challenge most of the ones that seem to be good are react based
Yes, I had that example saved that I tried a long time ago. That’s version 2.08 and I just checked and they’re already on version 2.18 so maybe you should try if its working better now.
btw u can hide the toolbar using
<style>
.editor-toolbar {
display: none;
}
</style>
Unfortunately not still seems very broken and is placing content in the wrong places shame there aren’t many options for editors
Well, it’s working fine for me, even using the old version. Here I leave you a recently recorded video, I did the test in Wappler and also in Chrome. Did you try the code I gave you on a blank page?
Grabación de pantalla 2023-07-05 a la(s) 23.00.53
This is transforming text before you finish the syntax, the words become bold italic etc before it’s fully wrapped
Well if you need that level of precision you should use https://ckeditor.com/
Grabación de pantalla 2023-07-05 a la(s) 23.39.17
Have you ever used this one in Wappler? I’m trying to add mentions but the imports are ES6 so they won’t work in Wappler:
import { Mention } from '@ckeditor/ckeditor5-mention';
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ Mention, /* ... */ ],
mention: {
// Configuration.
// ...
}
} )
.then( /* ... */ )
.catch( /* ... */ );
There is a full version CDN but then you have to remove tons of plugins instead of just use ones you need which might take longer to load etc