文章模块——文章添加百度富文本编辑器

1.下载百度富文本编辑器

  • 下载地址
      http://ueditor.baidu.com/website/download.html

2.把下载包移动到指定位置

      将下载的ueditor文件夹移动到public文件夹下

3.在指定位置使用百度富文本编辑器

  • 在文章添加页面输入内容处引用
            <div class="layui-form-item">
                <label for="L_art_tag" class="layui-form-label">
                    <span class="x-red">*</span>内容
                </label>
                <div class="layui-input-block">
                 //需要加载百度富文本编辑器的地方
                </div>
             </div>
  • 定义加载百度富文本编辑器的容器
           <!-- 加载编辑器的容器 -->
           <script id="container" style="height: 500px;" name="content" type="text/plain"></script>
  • 引入百度富文本编辑器需要使用的js
           <!-- 配置文件 -->
           <script type="text/javascript" src="/ueditor/ueditor.config.js"></script>
           <!-- 编辑器源码文件 -->
           <script type="text/javascript" src="/ueditor/ueditor.all.js"></script>
           <!-- 引入语言包 -->
           <script type="text/javascript" charset="utf-8" src="/ueditor/lang/zh-cn/zh-cn.js"></script>
  • 实例化编辑器
           <!-- 实例化编辑器 -->
           <script type="text/javascript">
              var ue = UE.getEditor('container');
           </script>
posted @ 2020-12-16 21:11  shengge  阅读(160)  评论(0)    收藏  举报