Froala WYSIWYG编辑器未出现在浏览器中

时间:2014-10-18 16:46:34

标签: javascript jquery froala

我遇到的问题是我正在为Froala编辑器正确加载JS和CSS文件, 但出于某种原因,我认为某处是jQuery脚本,它不是采用我的形式并用正确的CSS样式替换它。

以下是我的观点(#blog-editor是我想使用编辑器的地方):

<html>
<head>
    <% include ../partials/head %>
    <script src="/js/froala_editor.min.js"></script>
</head>

<body>

    <header>
        <% include ../partials/header %>
    </header>

    <div class="grid grid-pad">
        <div class="col-1-1">
            <h1>Blog Create</h1>


            <form action="/admin/posts/create" method="POST">
                Title: <input type="text" name="title"><br>
                Author: 
                    <select name="author">
                        <option value="Author">Connor Phillips</option>
                    </select><br>
                Category: 
                    <select name="category">
                        <option value="Analytics/SEO/SEM">Analytics/SEO/SEM</option>
                        <option value="Advice">Advice</option>
                        <option value="Programming">Programming</option>
                        <option value="Thoughts">Thoughts</option>
                    </select><br>
                Tagline: <input type="text" maxlength="160" name="tagline"><br>
                Content:<br>
                <textarea name="content" id="blog-editor" rows="10" cols="80">

                </textarea><br>
                Tags: <input type="text" name="tags"><br>
                <input type="submit" value="Submit">
            </form>
        </div>
    </div>

    <script>
    $(function() {
        $('#blog-editor').editable()
    });
</script>

    <footer>
        <% include ../partials/footer %>
    </footer>

</body>
</html>

1 个答案:

答案 0 :(得分:0)

您正在初始化内联编辑器而不是基本编辑器,这就是您没有看到任何内容的原因。您应该使用$('#blog-editor').editable({inlineMode: false}).