How To Use Ckeditor Markup Editor In The Comment Section

image

This blog post is to give a simple guide on how to use the markup text editor in Algorithmic Year's comment section. It entails every understanding you need to know about the editor and how to use it smoothly.

It will also guide you on how to share codes in the comment section to help make the discussion much easier and more convenient.

CKEditor is a WYSIWYG text editor that provides a wide range of toolbar options for formatting and editing content. The following is a list of some of the common toolbar objects in CKEditor and their functions:

  • Source: This button allows you to switch between the WYSIWYG view and the HTML source code view of the document. Eg: This message was inserted using HTML bold element. Practically, the toolbar already allows you to add some text styles so no need to use them. But can be necessary when you want to view how your content will be presented.
  • Undo/Redo: These buttons allow you to undo and redo actions, respectively.
  • Cut, Copy, Paste: These buttons allow you to cut, copy, and paste content within the editor or from outside sources.
  • Bold, Italic, Underline: These buttons allow you to format text as bold, italic, or underlined, respectively.
  • Numbered List, and Bulleted List: These buttons allow you to create ordered and unordered lists, respectively.
  • Outdent, Indent: These buttons allow you to decrease and increase the indentation of a list item or paragraph.
  • Justify Left, Center, Right, Justify: These buttons allow you to align text to the centre, right, or full width of the editor, respectively.

  • Link, Unlink: These buttons allow you to add or remove links from the text.

  •  Image: This button allows you to insert images into the document. Before posting, make sure you set the image width and height to 100% or any reasonable size you a good view. Note that the editor does not support uploading from storage!

 

  • Table: This button allows you to insert tables into the document.
  • 1 Select table from the tool bar and set width to 100%
    2 Select the number of columns and rows you need.
    3 Click Ok and insert your content

     

  • Horizontal Rule: This button allows you to insert horizontal lines into the document.

    The above is a horizontal rule...

  • Special Characters: This button allows you to insert special characters into the document.Eg: @§ŒÆ
  • Find and Replace: This button opens a dialogue box that allows you to search for and replace specific text within the document.
  • Spell Checker: This button allows you to check the spelling of the text in the document.
  • Maximize: This button allows you to maximize the editor to full-screen mode.
  • Blockquote: Allows you to add quoted words in your comments

 If you're talking about Java in particular, Python is about the best fit you can get amongst all the other languages. Yet the funny thing is, from a language point of view, JavaScript has a lot in common with Python, but it is sort of a restricted subset. ~ Guido van Rossum(Creator of python)

 

  • Pre-formatted file and Computer Code: Allows you to insert computer codes in the comment section to aid quick response to code help. Access it from the style function on the editor toolbar. You can also access formatted on the Normal tool options. First, write your code in your text editor, copy and paste it into CKEditor markup, highlight the code and select computer code from styles...highlight again and select preformatted from Format tool to enclose it inside our custom CSS... you are now good to go! Eg:
def search(request):
    categories = Category.objects.all()
    tags = Tag.objects.all()
    query = request.POST.get('q', '')
    if query:
        posts = Post.objects.filter(is_published=True).filter(title__icontains=query)
    else:
        posts = []
    return render(request, 'blogpost/searchpage.html', {
        'categories': categories,
        'tags': tags,
        'posts': posts,
        'query': query,
    })

 

These are some of the most common tools to may need to create a well-organized comment post. Let us know in the comment section anything you want to know about the editor.

Feb. 10, 2023
0 147

What other Developers Say

    No comments yet