周梦康 发表于 2014-06-25 6067 次浏览 标签 : UEditor

开发版本是根据 /_src/adapter/editor.js 里面在初始化编辑器ui之后,马上引入里css文件。

在使用版的ueditor.all.jsueditor.all.min.js里面搜ueditor.css也能找到相应的代码

UE.ui.Editor = function (options) {
    var editor = new UE.Editor(options);
    editor.options.editor = editor;
    utils.loadFile(document, {
        href:editor.options.themePath + editor.options.theme + "/_css/ueditor.css",
        tag:"link",
        type:"text/css",
        rel:"stylesheet"
    });
    //...
}

而在开发版本之中呢,是没有ueditor.css文件的,根据Gruntfile.js可知是将/_src/*.css都读取然后写入了 ueditor.css,同时呢,也把_css替换为了css。(Grunt 0 知晓,只能大概明白其流程,具体请查看 Gruntfile.js

grunt.initConfig配置里面写了cssmin来压缩 css 保存为ueditor.min.css,但是不知道为什么编译完之后在ueditor.all.jsueditor.all.min.js里面引用的css文件还是ueditor.css而非ueditor.min.css

可能是故意为之,也是遗漏。

知道了是如何引入的,那么如何给编辑器更换样式呢?比如我一个网站里面多个地方使用的样式不一样,应该如何处理呢?

以新建一款模仿知乎编辑器主题的样式为例子。

首先复制默认的样式目录为一个新目录,我取名为zhihu,如图:

百度编辑器(uedtior)引入编辑器样式流程不完全解读,以及更换编辑器主题样式

然后在页面调用编辑器,初始化的时候定义主题

<!DOCTYPE html>
<html>
<head lang="zh-cn">
    <meta charset="utf-8">
	<title></title>
	<script type="text/javascript" charset="utf-8" src="./ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="./ueditor/ueditor.all.min.js"> </script>
    <script type="text/javascript" charset="utf-8" src="./ueditor/lang/zh-cn/zh-cn.js"></script>
</head>
<body>
<script id="editor" name="content" type="text/plain"></script>
<script type="text/javascript">
var editor = UE.getEditor('editor', {
        theme:'zhihu',
    });
</script>
</body>
</html>

最后的效果如下:

如果中红框所示编辑器里面多了一个edui-zhihu的类名,所以我们需要将\themes\zhihu\css\ueditor.css里面的.edui-default替换为.edui-zhihu,否则会找不到对应的样式。

评论列表