How to use ckeditor4 - 10 common examples

toolbar: [
                ["Bold", "Italic", "Styles"],
                ["Link", "Unlink", "Image"],
            ],
            stylesSet: [
                { name: "Bold", element: "strong", overrides: "b" },
                { name: "Italic", element: "em", overrides: "i" },
                { name: "Code", element: "code" },
                { name: "Subscript", element: "sub" },
                { name: "Superscript", element: "sup" },
            ],
            uiColor: "ffffff",
            language: document.body.dataset.userLocale,
            ...additional_options,
        };
        self.editor = CKEDITOR.inline(field, config);
        self.editor.on("change", function () {
            execution.results = self.editor.getData();
        });
        field.setAttribute("contenteditable", true);
        setupImageUpload(field, execution);
    }

function loadRTE(field, execution) {
        let additional_options = {};
        let instance = CKEDITOR.instances["execution_" + execution.id];
        if (instance) {
            CKEDITOR.remove(instance);
        }

        if (execution.upload_url) {
            additional_options = {
                extraPlugins: "uploadimage",
                uploadUrl: execution.upload_url,
            };
        }
        let config = {
            disableNativeSpellChecker: false,
            toolbar: [
                ["Bold", "Italic", "Styles"],
                ["Link", "Unlink", "Image"],
            ],

function loadRTE(field, execution) {
        let additional_options = {};
        let instance = CKEDITOR.instances["execution_" + execution.id];
        if (instance) {
            CKEDITOR.remove(instance);
        }

        if (execution.upload_url) {
            additional_options = {
                extraPlugins: "uploadimage",
                uploadUrl: execution.upload_url,
            };
        }
        let config = {
            disableNativeSpellChecker: false,
            toolbar: [
                ["Bold", "Italic", "Styles"],
                ["Link", "Unlink", "Image"],
            ],
            stylesSet: [
                { name: "Bold", element: "strong", overrides: "b" },

if (dialog === "link") {
                definition.removeContents("target");
            }

            if (dialog === "image") {
                tab = definition.getContents("Link");
                tab.remove("cmbTarget");
            }
        });

        this.rte.on("instanceReady", function () {
            this.document.getBody().$.contentEditable = true;
            tuleap.mention.init(this.document.getBody().$);
        });

        CKEDITOR.on(
            "instanceCreated",
            function (evt) {
                if (evt.editor === this.rte) {
                    this.options.onLoad();
                }

                if (!this.can_be_resized()) {
                    evt.editor.config.resize_enabled = false;
                }
            }.bind(this)
        );

        CKEDITOR.on(
            "instanceReady",
            function (evt) {
                if (evt.editor !== this.rte) {

createCKEditor() {
            this.editor = CKEDITOR.replace(this.$refs.textarea, this.ckeditor_config);
            this.editor.on("instanceReady", this.onInstanceReady);
        },

/*
             This is done for IE
             If we load the page and the RTE is displayed, IE will not
             catch the instanceCreated event on load (it will catch it later if we change
             the format between Text and HTML). So we have to set this option when loading
             */

        replace_options.toolbar = toolbar;
        if (!this.can_be_resized()) {
            replace_options.resize_enabled = false;
        }

        replace_options = Object.assign(replace_options, {
            ...getUploadImageOptions(this.element),
        });
        this.rte = CKEDITOR.replace(this.element.id, replace_options);
        initiateUploadImage(this.rte, replace_options, this.element);

        /*CKEDITOR filters HTML tags
              So, if your default text is like , this will not be displayed.
              To "fix" this, we escape the textarea content.
              However, we don't need to espace this for non default values.
            */

        if (this.element.readAttribute("data-field-default-value") !== null) {
            var escaped_value = tuleap.escaper.html(this.element.value);
            this.rte.setData(escaped_value);
        }

        CKEDITOR.on("dialogDefinition", function (ev) {
            var tab,
                dialog = ev.data.name,

function initHTMLEditor() {
        editor = CKEDITOR.replace("mail_message", tuleap.ckeditor.config);
    }

* (at your option) any later version.
 *
 * Tuleap is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Tuleap. If not, see .
 *
 */

import CKEDITOR from "ckeditor4";
import tuleap from "tuleap";

CKEDITOR.replace("license-agreement-content", tuleap.ckeditor.config);

[].forEach.call(massmail_project_member_links, function (massmail_project_member_link) {
        massmail_project_member_link.addEventListener("click", function () {
            document.getElementById("massmail-project-members-project-id").value =
                massmail_project_member_link.dataset.projectId;

            var contact_modal = createModal(document.getElementById("massmail-project-members"));
            contact_modal.show();
        });
    });

    var textarea = document.getElementById("massmail-project-members-body");
    if (!textarea) {
        return;
    }

    CKEDITOR.replace(textarea, ckeditor_config);
});

[].forEach.call(ckeditor_selector, function (ckeditor_element) {
        CKEDITOR.replace(ckeditor_element.id, tuleap.ckeditor.config);
    });