百度编辑器ueditor的使用方法

现在的位置: 首页 > 综合 > 正文

RSS

百度编辑器ueditor的使用方法

2014年01月09日 ⁄ 综合 ⁄ 共 3630字 ⁄ 字号小中大 ⁄ 评论关闭

1) 官网上下载完整源码包，解压到任意目录，解压后的源码目录结构如下所示：

_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">

<head>

<title>编辑器完整版实例</title>

</head>

<body>

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>

//修改内容代码

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）下面就是配置图片上传路径