首先要引入相关的js库文件:jquery.min.js ueditor.config.js ueditor.all.js
常用操作:
//获取编辑器的内容
$('.action').find('.getInfo').click(function () {
var pContent = UE.getEditor("pContent").getContent();
alert(pContent);
});
//清空编辑器的内容
$('.action').find('.clearInfo').click(function () {
var editorBox = UE.getEditor('pContent');
editorBox.setContent('');
});
//给编辑器赋值
$('.action').find('.setValueInfo').click(function () {
var str='你好,哈哈哈';
var editorBox = UE.getEditor('pContent');
editorBox.ready(function () {//编辑器初始化完成再赋值
editorBox.setContent(str); //赋值给UEditor
});
});
HTML源码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>富文本编辑器UEditor</title> <style> .pContent { 1000px; height: 100px; display: block; margin: 30px auto; } .action { display: block; overflow: hidden; 630px; margin: 30px auto; } .action .item { float: left; margin-right: 20px; cursor: pointer; border: 1px rgb(212, 212, 212) solid; padding: 4px 15px; box-sizing: border-box; border-radius: 4px; } </style> </head> <body> <div class="action"> <div class="item getInfo">获取编辑器的内容</div> <div class="item clearInfo">清空编辑器的内容</div> <div class="item setValueInfo">给编辑器赋值</div> </div> <div style="clear: both;"></div> <div id=pContent class="pContent"></div> <script type="text/javascript" src="./js/jquery.min.js"></script> <script type="text/javascript" src="./js/ueditor/ueditor.config.js"></script> <script type="text/javascript" src="./js/ueditor/ueditor.all.js"></script> <script type="text/javascript" src="./js/index.js"></script> <script type="text/javascript"> $(function () { $.index.init(); }); </script> </body> </html>
JQuery源码:
(function ($) { $.index = { init: function () { //初始化编辑器 $.index.initEditor('pContent'); //获取编辑器的内容 $('.action').find('.getInfo').click(function () { var pContent = UE.getEditor("pContent").getContent(); alert(pContent); }); //清空编辑器的内容 $('.action').find('.clearInfo').click(function () { var editorBox = UE.getEditor('pContent'); editorBox.setContent(''); }); //给编辑器赋值 $('.action').find('.setValueInfo').click(function () { var str='你好,哈哈哈'; var editorBox = UE.getEditor('pContent'); editorBox.ready(function () {//编辑器初始化完成再赋值 editorBox.setContent(str); //赋值给UEditor }); }); }, //编辑器开始 initEditor: function (ObjectName) { var opts = { enableAutoSave: true, saveInterval: 60000, initialFrameHeight: 520, autoHeightEnabled: false, elementPathEnabled: false, retainOnlyLabelPasted: true, maximumWords: 20000, retainOnlyLabelPasted: true, toolbars: [['fullscreen', 'source', 'undo', 'redo', 'bold', 'italic', 'underline', 'fontborder', 'backcolor', 'fontsize', 'fontfamily', 'paragraph', 'justifyleft', 'justifyright', 'justifycenter', 'justifyjustify', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'link', 'unlink', 'emotion', 'help', 'preview', 'horizontal', 'removeformat', 'mergeright', 'mergedown', 'deleterow', 'deletecol', 'insertparagraphbeforetable', 'inserttitle', 'insertcode', 'simpleupload', 'insertimage', 'spechars', 'searchreplace' ]] }; UE.getEditor(ObjectName, opts); }, validateEditor: { editor: function (ObjectName) { var n = '#' + ObjectName; var $ipt = $(n); var editor = UE.getEditor(ObjectName); var content = editor.getContent(); if (content.length > 20000) { $.clwenkueditCont.validateEditor.msg($ipt, '内容长度不能超过20000个字符!建议您分多次发布!'); return false; } $.clwenkueditCont.validateEditor.msg($ipt); return content; }, bLength: function (str) { if (!str) { return 0; } var aMatch = str.match(/[^x00-xff]/g); return (str.length + (!aMatch ? 0 : aMatch.length)); }, msg: function ($el, msg) { if (msg) { $el['addClass']('ipt-error'); //$el.siblings('.form-ipt-error').html(msg).css('display', 'block'); $el.next('.form-ipt-error').html(msg).css('display', 'block'); } else { $el['removeClass']('ipt-error'); //$el.siblings('.form-ipt-error').html('').css('display', 'none'); $el.next('.form-ipt-error').html('').css('display', 'none'); } } }, //编辑器结束 } })(jQuery);
具体源码:https://github.com/summerSongXia/summerProject/tree/master/ueditor