【ueditor__使用】百度ueditor富文本编辑器

1、前言

在用户提交信息时,需要输入框提供换行设置字体样式大小等需求,普通inputtextarea不能满足需求

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'
]]

ueditor1.4.3.1文件下载

posted @   一只桔子2233  阅读(432)  评论(0编辑  收藏  举报
编辑推荐:
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· .NET 进程 stackoverflow异常后,还可以接收 TCP 连接请求吗?
阅读排行:
· 本地部署 DeepSeek:小白也能轻松搞定!
· 基于DeepSeek R1 满血版大模型的个人知识库,回答都源自对你专属文件的深度学习。
· 在缓慢中沉淀,在挑战中重生!2024个人总结!
· 大人,时代变了! 赶快把自有业务的本地AI“模型”训练起来!
· Tinyfox 简易教程-1:Hello World!
点击右上角即可分享
微信分享提示