How to use Gists code snippet feature in ckEditor?

Question

To create the blog post, I have text editor (ckEditor) as below.

Code:

<h:form>

        <p:growl id="growl" showDetail="true" />

        <pe:ckEditor id="editor" value="#{EditorController.content}"
            interfaceColor="#{EditorController.color}" checkDirtyInterval="0">
            <p:ajax event="save" listener="#{EditorController.saveListener}"
                update="growl" />
        </pe:ckEditor>

        <p:commandButton action="#{EditorController.changeColor}"
            update="editor" value="Change color with AJAX"
            style="margin-top:10px;" />

    </h:form>

I saved this content as String in backing bean as below:

private String content;
public void saveListener() {

content = content.replaceAll("\\r|\\n", "");
}

Outputted screen as below:

Code:

<h:body>
        Hello World Result!

    <br />

    <h:outputText id="outformat" value="#{EditorController.content}" escape="false" />

</h:body>

But I expected to see gists code snippet in this line "<script src="https://gist.github.com/YeWin/f906ab9eb22a1af06a8c4549cafc9a33.js?file=helloworld.java"></script>"

Like below:

The question is how can I add these gists code snippet feature in my JSF Primefaces extension ckEditor.? It's possible or there is something I misunderstand?

Answer 1

1. Click on the Source button.
2. Then paste the HTML code (<script src=... ></script>) in the pop up window.
3. Click ok.

For more information, see ckeditor's sourcedialog documentation.