javascript - 富文本编辑器显示不正确

标签 javascript html css twitter-bootstrap-3 wysihtml5

我尝试将富文本编辑器插件集成到我的元素中(laravel5.0 和相关的 bootstrap 版本),但视觉呈现效果不佳......它显示了一些白色的按钮。

CSS 包含

   <link href="{{ asset('/css/app.css') }}" rel="stylesheet">
    <link href="{{ asset('/css/css.css') }}" rel="stylesheet">
    <link href="{{ asset('/css/jquery.dataTables.css') }}" rel="stylesheet">
    <link href="{{ asset('/css/bootstrap-wysihtml5.css') }}" rel="stylesheet">

textaera 声明

<textarea class="richtext" name="comment" class="form-control"></textarea>

JS 包含

<script src="{{ asset('/js/jquery-3.3.1.js') }}">`</script>
<script src="{{ asset('/js/wysihtml5-0.3.0.js') }}"></script>
<script src="{{ asset('/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('/js/jquery.dataTables.js') }}"></script>
<script src="{{ asset('/js/bootstrap-wysihtml5.js') }}"></script>
<script>
    $('.richtext').wysihtml5();
</script>

预计 expected result 当前结果 enter image description here

最佳答案

您没有包含所有 js 文件,Js 和 CSS 文件的顺序在每种情况下也很重要。这是我创建的 fiddle ,它工作正常。

您必须在末尾包含另一个 js 文件。

https://bootstrap-wysiwyg.github.io/bootstrap3-wysiwyg/components/handlebars/handlebars.runtime.min.js

Js Fiddle

关于javascript - 富文本编辑器显示不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55587270/

相关文章:

javascript - jQuery .focusout/.click 冲突

javascript - 将 class= 属性添加到已定义的 <svg>

javascript - Dropbox Datastore - 单个表的recordsChanged 监听器?

html - 页脚不是 100% 底部跨浏览器

javascript - 比较包含数组的对象

javascript - body 动画不流畅

jquery - 隐藏字段与本地存储

html - border - 父 div 的 100% 高度

jquery - 如何将 Bootstrap 添加到按钮

css - 元素符号表现得像软连字符