How do I surround selected text with arbitrary HTML in FCKEditor?

Posted on 2009-04-15
Last Modified: 2012-05-07
I'm using FCKEditor in a web application.  I'm creating custom plugins which allow users to select from a list of drop downs and apply standard formatting to the selected text.
I can easily apply divs and such using ApplyStyle, what I haven't been able to figure out is how I surround the selected text with something like the following.
Selected Text would be here
I can do the fieldset and the div by using ApplyStyle multiple times, what I haven't figured out is how to add the Legend.
Question by:dguillen
    1 Comment
    LVL 1

    Accepted Solution

    I found an answer in an obscure post.

    // get HTML from selection
    function getSelectionHTML(selection) {
        var range = (document.all ? selection.createRange() : selection.getRangeAt(selection.rangeCount - 1).cloneRange());

        if (document.all) {
            return range.htmlText;
        else {
            var clonedSelection = range.cloneContents();
            var div = document.createElement('div');
            return div.innerHTML;

    its used by doing the following

                var selection = "";

                if (FCK.EditorDocument.selection != null) {
                    selection = getSelectionHTML(FCK.EditorDocument.selection);
                } else {
                    selection = getSelectionHTMLFCK(EditorWindow.getSelection()); // after this, won't be a string
                    selection = "" + selection; // now a string again

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Suggested Solutions

    Title # Comments Views Activity
    network + 7 57
    Problem to Popup 37 61
    Table append 4 12
    After replacing cell text using JavaScript, text is no longer centered 4 16
    This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
    Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
    In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    20 Experts available now in Live!

    Get 1:1 Help Now