欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

ueditor富文本编辑器过滤了代码，如何取消？

程序员文章站 2022-05-26 21:19:14
...

后台UEditor富文本编辑器 ，编辑的代码被强制过滤，并被强制修改成<p>标签？导致前台页面效果不对？

ueditor富文本编辑器，虽然好用，但是很多时候，如果没有足够的使用经验，一般是很难找寻其中的诀窍；
尤其，使用中出现的诸多问题，列举如下：

  • 很多 html 代码被替换成了一堆 <p>···</p> 标签？
  • 富文本框的 width 和 height 设定问题？
  • 富文本内容填写完毕之后，点击保存，却没有保存成功？
  • 等等

上面只是枚举了几个常见的问题，下面具体分享一些小细节经验。

1. 如何在页面中引用ueditor富文本编辑器？

引入插件的代码如下：

<!DOCTYPE HTML >
<html>
  <head>
   ···01中间部分，代码省略···

    <!-- 引入富文本框 插件-->
    <script type="text/javascript" src="plugins/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" src="plugins/ueditor/ueditor.all.js"></script>
    <script type="text/javascript" charset="utf-8" src="plugins/ueditor/lang/zh-cn/zh-cn.js"></script>
    ···02中间部分，代码省略···

</head>
<body>

    ···03中间部分，代码省略···

2. 如何调用、并设置富文本编辑器的width和height?

调用插件的代码如下：

    ···04中间部分，代码省略···

    <!-- ---------------富文本框 编辑区域--------------- -->
    <!--手机端 商品描述-->
    <script id="DESC" name="DESC" type="text/plain" style="width:90%;height:100px;">${product.DESCRI}</script>
    <!--电脑端 商品描述-->
    <script id="PCDESC" name="PCDESC" type="text/plain" style="width:90%;height:100px;">${product.PCDESCRI}</script>

    <p>···05中间部分，代码省略···</p>

    <!--[if lt IE 9]>
      <script src="js/jquery-1.9.1.min.js"></script>
    <![endif]-->
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript">
        //实例化编辑器
        //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
        UE.getEditor('DESC');
        UE.getEditor('PCDESC');
    </script>
</body>
</html>

3. 如何取消ueditor的代码过滤功能？从而，真正实现，后台编辑输入什么样的代码，前台就显示什么样的代码效果！

查看以上的代码片段，其中发现如下代码：

    //实例化编辑器
    UE.getEditor('DESC');
    UE.getEditor('PCDESC');

上述代码就是需要的取消过滤功能的代码，具体不在深入探讨。

暂未完结。

相关标签： 富文本编辑器 ueditor

上一篇： 程序员的忧伤

下一篇： 聚类kmeans案例

推荐阅读