Search code examples
javascripthtmltextareaeditorwysiwyg

Change textarea to HTML WYSIWYG Raptor Editor

I am trying to embed a HTML WYSIWYG Raptor Editor on a website. On the Raptor site, the directions say to just add the following code:

<script type="text/javascript" src="/javascripts/raptor.min.js"></script>

<div class="raptor-editable">
    <p>
        Raptor may be integrated into a site many ways. 
        This article aims to cover the simplest integration possible.
    </p>
</div>
<script>
    jQuery(function($) {
        $('.raptor-editable').raptor();
    });
</script>

This code is supposed to allow users to edit any element on a page with the editor.

I created a textarea:

<textarea id="editor"></textarea>

When I add the following JavaScript code, the textarea changes size, so I assume the code is doing something, however, I can't get an editor with toolbars and buttons to show up:

<script>
    jQuery(function($) {
        $('#editor').raptor();
    });
</script>

How can I get the editor to show up? Am I doing something wrong?

Solution

  • Turns out I had another CSS file that was conflicting with the Raptor Editor code.

    If you face a similar issue, I would suggest removing or disabling other CSS and JS dependencies to see if a different file has code that is overriding the Raptor code.