Community
    • Login

    Plugin to add HTML toolbar (like in EditPlus)?

    Scheduled Pinned Locked Moved Help wanted · · · – – – · · ·
    3 Posts 3 Posters 2.9k Views
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Bence KovácsB
      Bence Kovács
      last edited by

      Is there a plugin to add HTML toolbar (like in EditPlus)?
      I would like to have toolbar buttons for formatting (B, I, U), adding basic elements (br, nbsp, img, a) and a color picker. These are the buttons I used in EditPlus, but now I’d like to switch to a free editor.

      Meta ChuhM 1 Reply Last reply Reply Quote 1
      • PeterJonesP
        PeterJones
        last edited by

        Seems like a reasonable plugin to want. I don’t know of such a plugin, though you might investigate “HTML Tag” – if it doesn’t have that feature, you might be able to ask at https://fossil.2of4.net/npp_htmltag/ for that feature to be added. I don’t know how long that might take.

        Alternately, if you have PythonScript plugin, you could do something like I’ve done for automating markdown: make a script for each type of tag that you’d like to insert around highlighted text, and then use the right-click context menu, or keyboard shortcuts, to insert those.

        For the scripts, they all look like:

        #https://notepad-plus-plus.org/community/topic/10957/looking-for-markdown-plugin
        #https://daringfireball.net/projects/markdown/syntax#em
        for i in range(editor.getSelections()):
            start = editor.getSelectionNStart(i)
            end = editor.getSelectionNEnd(i)
            word = editor.getTextRange(start,end)
            editor.setTarget(start, end)
            editor.replaceTarget('**{0}**'.format(word))
        

        Which is putting the ** before and after the highlighted text. So for you, you would just use

            editor.replaceTarget('<b>{0}</b>'.format(word))
        

        … to make the highlighted text bold. If nothing is highlighted, it will just put in the empty <b></b> tag pair.

        If I were doing this for you, I would create a subdirectory of %AppData%\plugins\config\PythonScript\ called HtmlActions or something, then create a separate script (as above) for each of the tags (bold, italic, underline, img, link, …), and edit all of those scripts like above.

        To make them available for keyboard shortcuts or RClick context menu, you would first need to go to Plugins > PythonScript > Configuration … and add them to the “Menu Items” list, hit OK, and restart NPP. To make them available for Toolbar icons, ADD them to the “Toolbar Icons” list in the same dialog.

        To add to context menu, use something similar to what I have in %AppData%\Notepad++\contextMenu.xml:

            <Item FolderName="Markdown commands" PluginEntryName="Python Script" PluginCommandItemName="MarkBold"           ItemNameAs="Mark Selection as Bold"           />
            <Item FolderName="Markdown commands" PluginEntryName="Python Script" PluginCommandItemName="MarkEm"             ItemNameAs="Mark Selection as Emphasis"       />
            <Item FolderName="Markdown commands" PluginEntryName="Python Script" PluginCommandItemName="MarkCodeInline"     ItemNameAs="Mark Selection as Inline-Code"    />
            <Item FolderName="Markdown commands" PluginEntryName="Python Script" PluginCommandItemName="MarkKbd"            ItemNameAs="Mark Selection as Keyboard"       />
            <Item FolderName="Markdown commands" PluginEntryName="Python Script" PluginCommandItemName="MarkLinkInlineURL"  ItemNameAs="Mark Selection as URL of Inline-Link"   />
            <Item FolderName="Markdown commands" PluginEntryName="Python Script" PluginCommandItemName="MarkLinkInlineText" ItemNameAs="Mark Selection as Text of Inline-Link"  />
            <Item FolderName="Markdown commands" id="0"/><!-- divider INSIDE submenu -->
            <Item FolderName="Markdown commands" PluginEntryName="Python Script" PluginCommandItemName="Markdown"           ItemNameAs="Convert Markdown to HTML"         />
        

        To add a shortcut command, go to Settings > Shortcut Mapper > Plugin Commands; if you’ve got a new enough NPP version, you can type “python” in the Filter box, otherwise, just scroll down to the “PythonScript” section; select the script you want to set the shortcut for, and Modify.

        To add the icon, all you need to do is ADD it to the list, above. You can also set a different icon for each script; see the PythonScript documentation.

        1 Reply Last reply Reply Quote 1
        • Meta ChuhM
          Meta Chuh moderator @Bence Kovács
          last edited by Meta Chuh

          welcome to the notepad++ community, @Bence-Kovács

          i’ve just found one plugin that might do what html toolbar does.
          it’s called webedit, it’s fully customisable, and has a customizable toolbar with customizable icons as well.

          but it only is available for notepad++ 32 bit as far as i can see.

          you can download it here:
          https://sourceforge.net/projects/npp-plugins/files/WebEdit/WebEdit 2.1/

          and here’s a screenshot of the menu and the toolbar:
          Imgur

          i’ve found this easy guide to get you started, if you want to try it out:
          http://devarticles.in/miscelleneous/how-to-add-html-tag-keyboard-and-toolbar-shortcuts-to-notepad-2/

          1 Reply Last reply Reply Quote 1
          • First post
            Last post
          The Community of users of the Notepad++ text editor.
          Powered by NodeBB | Contributors