Ueditor 富文本操作

时间:2022-12-25 20:09:53

富文本操作:

 前端利用<textaere >标签做载体:

<textaere  id=’mode’  ></texteare>


引入以下两个文件:ueditor.config.js   与 ueditor.all.min.js

<importfile="lib.js.ueditor_mcit.ueditor#config"/>

<importfile="lib.js.ueditor_mcit.ueditor#all"/>

 

设置要显示的功能(toolbars里面不需要的功能可以去掉):

<script type="text/javascript">

   var ue = UE.getEditor('mode', {

       toolbars: [

           [

                'anchor', //锚点

                'undo', //撤销

                'redo', //重做

                'bold', //加粗

                'indent', //首行缩进

                'snapscreen', //截图

                'italic', //斜体

                'underline', //下划线

                'strikethrough', //删除线

                'subscript', //下标

                'fontborder', //字符边框

                'superscript', //上标

                'formatmatch', //格式刷

                'source', //源代码

                'blockquote', //引用

                'pasteplain', //纯文本粘贴模式

                'selectall', //全选

                'print', //打印

                'preview', //预览

                'horizontal', //分隔线

                'removeformat', //清除格式

                'time', //时间

                'date', //日期

                'unlink', //取消链接

                'insertrow', //前插入行

                'insertcol', //前插入列

                'mergeright', //右合并单元格

                'mergedown', //下合并单元格

                'deleterow', //删除行

                'deletecol', //删除列

                'splittorows', //拆分成行

                'splittocols', //拆分成列

                'splittocells', //完全拆分单元格

                'deletecaption', //删除表格标题

                'inserttitle', //插入标题

                'mergecells', //合并多个单元格

                'deletetable', //删除表格

                'cleardoc', //清空文档

                'insertparagraphbeforetable',//"表格前插入行"

                //'insertcode', //代码语言

               'fontfamily', //字体

                'fontsize', //字号

                'paragraph', //段落格式

                'simpleupload', //单图上传

                'insertimage', //多图上传

                'edittable', //表格属性

                'edittd', //单元格属性

                'link', //超链接

                //'emotion', //表情

                'spechars', //特殊字符

                'searchreplace', //查询替换

                //'map', //Baidu地图 'gmap',//Google地图 'insertvideo', //视频 'help', //帮助

                'justifyleft', //居左对齐

                'justifyright', //居右对齐

                'justifycenter', //居中对齐

                'justifyjustify', //两端对齐

                'forecolor', //字体颜色

                'backcolor', //背景色

                'insertorderedlist', //有序列表

               'insertunorderedlist', //无序列表

                'fullscreen', //全屏

                'directionalityltr', //从左向右输入

                'directionalityrtl', //从右向左输入

                'rowspacingtop', //段前距

                'rowspacingbottom', //段后距

                //'pagebreak', //分页'insertframe', //插入Iframe

                'imagenone', //默认

                'imageleft', //左浮动

                'imageright', //右浮动

                'attachment', //附件

                'imagecenter', //居中

                'wordimage', //图片转存

                'lineheight', //行间距

                'edittip ', //编辑提示

                'customstyle', //自定义标题

                'autotypeset', //自动排版

                'webapp', //百度应用

                'touppercase', //字母大写

                'tolowercase', //字母小写

                'background', //背景

                'template', //模板

                'scrawl', //涂鸦

                //'music', //音乐

                'inserttable', //插入表格

                //'drafts', // 从草稿箱加载

                'charts', // 图表

           ]

       ]

   });

</script>

 

这样就可以了,提交就与submit 一起提交了。

 

图片及文件上传原理,在添加图片或文件时,富文本会自动先上传到服务器,再生成一个绝对地址,再用绝对地址及相关标签占在原来上传文件的地方。sub提交时,都是提交的是字串标签。

 

后台:

像正常的textaere 接收就行了。

 

注意:1.当从数据库取出数据,如果不是放到textare中,一定要用:htmlspecialchars_decode()进行预处理

        2.前台如果要对富文本操作,如添加内容。一定要在加载完成后才能操作:(ue为创建富文本时的名字)

 ue.addListener("ready",function(){

全部在里面操作。

})

3.可以借用百度富文本对存入数据库的文本进行预处理。