给RiPro编辑器添加可视化开关

给RiPro编辑器添加可视化开关

为什么要加这个东西,其实只是为了好看,然后在后台编辑文章的时候能看到发布后什么样的,基本不会有太大的变化。原生:占满了整个屏幕,真的不好看。美化后:这样发布后,也是这个样子的,没什么技术含量,只是加了一个css控制编辑框的宽度而已...

为什么要加这个东西,其实只是为了好看,然后在后台编辑文章的时候能看到发布后什么样的,基本不会有太大的变化。

原生:

占满了整个屏幕,真的不好看。

美化后:

这样发布后,也是这个样子的,没什么技术含量,只是加了一个css控制编辑框的宽度而已。

代码:

以下代码放入functions.php里面

<!–wechatcard start–>

// 可视化编辑器
if (_cao('visual_editor')) {
	add_editor_style( 'assets/css/editor-style.css' );
}

然后把以下代码放入inc/codestar-framework/options/options.theme.php文件里面

        array(
        	'id' => 'visual_editor',
        	'type' => 'switcher',
		'title' => '可视化编辑器',
		'default' => true,
	),

然后在assets/css目录建立一个文件把以下css代码放进去

html .content.mceContentBody {
	font: 16px "Microsoft YaHei", 微软雅黑, Helvetica;
	color: #555;
	line-height: 1.9;
	margin: 10px 20px 10px 10px;
	padding: 12px 5px 5px 5px !important;
	max-width: 756px;
	min-height: 350px;
	border: 1px dashed #ddd;
	position: relative;
}

html .footer_inf_t.mceContentBody,
html .footer_inf_b.mceContentBody {
	font: 16px "Microsoft YaHei", 微软雅黑, Helvetica;
	color: #555;
	line-height: 1.8;
}

html .content.mceContentBody:before {
	content: '正文版心';
	font-size: 13px;
	color: #ddd;
	position: absolute;
	left: 10px;
	top: -12px;
	display: block;
	background: #fff;
}

<!–wechatcard end–>

原文链接:https://www.vipiu.net/archives/2020/02/02/6413.html,转载请注明出处。
0

评论0

请先

会员低至49元,开通享海量VIP资源免费下载 自助开通
显示验证码
没有账号?注册  忘记密码?