Plugins or tools to create blog posts?

Asked

Viewed 204 times

-1

Guys I have a personal blog and I will create the session where I create the posts, I wonder if you have 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 returns me the html so I only save in the database.

Does anyone know any?

javascript jquery html webdesign

3 answers

3

2

You are looking for a text editor WYSIWYG, there are several recommendations from editors, in various languages and different formatting, I recommend that you search for html wysiwyg in the and compare all available tools to Mark which one fits your need best.

But if you want an example of a tool I will indicate the , as well as being easy to install it is completely customizable.

In the example below you can see how to use the mode basic:

<!-- 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 above code returns an editor thus

We can also see all options of the mode full, where you can customize all the browser and editor 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 above code returns an editor thus

Also enables you to enable editing inline, editing directly into the content, without having to go to the page’s edit 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 above code returns an editor thus

1

An interesting alternative that runs away from the sameness of the WYSIWYG editors would be the Stackedit.io

You create and save documents locally, in the browser, with live preview, HTML support, Markdown and Github Flavored Markdown, synchronised backup with Google Drive and Dropbox and automated document posting written in Blogger, Dropbox, Gist, Github, Google Drive, SSH Server, Tumblr and Wordpress.

Customizable, with keyboard shortcuts, templating basic and functionalities extensible.

Worth checking out

Browser other questions tagged javascript jquery html webdesign

You are not signed in. Login or sign up in order to post.