在项目中使用UEditor碰到的几个问题

  在项目中使用到文本编辑器是在弹出的窗口中使用到的,以下为遇到的几个问题以及解决方法。

  1.文本编辑器的下拉框无法使用。即选择字号字体的下拉选择框无法使用。

  通过调试,发现不是编辑器的下拉框没有出来,而是下拉框显示在弹出框的底部,猜测是否和z-index属性有关。

  产生这个问题的原因是文本编辑器默认的z-index是900,而弹出框的z-index比900大,会将下拉框等覆盖住,即其在弹出框的底层,只需修改编辑器默认的z-index值比弹出框的值大即可。

  2.第一次打开弹出框后关闭,第二次再打开时文本编辑器无法显示。

  在调用UE.getEditor(‘editor’)初始化UEditor时,先从放置编辑器的容器instances中获取,没有实例才实例化一个Editor,这就是引起问题的原因。 在第一次跳转到编辑器界面时,正常的实例化了一个新的编辑器对象,并放入instances,调用editor.render(id)渲染编辑器的DOM; 

第二次初始化时却仅从容器中取到实例:var editor = instances[id]; 直接返回了editor对象,而编辑器的DOM并没有渲染。在原来的代码前面加上UE.delEditor('editor'),然后再var ue = UE.getEditor('editor');


  3.将编辑器的内容回显到编辑器,调用相关的方法无法将值赋给编辑器显示。

  主要的原因是要在文本编辑器实例化完成以后再对编辑器进行操作。


  选择合适的设置内容的方法,不一定是setContent()。

  4.文本编辑器显示原来的内容如果带有样式就会出现一定的错误。

  给编辑器的内容添加下划线或者其他的一些操作,存储到数据库的数据类似<p><span style="text-decoration: underline;">3</span></p>,当取得的正常值被页面的隐藏域获取时,因为value=""中第一个双引号和值中的双引号匹配上了,所以导致出现多余的代码在页面后面无法匹配。同时初始化文本编辑器后从隐藏域中获取到的只是部分的代码,所以无法正常显示。可以选择的方式是讲对应的value属性设置为单引号 value='${microInformation.content}'。

  总结:2,3这两个问题在网上都是比较常见的,1这个问题是我在弹窗中使用文本编辑器才碰到的,4这个问题刚开始还觉得有点奇怪,就像对一半的答案,最后调试发现只显示了部分的内容,发现问题后得以更正。在UEditor的使用过程中还需要对默认的过滤方式进行一定的配置,如果不更改相关配置,会导致相关的样式失效,这是开发者基于对输入安全所做出的限制,本文没有写关于这部分的内容,可以参考网上其他的文章。

  

  

猜你喜欢

转载自blog.csdn.net/qq_32801733/article/details/79995616