小东Freeman + 关注

签名:我们爱我们的倒霉工作,也爱这千疮百孔的世界。

解决Ueditor二次编辑代码语言pre不显示问题

发表于 5个月前   1347次查看    0评论  11 赞

前言:在做博客网站时会用到文章二次编辑的功能,就是将发表过的文章重新导入ueditor进行重新编辑,方法倒是很简单,直接使用ueditor提供的setcontent方法就可以实现此功能,但是完成此功能后发现事情并不是这么简单,如果你单纯的将所有html导入时如果没有<pre>标签时是完美运行的,如果出现pre标签时则ueditor都不加载,所以针对这个问题开始进行解决Ueditor二次编辑代码语言pre不显示问题


分析原因:发现只要出现pre标签后他就会运行这段代码,所以导致编辑器不加载,所以只有把html代码转换成text才能完美的加载ueditor并且将代码语言放到ueditor上,所以我们这样做。


1、先将数据库获取到的内容存放在一个div里,并让这个div隐藏,用于后来对里面格式的转换

1
2
3
4
<!-- 将数据库数据放到div里 -->
         <div id="contentdiv" style="display:none">
         ${article.content}
         </div>

2、获取div里所有的pre内容,将内容转换成text,这里会用到遍历,因为获取的是所有的pre,你写文章时不知道有几个pre,所以这里直接获取pre的个数进行遍历,如果不遍历会出现所有pre内容存在一起的错误

1
2
3
4
5
6
7
8
9
$(function(){
        //获取pre个数,根据jquery版本问题.length()也可以
        var presize=$("#contentdiv pre").size();
        //遍历pre进行pre的格式转换
        for(var i=0;i<presize;i++){
        var pre=$("#contentdiv pre").eq(i).text();
        $("#contentdiv pre").eq(i).text(pre);
}
        });

3、上述已经将pre内容转换成text并且重新放到了div里,所以div里的pre并不是html代码,而是text文本,这样重新放到ueditor就OK了

1
2
3
4
5
6
 UEDITOR_CONFIG.UEDITOR_HOME_URL='/fman/jsp/common/ueditor/';
          var ue=UE.getEditor('myEditor');
          ue.addListener("ready"function () {  
           // editor准备好之后才可以使用  
           ue.setContent($("#contentdiv").html());  
          });


这样就解决Ueditor二次编辑代码语言pre不显示问题,虽然挺恶心的,但是问题是解决了,之前翻了很多文章也没有找到解决方案,感觉终极解决方案应该在ueditor里的js文件里,待我有时间阅读那一万多行代码去一探究竟,在这里特别感谢诚意印象的老哥提供的主要思路。

11人已赞


本文由Fun言网 – 小东Freeman创作,转载请务必附上本文链接和出处,欢迎参与我们的付费投稿计划


你还没有登录,请先 登录注册!
文章评论0