百度ueditor富文本编辑器使用初体验

最近公司门户站新上了一个专题栏目,其中涉及到专题介绍就需要使用富文本编辑器进行编辑提交。

之前公司一直用的是kindeditor,这个编辑器配置简单功能也比较全,最重要的是换了一些编辑器之后,这个编辑器是最稳定的一个。

当然这是几年前的想法了,最近同事使用编辑器编辑专题介绍的时候,各种莫名其妙的问题,以前用的少,吐槽的也少,现在工作量大了,用的多了,吐槽就多了。骂人

好吧,那就再找个更好的吧,百度一搜“富文本编辑器”,第一个就是ueditor,居然是百度的!想来大公司做的应该不错吧,就点进去看了看,然后下载、配置、测试。

最终发现确实不错啊!首先ueditor解决了kindeditor里面表格不可以直接拖动宽度的问题,当然一些不好用的地方还是存在的,毕竟完美的富文本编辑器是不存在的大笑


我下载的编辑器版本是最新的1_4_3开发版

下载地址和目录结构:

1.ueditor 官方地址:http://ueditor.baidu.com/website/index.html

   开发文档地址:http://ueditor.baidu.com/website/document.html

   下载地址:http://ueditor.baidu.com/website/download.html (这里可选开发版、MINI版、定制版)


2. 下载完整源码包,解压后的源码目录结构如下所示:

     _examples:编辑器完整版的示例页面

    dialogs:弹出对话框对应的资源和JS文件

    themes:样式图片和样式文件   php/jsp/.net:涉及到服务器端操作的后台文件,根据你选择的不同后台版本,这里也会不同,这里我们选择php

    third-party:第三方插件(包括代码高亮,源码编辑等组件)

    ueditor.all.js:_src目录下所有文件的打包文件(用于发布版本)

    ueditor.all.min.js:editor.all.js文件的压缩版,建议在正式部署时才采用

    ueditor.config.js:编辑器的配置文件,建议和编辑器实例化页面置于同一目录


下面记录一下这几天使用过程中碰到的问题和解决办法:

1 table在全屏下编辑好了缩放的时候,会自动把table的宽度修改掉。解决方法:在ueditor.all.js或ueditor.all.min.js(根据调用文件不同改对应文件) 搜索 me.addListener("fullscreenchanged"   把这个监听事件方法注释掉就可以了


2 设置默认字体大小、字体  在ueditor.config.js配置文件里面添加一行初始化的样式 ,initialStyle:'p{line-height:1em; font-size: 12px;font-family:宋体,黑体,微软雅黑,Microsoft YaHei;'  这里面可以定义行高、字体、字体大小等,其他默认值可以自己试


3 自定义模板 在ueditor/dialogs/template/目录下有个config.js文件,里面每个{}里面的内容就是一个模板样式,如果自己要新增模板,按这个格式新增即可。先在编辑器调好样式,然后切换到html模式,复制代码,去掉空格,放到html属性值里面即可


其它的再补充

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值