更改过umeditor.css如何立即实现

html-css019

更改过umeditor.css如何立即实现,第1张

你可以在css文件名的后面添加一个随机数参数,比如:

<LINK href="umeditor.css?87459" type="text/css" rel="stylesheet">

这样刷新页面后这个css文件就会立刻起作用了。

再次改动文件可以把87459再改为其他数字即可。而且不局限于数字,任何可用在url中的合法的字符均可。

如果是在asp(.net、php、jsp也一样)文件中,那么可以直接用随机数函数,就不用每次进行修改了:

<LINK href="umeditor.css?<%=rnd()%>" type="text/css" rel="stylesheet">

当css修改完毕要正式使用的时候,再把文件名改回正常的即可(不改也没问题的)。

下面是在view中的引入:

<link href="<?php echo base_url('/public/css/umeditor/umeditor.css')?>" type="text/css" rel="stylesheet">

<script type="text/javascript" src="<?php echo base_url('/public/js/jquery.min.js')?>"></script>

<script type="text/javascript" charset="utf-8" src="<?php echo base_url('/public/js/umeditor/umeditor.js')?>"></script>

<script type="text/javascript" charset="utf-8" src="<?php echo base_url('/public/js/umeditor/umeditor.config.js')?>"></script>

<script type="text/javascript" src="<?php echo base_url('/public/js/umeditor/zh-cn.js')?>"></script>

<link rel="stylesheet" href="<?php echo base_url('/public/css/umeditor/formbtn.css')?>">

引入相关PHP类:

在CI框架下的application\libraries中新建一个文件'Umupload.php'(我个人只是想用上传,所以变这么命名)

然后将图一中umeditor\php\Upload.class.php中的所以代码直接Copy至上一步新建的文件中。

处理上传:

这里本菜鸡直接在CI的默认控制器 welcome中写了两个function 分别加载编辑器视图和处理上传,如下:

load->view('umeditor.html')

}

public function umupload(){

error_reporting( E_ERROR | E_WARNING )

//上传配置

$config = array(

"savePath" =>"upload/" , //存储文件夹 (感觉没啥用)

"maxSize" =>1000 ,

"allowFiles" =>array( ".gif" , ".png" , ".jpg" , ".jpeg" , ".bmp" )

)

//上传文件目录

$Path = "upload/"

//背景保存在临时目录中

$config[ "savePath" ] = $Path

$this->load->library('Umupload',array('fileField'=>'upfile', 'config' =>$config))

$type = $_REQUEST['type']

$callback=$_GET['callback']

$info = $this->umupload->getFileInfo()

/**

* 返回数据

*/

if($callback) {

echo '<script>'.$callback.'('.json_encode($info).')</script>'

} else {

echo json_encode($info)

}

}

}

其中public function umupload()的函数体就是图一umeditor\php\imageUp.php中的内容,并且做了相关修改。

至此,编辑器已经全部嵌入框架,但是还需修改一些代码片段才可以正式使用。

后期加工,以下修改均指CI框架中的修改:

修改JS:CI\public\js\umeditor.config.js 第139行附近修改为:

//图片上传配置区

,imageUrl:URL+"../../../index.php/welcome/umupload" //图片上传提交地址

,imagePath:URL + "../../../" //图片修正地址,引用了fixedImagePath,如有特殊需求,可自行配置

,imageFieldName:"upfile" //图片数据的key,若此处修改,需要在后台对应文件修改对应参数

这里主要是修改路径,让JS可以找到控制器。出于仓促这里使用相对路径。

修改PHP:

据上文所述,在welcome的控制器中 public function umupload()的函数体是copy而来,所以要修改一部分使之可以在CI中'跑'起来。修改之后的代码如上文所示,具体修改为:

删除最开始的两行:

header("Content-Type:text/htmlcharset=utf-8")

error_reporting( E_ERROR | E_WARNING )

将原编辑器中的 17行

$up = new Uploader( "upfile" , $config )

修改为:

$this->load->library('Umupload',array('fileField'=>'upfile', 'config' =>$config))

因为此处通过加载library的方式引入编辑器的相关PHP类。并且library的构造函数只能传一个参数,因此做此修改。

第21行附近的

$info = $up->getFileInfo()

修改为:

$info = $this->umupload->getFileInfo()

使用任何编辑器都是一样的,语言没有直接关系,ASP,PHP,JSP通用的

1、把编辑器放在你的WEB目录中,

2、引入JS

//先引入配置文件(可以修改编辑器的高度,初始化内容等参数)

<script type="text/javascript" src="/editor_config.js"></script>

//包含全部功能的js文件

<script type="text/javascript" src="/editor_ui_all.js"></script>

//编辑器的默认样式

<link type="text/css" href="/themes/default/ueditor.css"/>

//创建编辑器

<script type="text/javascript" charset="utf-8">

var editor = new baidu.editor.ui.Editor()

editor.render('editor') //editor为编辑器容器的id

</script>

3、HTML中的使用

//id可以自己修改,在创建编辑器的时候将这个id传入即可

//div作为容器的示例

<div id="editor"></div>

//textarea作为容器的示例

<textarea id="editor">

这里可以放编辑器初始化的内容,创建编辑器时,

我们会将内容放到编辑器的编辑区域里

</textarea>