I have a personal blog and I will create the session where I create the posts, I wanted to know if there is any plugin or tool that does not depend on any server side language where I create the post, using those styling buttons as in word and it I get the html return so I just save it in the bank.
Does anyone know of any?
I've already used this plugin, maybe it helps link
You are looking for a text editor WYSIWYG , there are several editor recommendations in several different languages and formatting, I recommend that you search for html wysiwyg no google and compare all the tools available to discuss which one is best for your needs.
But for an example of a tool I'll give you the tinymce , as well as being easy to install it is completely customizable.
In the example below you can see how to use basic mode:
<!-- Place inside the <head> of your HTML -->
<script type="text/javascript" src="<your installation path>/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: "textarea"
});
</script>
<!-- Place this in the body of the page content -->
<form method="post">
<textarea></textarea>
</form>
The code above returns a editor
We can also see all the full mode options, where you can customize all the editor buttons and buttons:
<!-- Place inside the <head> of your HTML -->
<script type="text/javascript" src="<your installation path>/tinymce/tinymce.min.js"></script>
<script>
tinymce.init({
selector: "textarea#elm1",
theme: "modern",
width: 300,
height: 300,
plugins: [
"advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
"save table contextmenu directionality emoticons template paste textcolor"
],
content_css: "css/content.css",
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l ink image | print preview media fullpage | forecolor backcolor emoticons",
style_formats: [
{title: 'Bold text', inline: 'b'},
{title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
{title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
{title: 'Example 1', inline: 'span', classes: 'example1'},
{title: 'Example 2', inline: 'span', classes: 'example2'},
{title: 'Table styles'},
{title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
]
});
</script>
<!-- place in body of your html document -->
<textarea id="elm1" name="area"></textarea>
The code above returns a editor
It also enables you to enable inline editing by editing directly in the content, without going to the page editing screen:
<script type="text/javascript" src="<your installation path>/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: "h1.editable",
inline: true,
toolbar: "undo redo",
menubar: false
});
tinymce.init({
selector: "div.editable",
inline: true,
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});
</script>
<h1 class="editable">Editable header</h1>
<div class="editable" style="width:100%; height:550px">
This is an editable div element element.
</div>
The code above returns a editor
An interesting alternative that runs away from the WYSIWYG editors would be Stackedit.io
You create and save documents locally in the browser with live preview , HTML support, Markdown a> and Github Flavored Markdown , synchronized backup with Google Drive and Dropbox, and automated posting of the document written on Blogger, Dropbox, Gist, Github, Google Drive, SSH Server, Tumblr and WordPress.
Customizable, with keyboard shortcuts, templating and features extensible .
Worth checking out