CODEWITHSUNDEEP
javascripthtmltextareaeditorwysiwyg
Tot Zam
Tot Zam

Reputation: 8766

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?

Upvotes: 0

Views: 1675

Answers (2)

Tot Zam
Tot Zam

Reputation: 8766

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.

Upvotes: 0

Lottamus
Lottamus

Reputation: 457

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

All the ".raptor();" does is initialize the element with the raptor api.

You can also pass in an object to .raptor({plugins:[]}) to add raptor plugins (https://www.raptor-editor.com/documentation/tutorials/plugins).

You may also need to add some presets

https://www.raptor-editor.com/demo/presets

Upvotes: 1

Related Questions