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

ueditor1.4.3.1文件下载

posted @ 2020-05-16 15:12 一只桔子2233 阅读(433) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球运作规律

公告

昵称：一只桔子2233
园龄： 8年3个月
粉丝： 16
关注： 18

+加关注

2025年3月

日

一

二

三

四

五

六

Kikyo

纸上得来终觉浅，绝知此事要躬行。

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

1、前言

2、使用百度开源富文本编辑器

自定义编辑器js如下

ueditor1.4.3.1文件下载

公告

搜索

我的标签

随笔分类

随笔档案

阅读排行榜

最新评论

	<!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>

	, toolbars: [[
	'undo', 'redo', '\|'
	, 'bold', 'pasteplain', '\|',
	, 'justifyleft', 'justifycenter', '\|'
	, 'fontsize', '\|'
	//'insertimage', 'insertvideo', '\|'
	//, 'wordimage', '\|'
	//, 'inserttable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'splittocells'
	]]