1) 官网上下载完整源码包,解压到任意目录,解压后的源码目录结构如下所示:
uploadPath可以设置上传路径
中的
和
可以屏蔽掉,调用图片的路径已经放入index.php中
- _examples:编辑器完整版的示例页面
- _demos:编辑器的各种使用案例
- dialogs:弹出对话框对应的资源和JS文件
- themes:样式图片和样式文件
- server:涉及到服务器端操作的PHP、JSP等文件
- third-party:第三方插件
- editor_all.js:_src目录下所有文件的打包文件
- editor_all_min.js:editor_all.js文件的压缩版,建议在正式部署时才采用
- editor_config.js:编辑器的配置文件,建议和编辑器实例化页面置于同一目录
删除其中的 _examples, _demos, editor_all_min.js文件及文件夹,将剩余的文件放入名为ueditor的文件夹下。
2)建立一个index.php的文件写入以下代码
//添加内容代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>编辑器完整版实例</title>
<script type="text/javascript" src="ueditor/editor_config.js"></script>
<script type="text/javascript" src="ueditor/editor_all.js"></script>
<link rel="stylesheet" href="ueditor/themes/default/ueditor.css"/>
<!--需要注意的是,此处的editor_config.js最好先于editor_all.js加载,否则特定情况下可能会出现报错。-->
</head>
<body>
<div id="myEditor"></div>
<script type="text/javascript">
var editor = new baidu.editor.ui.Editor(
{
toolbars:[ [ 'FullScreen', 'Source', '|', 'Undo', 'Redo', '|', 'Bold', 'Italic', 'Underline', 'StrikeThrough', 'Superscript', 'Subscript', 'RemoveFormat', 'FormatMatch', '|', 'PastePlain', '|', 'ForeColor', 'BackColor', 'InsertOrderedList', 'InsertUnorderedList', '|', 'CustomStyle', 'Paragraph', 'RowSpacing', 'LineHeight', 'FontFamily', 'FontSize', '|', 'DirectionalityLtr', 'DirectionalityRtl', '|', 'Anchor', 'SearchReplace','|', 'Preview','JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyJustify', '|','Indent', 'Link', 'Unlink', '|', 'ImageNone', 'ImageLeft', 'ImageRight', 'ImageCenter', '|', 'InsertImage', 'Emotion', 'InsertVideo', 'Map', 'GMap', 'InsertFrame', 'HighlightCode', '|', 'Horizontal', 'Date', 'Time', 'Spechars', '|', 'InsertTable', 'DeleteTable', 'InsertParagraphBeforeTable', 'InsertRow', 'DeleteRow', 'InsertCol', 'DeleteCol', 'MergeCells', 'MergeRight', 'MergeDown', 'SplittoCells', 'SplittoRows', 'SplittoCols', '|', 'SelectAll', 'ClearDoc', 'CheckImage', 'Help'] ], //这些代码可以不要 initialContent: '',imagePath:"/qiusuo/admin/", //图片调用路径,和上传路径一样,uditor/editor_config.js里面的图片调用屏蔽,直接在这里实现了,后面会详细讲
textarea:'content' //
content
这里是内容
}
);
editor.render("myEditor");
</script>
//修改内容代码
<script type="text/plain" id="myEditor"><?php echo $result["content"];?></script> //这里输出内容
<script type="text/javascript">
var editor = new baidu.editor.ui.Editor(
{
toolbars:[
[ 'FullScreen', 'Source', '|', 'Undo', 'Redo', '|',
'Bold', 'Italic', 'Underline', 'StrikeThrough', 'Superscript', 'Subscript', 'RemoveFormat', 'FormatMatch', '|',
'PastePlain', '|', 'ForeColor', 'BackColor', 'InsertOrderedList', 'InsertUnorderedList', '|', 'CustomStyle',
'Paragraph', 'RowSpacing', 'LineHeight', 'FontFamily', 'FontSize', '|',
'DirectionalityLtr', 'DirectionalityRtl', '|', 'Anchor', 'SearchReplace','|',
'Preview','JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyJustify', '|','Indent',
'Link', 'Unlink', '|', 'ImageNone', 'ImageLeft', 'ImageRight', 'ImageCenter', '|', 'InsertImage', 'Emotion', 'InsertVideo', 'Map', 'GMap', 'InsertFrame', 'HighlightCode', '|',
'Horizontal', 'Date', 'Time', 'Spechars', '|',
'InsertTable', 'DeleteTable', 'InsertParagraphBeforeTable', 'InsertRow', 'DeleteRow', 'InsertCol', 'DeleteCol', 'MergeCells', 'MergeRight', 'MergeDown', 'SplittoCells', 'SplittoRows', 'SplittoCols', '|',
'SelectAll', 'ClearDoc', 'CheckImage', 'Help']
],
initialContent: '',
imagePath:"/qiusuo/admin/", //图片调用路径
textarea:'content'
}
);
editor.render("myEditor");
</script>
</form>
</body>
</html>
3)下面就是配置图片上传路径
打开ueditor/server/upload/php/up.php 提醒:如果配置的是php的话 ueditor/server/upload 其余的几个文件可以删除
![百度编辑器ueditor的使用方法 - 翔 - 969774007的博客](http://img2.ph.126.net/HEhSo9FqMsdP0QpCpuaz2w==/5717538529760822602.jpg)
接着打开uditor/editor_config.js
![百度编辑器ueditor的使用方法 - 翔 - 969774007的博客](http://img6.ph.126.net/rez7Bw37j6kFop7djW-8Ww==/2711166975694357386.jpg)
中的 ![百度编辑器ueditor的使用方法 - 翔 - 969774007的博客](http://img6.ph.126.net/xRsvyziRUpg2UCdl7BCVhA==/2656279355235782066.jpg)
和 ![百度编辑器ueditor的使用方法 - 翔 - 969774007的博客](http://img8.ph.126.net/fakeN3hJRtfxYoZ35MFh6g==/1592303943269039708.jpg)
可以屏蔽掉,调用图片的路径已经放入index.php中
更多详情可到 http://ueditor.baidu.com/teach.html 查看