Sign in

How to add custom button in WYSIWYG editor?

  • This topic has 3 replies, 2 voices, and was last updated 7 months, 2 weeks ago by .
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #7257
    Avatar photoGasmoN

    Is there any chance to do this? I am working on a scripting website, and I want to add buttons like [commands]list of commands[/commands], etc. Can anyone tell me if this is possible to do?

    #7258
    Avatar photoBob

    Maybe this thread will help you: https://github.com/GetPublii/Publii/issues/1062#issuecomment-1024910095

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

    #7260
    Avatar photoGasmoN

    Okay, I found out from there that this is what I need https://getpublii.com/dev/post-editor-api/#customformats but it simply doesn’t work for me. I might have done something wrong but idk what. Here’s what I’ve done.

    #1 In Documents\Publii\themes\technews i opened config.json file and added this codeĀ https://prnt.sc/8hi2dJEPlr9h

    #2 After I saved config.json file, I opened my theme’s root directory (Documents\Publii\themes\technews) and created the following two files: tinymce.override.json and customElements.json

    #3 The content of tinymce.override.json:

    {
       "toolbar2": "customElements nonbreaking styleselect formatselect searchreplace hr readmore removeformat undo redo restoredraft sourcecode ",
       "plugins": "nonbreaking advlist autolink autosave link image lists hr pagebreak searchreplace media table paste autoresize emoticons textpattern toc"
    }

    #4 The content of customElements.json:

    "customElements": [
        {
            "label": "Cvars",
            "cssClasses": "msg msg--cvars",
            "selector": "p"
            "postEditor": true,
            "themeSettings": true		
        },
        {
            "label": "Commands",
            "cssClasses": "msg msg--cmds",
            "selector": "p"
            "postEditor": true,
            "themeSettings": false			
        },
        {
            "label": "Warning",
            "cssClasses": "msg msg--warning",
            "selector": "p"
            "postEditor": true,
            "themeSettings": false			
        }
    ] 
    
    

    #5 I also added CSS classes for those formats in Documents\Publii\themes\technews\assets\css\editor.css file.

    And I still don’t have new custom formats added in my editor when writing the post. Where did I made a mistake?

    #7265
    Avatar photoGasmoN

    FIXED
    I only had to open my theme’s config.json file, find “customElements” field and add new codes.
    The problem was that I was doing that inside Documents\Publii\themes\technews insted inĀ  Publii\sites\*sitename*\input\themes\technews directory

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.