Umbraco 7 编辑器tinymce配置

Umbraco 发布了新的版本，Umbraco 7,全新的后台。看上去非常不错。

但的他有编辑器默认配置还是有点满足不了需要，查了一下文档，有些配置可以在 <InstallPath>ConfigtinyMceConfig.config 中修改

在<commands> 中增加一个按钮(文字颜色选择器)，如下

<command>
            <umbracoAlias>forecolor</umbracoAlias>
            <icon>images/editor/forecolor.gif</icon>
            <tinyMceCommand value="" userInterface="false" frontendCommand="forecolor">forecolor</tinyMceCommand>
            <priority>1001</priority>
 </command>

 

当然增加了这个不会有任何效果的，好像他依赖 textcolor 插件，所以在 <plugins> 中启用这个插件

<plugin loadOnFrontend="true">textcolor</plugin>

 

依次类推，就这么简单。

但是，我遇到一个难题，想在 Formats 中分组显示各种样式，默认可以在后台配置 启用编辑器CSS样式解析，但是不分组显示，不是很方便啊。不想动他源码，不然升级麻烦。

后来发现在 <InstallPath>UmbracoJsumbraco.controllers.js 文件中用ajax 的方法加载配置（style_formats: styleFormats），所以。。嘿嘿，修改这个脚本。。

//config value on the data type
var toolbar = editorConfig.toolbar.join(" | ");
var stylesheets = [];
//----- 修改部分 : 开始 -----
	//注释掉 styleFormats,在下面增加部分重新声明并初始化
	//var styleFormats = [];
	//增加 styleFormatsCustom ,替代 styleFormats 用于Custom 项
	var styleFormatsCustom = [];
//----- 修改部分 : 结束 -----
var await = [];

//queue file loading
await.push(assetsService.loadJs("lib/tinymce/tinymce.min.js", $scope));

//queue rules loading
angular.forEach(editorConfig.stylesheets, function(val, key){
	stylesheets.push("/css/" + val + ".css?" + new Date().getTime());
	
	await.push(stylesheetResource.getRulesByName(val).then(function(rules) {
		angular.forEach(rules, function(rule) {
			var r = {};
			r.title = rule.name;
			if (rule.selector[0] == ".") {
				r.inline = "span";
				r.classes = rule.selector.substring(1);
			}
			else if (rule.selector[0] == "#") {
				r.inline = "span";
				r.attributes = { id: rule.selector.substring(1) };
			}
			else {
				r.block = rule.selector;
			}
			//styleFormats.push(r);
			styleFormatsCustom.push(r);
		});
	}));
});
//----- 新增部分 : 开始 -----
var styleFormats = [{title: 'Headers', items: [
	{title: 'h1', block: 'h1'},
	{title: 'h2', block: 'h2'},
	{title: 'h3', block: 'h3'},
	{title: 'h4', block: 'h4'},
	{title: 'h5', block: 'h5'},
	{title: 'h6', block: 'h6'}
]},

{title: 'Blocks', items: [
	{title: 'p', block: 'p'},
	{title: 'div', block: 'div'},
	{title: 'pre', block: 'pre'}
]},

{title: 'Containers', items: [
	{title: 'section', block: 'section', wrapper: true, merge_siblings: false},
	{title: 'article', block: 'article', wrapper: true, merge_siblings: false},
	{title: 'blockquote', block: 'blockquote', wrapper: true},
	{title: 'hgroup', block: 'hgroup', wrapper: true},
	{title: 'aside', block: 'aside', wrapper: true},
	{title: 'figure', block: 'figure', wrapper: true}
]}];
//----- 新增部分 : 结束 -----

var baseLineConfigObj = {
                    mode: "exact",
                    skin: "umbraco",
                    plugins: plugins,
                    valid_elements: validElements,
                    invalid_elements: invalidElements,
                    extended_valid_elements: extendedValidElements,
                    //levee 因为我在customConfig中启用了menubar,所以注释掉下面这行
                    //menubar: false,
                    statusbar: false,
                    height: editorConfig.dimensions.height,
                    width: editorConfig.dimensions.width,
                    maxImageSize: editorConfig.maxImageSize,
                    toolbar: toolbar,
                    content_css: stylesheets,
                    relative_urls: false,
                    style_formats: styleFormats,
     
                };

 

我把它修改成了这样 。。。

//we need to add a timeout here, to force a redraw so TinyMCE can find
//the elements needed
$timeout(function () {
        //----- 新增部分 : 开始 -----
	if(styleFormatsCustom.length > 0)
	{
		styleFormats.push({title: 'Custom', items:styleFormatsCustom});
	}
	//----- 新增部分 : 结束 -----
	tinymce.DOM.events.domLoaded = true;
                        tinymce.init({
                                     ...............

这样，后台在CSS定义的样式都会在Custom项下面咯。当然最近还要 删除 App_DataTEMPClientDependency 文件夹下生成的依赖文件,让系统按这个文件重新生成，才会成生效。

还有 <customConfig> 标签也可能修改编辑器的配置。