1.载入js,css文件
<script src="ueditor/editor_config.js" type="text/javascript"></script>
<script src="ueditor/editor_all.js" type="text/javascript"></script>
<link href="ueditor/themes/default/ueditor.css" rel="stylesheet" type="text/css" />
相比较这款富文本编辑器还是不错的,轻量级,功能全,UI也还不错。
配置的时候费了点时间,现在回过头看其实相当简单,把相关的文件路径设置正确即可。
我的目录结构是:www/CMS/MyEditor/
上传图片的地址是: www/images/news/content/
修改editor_config.js:
*/
参数设置是否正确。如果上传正确,但是在富文本框中显示红叉也是说明路径错了,把鼠标移动到未显示成功的图片上会出现悬浮菜单,点击“修改/编辑”,在图片属性窗口中你就可以看见图片的路径了,就可以发现错在哪里。
2.页面配置
<div id="myEditor"></div> //可以是aspx控件 只要id正确即可
<script type="text/javascript">
var ue = new baidu.editor.ui.Editor();
ue.render("myEditor"); //这里填写要改变为编辑器的控件id
</script>
3.editor_config.js 文件中的路径配置
var tmp = window.location.pathname;
URL = window.UEDITOR_HOME_URL || "/SomePackage/Ueditor/ueditor/"; //这里你可以配置成ueditor目录在您网站的相对路径或者绝对路径(指以http开头的绝对路径)
4.如果你要使用传图片功能,还需要修改net文件下的几个文件截图说明吧(这个路径可以直接删除的,试试。不行了自己再调整下)。
改为-->
同理将net文件下其它文件类似的错误更正后即可上传图片。
图片上传默认位置为:net文件夹下。上传一张打开即可发现一个upload文件夹。
5.ueditor 的很多默认配置都在 editor_config.js这个文件中,细心看的话,开启或关闭其中的配置是可以解决很多问题的。
6.我在使用过程中还遇到过编辑器内容影响整体页面的布局问题,这问题是在editor_all.js这个文件中修改的默认样式问题的。
复制代码
/**
* 渲染编辑器的DOM到指定容器,必须且只能调用一次
* @public
* @function
* @param {Element|String} container
*/
render:function ( container ) {
var me = this, options = me.options;
if ( container.constructor === String ) {
container = document.getElementById( container );
}
if ( container ) {
var useBodyAsViewport = ie && browser.version < 9,
html = ( ie && browser.version < 9 ? '' : '<!DOCTYPE html>') +
'<html xmlns=\'http://www.w3.org/1999/xhtml\'' + (!useBodyAsViewport ? ' class=\'view\'' : '') + '><head>' +
( options.iframeCssUrl ? '<link rel=\'stylesheet\' type=\'text/css\' href=\'' + utils.unhtml( options.iframeCssUrl ) + '\'/>' : '' ) +
'<style type=\'text/css\'>' +
//这些默认属性不能够让用户改变
//选中的td上的样式
'.selectTdClass{background-color:#3399FF !important;}' +
'table.noBorderTable td{border:1px dashed #ddd !important}' +
//插入的表格的默认样式
'table{clear:both;margin-bottom:10px;border-collapse:collapse;word-break:break-all;}' +
//分页符的样式
'.pagebreak{display:block;clear:both !important;cursor:default !important; 100% !important;margin:0;}' +
//锚点的样式,注意这里背景图的路径
'.anchorclass{background: url(\'' + me.options.UEDITOR_HOME_URL + 'themes/default/images/anchor.gif\') no-repeat scroll left center transparent;border: 1px dotted #0000FF;cursor: auto;display: inline-block;height: 16px; 15px;}' +
//设置四周的留边
'.view{padding:0;word-wrap:break-word;cursor:text;height:100%;}\n' +
//设置默认字体和字号
'body{margin:8px;font-family:\'宋体\';font-size:16px;}' +
//针对li的处理
'li{clear:both}' +
//设置段落间距
'p{margin:5px 0;}'
+ ( options.initialStyle || '' ) +
'</style></head><body' + (useBodyAsViewport ? ' class=\'view\'' : '') + '></body>';
多个ueditor
var editor = new baidu.editor.ui.Editor();
editor.render("myEditor");
editor.getContent();
var editor1= new baidu.editor.ui.Editor();
editor1.render("myEditor1");
editor1.getContent();