将文本区域更改为 HTML 所见即所得的 Raptor 编辑器

Question

我正在尝试嵌入一个 HTML 所见即所得 Raptor Editor on a website. On the Raptor site, the directions 说只是添加以下代码：

<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>

此代码应该允许用户使用编辑器编辑页面上的任何元素。

我创建了一个文本区域：

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

当我添加以下 JavaScript 代码时，textarea 改变了大小，所以我假设代码正在做一些事情，但是，我无法显示带有工具栏和按钮的编辑器：

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

如何让编辑出现？我做错了什么吗？

Answer 1

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

所有“.raptor();”做的是用猛禽 api.

初始化元素

你也可以传入一个对象给.raptor({plugins:[]})来添加raptor插件(https://www.raptor-editor.com/documentation/tutorials/plugins).

您可能还需要添加一些预设

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

Answer 2

原来我有另一个 CSS 文件与 Raptor 编辑器代码冲突。

如果您遇到类似的问题，我建议您删除或禁用其他 CSS 和 JS 依赖项，以查看其他文件是否包含覆盖 Raptor 代码的代码。

将文本区域更改为 HTML 所见即所得的 Raptor 编辑器

Change textarea to HTML WYSIWYG Raptor Editor

javascript

html

textarea

editor

wysiwyg