UEditor富文本自动追加p标签 br标签 总是出现 自动换行 p br标签 解决办法

来迟的分割线 20230415  直接引入搞里头

百度编辑器 https://www.aliyundrive.com/s/yR46LpW39jE 点击链接保存,或者复制本段内容,打开「阿里云盘」APP ,无需下载极速在线查看,视频原画倍速播放。

后台封装方法


//百度富文本编辑器
if (!function_exists('baidu_ueditor')) {
    function baidu_ueditor()
    {
        echo '<script src="/static/component/ueditor1433/ueditor.config.js" type="text/javascript"></script>
    <script src="/static/component/ueditor1433/ueditor.all.js" type="text/javascript"></script>
    <script src="/static/component/ueditor1433/lang/zh-cn/zh-cn.js" type="text/javascript"></script>
    <script>UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
        UE.Editor.prototype.getActionUrl = function (action) {
            if (action == "uploadimage") {
                return "/admin.php/index/baidu_ueditor_upload";
            } else {
                return this._bkGetActionUrl.call(this, action);
            }
        }</script>';
    }
}

前端使用

<?php baidu_ueditor(); ?>
<script>

    UE.getEditor('disclaimer');
    UE.getEditor('about_me');
</script>

图片上传接口

use app\common\util\Upload as Up;

class Index extends Base
{
    // 百度富文本编辑器上传
    public function baidu_ueditor_upload()
    {
        $param = $this->request->post();
        if (empty($param['type'])) {
            $param['type'] = 'image';
        }
        try {
            $res = Up::putFile(Request::file(), $param['type'], $param['path'] ?? '');
            $url = $res['data']['src'] ?? $res['data']['thumb'] ?? "";
            $return = array(
                'state' => 'SUCCESS',
                'code' => 0,
                'url' => $url,
                'data' => array('src' => $url));
            exit(json_encode($return));
        } catch (\ErrorException $e) {
            $return = array(
                'state' => 'ERROR',
                'code' => 1
            );
            exit(json_encode($return));
        }
    }
}

系统上传建议手搓


更新::

发现自己的这些问题没有解决

转载:http://www.bomiw.com/news/useknowledge-377.html

以下是内容


UEditor是百度研发的一个很好的文本编辑器,但是在使用过程中,默认的是每次都会自动追加p标签。但是在很多情况下,我并不需要这p标签,为此很闹心。那有没有什么办法消除这自动添加的p标签呢?


方法如下:

首先:打开ueditor.all.js(或ueditor.all.min.js)。

1、搜索修改成false:allowDivTransToP: false


2、再搜索并修改以下:

//编辑器不能为空内容
if (domUtils.isEmptyNode(me.body)) {
    me.body.innerHTML = '';
}

3、搜索“/给文本或者inline节点套p标签”,并且替换以下内容

//给文本或者inline节点套p标签
if (me.options.enterTag == 'p') {
  var child = this.body.firstChild, tmpNode;
  if (!child || child.nodeType == 1 &&
    (dtd.$cdata[child.tagName] || isCdataDiv(child) ||
      domUtils.isCustomeNode(child)
      )
    && child === this.body.lastChild) {
    this.body.innerHTML = '' + this.body.innerHTML;
  } else {
    var p = me.document.createElement('div');
    while (child) {
      while (child && (child.nodeType == 3 || child.nodeType == 1 && dtd.p[child.tagName] && !dtd.$cdata[child.tagName])) {
        tmpNode = child.nextSibling;
        p.appendChild(child);
        child = tmpNode;
      }
      if (p.firstChild) {
        if (!child) {
          me.body.appendChild(p);
          break;
        } else {
          child.parentNode.insertBefore(p, child);
          p = me.document.createElement('div');
        }
      }
      child = child.nextSibling;
    }
  }
}

4、搜索 “进入编辑器的li要套p标签”,这块也要注释掉


5、注视掉这段:

node.className = utils.trim(node.className.replace(/list-paddingleft-\w+/,'')) + ' list-paddingleft-' + type;

6、最后注视掉:

li.style.cssText && (li.style.cssText = '');

完美解决,以上是整个流程,不过有些浏览需要清空缓存才能起作用。

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值