织梦ckeditor编辑器 编辑内容时显示内容样式

因为我们为文章设置了不少页面内容样式,以增加文章前台显示的美观。
从一开始就想着在编辑文章时会直接在编辑页显示出前台的部分样式,这样就知道哪些文字用了哪些样式,即节省时间,又方便页面文章编辑。

今天在看一篇为ckeditor插入标签功能时,看到里面提到增加样式的方法,一试发现还真管用,这个难题终于解决了。

第一步


打开include -> inc 目录下的 inc_fun_funAdmin.php

找到

if($GLOBALS['cfg_html_editor']=='ckeditor')
    {
        require_once(DEDEINC.'/ckeditor/ckeditor.php');
        $CKEditor = new CKEditor();
        $CKEditor->basePath = $GLOBALS['cfg_cmspath'].'/include/ckeditor/' ;
        $config = $events = array();
        $config['extraPlugins'] = 'dedepage,multipic,addon';
		if($bbcode)
		{
			$CKEditor->initialized = true;
			$config['extraPlugins'] .= ',bbcode';
			$config['fontSize_sizes'] = '30/30%;50/50%;100/100%;120/120%;150/150%;200/200%;300/300%';
			$config['disableObjectResizing'] = 'true';
			$config['smiley_path'] = $GLOBALS['cfg_cmspath'].'/images/smiley/';
			// 获取表情信息
			require_once(DEDEDATA.'/smiley.data.php');
			$jsscript = array();
			foreach($GLOBALS['cfg_smileys'] as $key=>$val)
			{
				$config['smiley_images'][] = $val[0];
				$config['smiley_descriptions'][] = $val[3];
				$jsscript[] = '"'.$val[3].'":"'.$key.'"';
			}
			$jsscript = implode(',', $jsscript);
			echo jsScript('CKEDITOR.config.ubb_smiley = {'.$jsscript.'}');
		}

        $GLOBALS['tools'] = empty($toolbar[$etype])? $GLOBALS['tools'] : $toolbar[$etype] ;
        $config['toolbar'] = $GLOBALS['tools'];
        $config['height'] = $nheight;
        $config['skin'] = 'kama';
        $CKEditor->returnOutput = TRUE;
        $code = $CKEditor->editor($fname, $fvalue, $config, $events);

其实,你只要搜索

$code = $CKEditor->editor($fname, $fvalue, $config, $events);

这里面的$CKEditor->editor就能找到,因为我搜过没有重复的。

在底部添加一行

$code .= '<link rel="stylesheet" type="text/css" href="/include/ckeditor/contents.css"/>';

至此第一步就做完了,这是参考百度UE编辑器引入样式想到的。

第二步


打开include -> ckeditor 目录下的 contents.css

在里面将你前台为文章写的样式添进去就可以。

比如修远兮的code标签样式代码是:

code {
	color: black;
	background-color: #CDE4FC;
	border: 1px solid #C2BDBD;
	border-radius: 2px;
	padding: 1px 10px;
	}	

直接将这个代码放在contents.css文件里就可以了。

至此,你的前台显示的样式,在后台编辑器中就会显示出来,编辑内容立马感觉神清气爽了。

评论

大侠名号:   验证暗号: 点击我更换图片

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND