Wysiwyg Guide!

Posted by HusetAnubis on Oct 16, 2014; 3:51pm
URL: https://support.nabble.com/Wysiwyg-Guide-tp7592003.html

Do you want a, "What You see is what you get" editor?

I'm gonna guide you my way to get this on your own forum.
First of, copy this code:

---

<override_macro name="textarea" requires="field" parameters="wrap,tabindex,style,maxlength">
    <div id="message_editor" style="width:100%;margin: 10px 0 20px;">
        <textarea name="[n.name/]" id="edit" wrap="[n.wrap/]" maxlength="[n.maxlength/]" tabindex="[n.tabindex/]"
        style="[n.style/]"><n.hide_null.value/></textarea>
        
        <script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
       <script type="text/javascript">bkLib.onDomLoaded(function() {
                  nicEditors.allTextAreas({fullPanel : true})
           });</script>
    </div>
</override_macro>

---

Then go to your NAML on you nabble forum, and navigate to "advanced editor", and hit "Add New File". Name it to "textarea" And paste the code insade, hit save, and you done. Easy right

If you want to have the HTML button checked, copy this code:

---

<macro name="checkbox2" parameters="style" requires="field">
    <input id="[n.name/]" type="checkbox" name="[n.name/]" value="[n.true/]" checked="true" style="[n.style/]"/>
</macro>

---

And go to the NAML "advanced editor" again, and creat new, name it "checkbox2". and then you want to copy this code:

---

 <override_macro name="message_control" requires="node_page">
    <div class="field-box light-border-color">
        <div class="second-font field-title"><t>Message</t></div>
        <div class="weak-color">
            <n.if.visitor.is_registered>
                <then>
                    <n.html_format_field.checkbox2/>
                    <label for="[n.html_format_field.name/]"><t>Message is in HTML Format</t></label><br/>
                    <div style="margin:.1em 0">
                        <n.editor_toolbar
                            textarea_id="[n.message_field.name/]"
                            original_text="[n.if.page_node.is_post][then.page_node.message_quoted/][/n.if.page_node.is_post]"
                        />
                    </div>
                </then>
            </n.if.visitor.is_registered>
            <n.message_field.textarea wrap="SOFT" tabindex="2" style="min-width:30em;max-width:55em;width:100%;height:20em;" />
            <n.new_post_extra_fields/>
        </div>
    </div>
</override_macro> 

---

Again, hit new, name it "message_control" this time, and paste the code. Save! now it should work fine i think

To delite the old editor, (It doesn't work anymore), go to the NAML "advanced editor", hit new, and name it "editor_toolbar", and paste the code below: (and save when you done!)

---

<override_macro name="editor_toolbar" parameters="textarea_id, original_text, node_id">
</override_macro>

---