提到所见即所得编辑器, 许多人第一反应就是FckEditor, fck的确是一个非常赞的web在线编辑器, 功能非常强大, 定制性强(虽然我一直觉得它的界面十分丑陋…).
但是前段时间, 想为自己的”时光邮局“添加一个所见即所得编辑器, 想再用FckEditor, 惊讶地发现它被”拆”掉了. 基本的FckEditor(改名叫做CKEditor了)已经无法使用上传图片功能了, 这部分功能被放入另外一个插件CKFinder中去了. 虽然说, 通过配置, 还是可以把这两个玩意儿再组合起来, 但是看了下网上的教程, 貌似还是得花点儿功夫的. 而且我也不确定组合后的编辑器能够直接在SAE上使用.(SAE是不允许临时文件操作的, 需要通过Storage来管理文件)
如果说必须要修改, 我宁愿尝试一下新鲜的编辑器, 于是我最后选中了UEditor.
ueditor(http://ueditor.baidu.com)是百度出品的一款所见即所得编辑器. 个人感觉功能还是很不错的, 在线的Demo试用了下, 觉得功能挺赞(和FckEditor挺像的), 另外不知道是不是CKEditor现在也有这个功能(真的好久没用了)—-从Word粘贴, 粘贴后不仅能够尽可能地保留原有的格式, 更加有”word图片一键上传”功能, 即点一下粘贴之后不显示的图片, 直接选中一个本地的临时图片地址, 即可上传显示. 上传普通的图片也很方便. 自带的表情有兔斯基, 绿豆蛙等, 嗯, 符合中国国情啊!
好, 那就选中, 用百度的UEditor吧!(我当时使用的是1.1.8版本, 现在已经有1.2版本啦, 以下我以最新的版本为示例去讲吧~~)
这次先说它的最基本使用方式, 更多详情见http://ueditor.baidu.com/website/teach.html, 我这里先简单说明一下, 下一讲再重点说明如何和Thinkphp(sae版本)结合使用. (其实非thinkphp也类似, 只要用sae, 思路都是一样的)
1. 下载Ueditor压缩包, 放到工程目录中—-这个我不需要教了吧.
对于Thinkphp, 我是选择放在根目录/版本号/Public目录下的~~
2. 在需要使用的html/php/随便啥文件中, 先写入如下代码:
<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加载，否则特定情况下可能会出现报错。
另外,
1) 推荐把editor_config.js复制一份出来, 作为备份. 在自己的config文件中修改~万一改坏了还有基础的备份可以参考
2) 压缩包中有editor_all.js和editor_all_min.js两个文件, 我们平时使用的时候, 使用前者即可. 后者是前者的”精简版”, 去除了诸如换行, 空格之类, 更加利于网络传输, 但是不适合阅读. 因此推荐在最终发布的时候使用~~
3. 如果是在Thinkphp框架中使用, 可以用以下的语句:
<load file="__ROOT__/Public/ueditor/editor_config.js" /> <load file="__ROOT__/Public/ueditor/editor_all.js" /> <load file="__ROOT__/Public/ueditor/themes/default/ueditor.css" />
4. 使用以下语句, 嵌入编辑器:
<div id="myEditor"></div>
<script type="text/javascript">
var editor = new baidu.editor.ui.Editor();
editor.render("myEditor");
</script>其中myEditor, 换成自己所需要的id即可. 如果是编辑器初始化的时候有内容, 可以使用:
<script type="text/plain" id="myEditor">初始内容</script>
5. 重点需要配置config js文件中的以下代码:
var tmp = window.location.pathname,
// URL = window.UEDITOR_HOME_URL¦¦tmp.substr(0,tmp.lastIndexOf("\/")+1).replace("_examples/","").replace("website/","");//这里你可以配置成ueditor目录在您网站的相对路径或者绝对路径（指以http开头的绝对路径）
URL = "../../../Public/ueditor/";把URL设置为自己的ueditor所在的路径.
本来以为在Thinkphp中可以使用如”__ROOT__/Public/ueditor/”这样的形式的, 但是发现不行…没有被解析…
目前我用的还是这样的相对路径形式, 不过根据注释, 也可以写成http://开头的绝对形式..
此处暂时没有仔细研究, 如果有好的方法, 请直接留言吧~~
6. 在浏览器中打开编辑界面, 会发现UEditor已经可以正常工作了!
(但是, 仅限于基础功能! 上传图片还是不可以的, 我在之后的文章中再讲~~)
如果在配置的过程中发生啥问题, 请直接去UEditor的官方网站查看教程吧:-)
(NEW)7. 果然和1.1.8不一样了…
默认的value都是从editorValue这么一个post字段中去取, 而不是自己给定的那个ID…
本文链接：https://www.poisonbian.com/post/139.html 转载需授权！