【ueditor__使用】百度ueditor富文本编辑器
1、前言
在用户提交信息时,需要输入框提供换行设置字体样式大小等需求,普通input
和textarea
不能满足需求
2、使用百度开源富文本编辑器
需要注意的是js
引用顺序,zh-cn.js
汉化文件乱码时,需另存为UTF-8
格式,ueditor.configKikyo.js
文件是自定义编辑器的功能,详情参见文件内容
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div> <!-- 加载编辑器的容器 --> <script id="container" name="content" type="text/plain"> </script> </div> <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="/lib/ueditor1_4_3_1/ueditor.configKikyo.js"></script> <script src="/lib/ueditor1_4_3_1/ueditor.all.min.js"></script> <!--zh-cn文件若乱码,另存为utf-8--> <script src="/lib/ueditor1_4_3_1/lang/zh-cn/zh-cn.js"></script> <script> var ue = UE.getEditor('container', { autoHeightEnabled: true, autoFloatEnabled: true, initialFrameWidth: 800, initialFrameHeight: 200 , serverUrl: "" //设置为空,浏览器不报上传接口错误 , wordCount: true //是否开启字数统计 , maximumWords: 300 //允许的最大字符数 , elementPathEnabled: false , toolbars: [['source', 'undo', 'redo', 'bold', 'justifyleft', 'justifycenter']] }); //对编辑器的操作最好在编辑器ready之后再做 ue.ready(function () { //设置编辑器的内容 ue.setContent('hello'); //获取html内容,返回: <p>hello</p> var html = ue.getContent(); //获取纯文本内容,返回: hello var txt = ue.getContentTxt(); console.log("html==", html); console.log("txt==", txt); }); </script> </body> </html>
自定义编辑器js如下
, toolbars: [[ 'undo', 'redo', '|' , 'bold', 'pasteplain', '|', , 'justifyleft', 'justifycenter', '|' , 'fontsize', '|' //'insertimage', 'insertvideo', '|' //, 'wordimage', '|' //, 'inserttable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'splittocells' ]]
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· .NET 进程 stackoverflow异常后,还可以接收 TCP 连接请求吗?
· 本地部署 DeepSeek:小白也能轻松搞定!
· 基于DeepSeek R1 满血版大模型的个人知识库,回答都源自对你专属文件的深度学习。
· 在缓慢中沉淀,在挑战中重生!2024个人总结!
· 大人,时代变了! 赶快把自有业务的本地AI“模型”训练起来!
· Tinyfox 简易教程-1:Hello World!