UEditor百度文本编辑器的使用

717 阅读1分钟

UEditor的使用

官方文档 更多 toolbar设置 www.cnblogs.com/zqifa/p/ued…

1. 设置html

<div class="ueditorCont">
  <!-- 加载编辑器的容器 -->
  <script id="ueditorContInfo" class="ueditorContInfo" name="content" type="text/plain"></script>
</div>

2. 引入js文件

<!-- 编辑器配置文件 -->
<script type="text/javascript" src="/template/web/skin/hyb/ueditor-php/ueditor.config.js"></script>
<script type="text/javascript" src="/template/web/skin/hyb/ueditor-php/ueditor.all.js"></script>

//如果是crm
<script type="text/javascript" src="/hccrm/skin/general/lib/ueditor/ueditor.config.min.js"></script>
<script type="text/javascript" src="/hccrm/skin/general/lib/ueditor/ueditor.all.min.js"></script>

3. 初始化编辑器

      //初始化 提问 编辑器 弹出框
      $.common.ue_containerTiWen = UE.getEditor('containerTiwenZhuiWenFaTie', {
        toolbars: [
          ['undo', 'redo', '|',
            'bold', 'italic', 'underline', 'fontborder', '|',
            'selectall', 'cleardoc', '|',
            'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',
            'simpleupload', 'insertimage', 'emotion']
        ],
        autoHeightEnabled: false, //自定义高度
        elementPathEnabled: false, //底部元素路径不显示
      });

4. 设置编辑器的内容为空

  //初始化值为空
      var curUE = $.common.ue_containerTiWen;
      curUE.ready(function () {
        //设置编辑器的内容
        curUE.setContent('');
      });

5. 获取编辑器的内容

 var curUE = $.common.ue_containerTiWen;
      curUE.ready(function () {
        content = $.trim(curUE.getContent());
      });