通过 JavaScript 从 CKEditor 中的 styles-box 中分配一些样式
Assigning some style from the styles-box in CKEditor through JavaScript
如何
通过 JS 模拟用户从样式框中选择某些样式?我想放置一些快捷按钮,一键分配一些流行的样式。
编辑:
- 我不在乎它是编辑器内按钮还是外部按钮。
- 我不想要 css 样式的分配;我想要 CKEditor 样式的赋值(样式框的赋值)。
我没有使用过 CKEditor,但是,我看到了你的问题并认为"弄清楚会很有趣。 好吧,这是我发现的:
(是的,我发现了糟糕的文档,但是,这不是重点......不过,我会给他们注释代码的道具。
///
// function to add buttons that trigger styles to be applied.
//
// editor - CKEDITOR - instance of editor you want command attached to.
// buttonName - String - name of the button
// buttonLabel - String - humane readable name of the button
// commandName - String - name of command, the way to call this command from CKEDITOR.execCommand()
// styleDefinition - StyleDefinition - obj defining the style you would like to apply when this command is called.
///
var addButtonCommand = function( editor, buttonName, buttonLabel, commandName, styleDefiniton )
{
var style = new CKEDITOR.style( styleDefiniton );
editor.attachStyleStateChange( style, function( state )
{
!editor.readOnly && editor.getCommand( commandName ).setState( state );
});
editor.addCommand( commandName, new CKEDITOR.styleCommand( style ) );
editor.ui.addButton( buttonName,
{
label : buttonLabel,
command : commandName
//adding an icon here should display the button on the toolbar.
//icon : "path to img",
});
};
//Get the editor instance you want to use. Normally the same as the ID of the textarea CKEditor binds to.
var editor1 = CKEDITOR.instances.editor1;
//If you look at ckeditor/_source/plugins/styles/default.js you will see that this selects the first element. That list is read into the array 'default'.
var blueTitleStyle = CKEDITOR.stylesSet.registered.default[0];
//Or, you can define the style like this: See http://dev.ckeditor.com/wiki/Components/Styles for more info on style definitions.
var blueTitleStyle = {
name : 'Blue Title',
element : 'h3',
styles : { 'color' : 'Blue' }
};
addButtonCommand(editor1, 'BlueTitle', 'BlueTitle', 'bluetitle', blueTitleStyle);
这里有一个Javascript函数来帮助你的点击事件:
//function used to execute the command. Only used for calling the command when not calling from a button. (Like an A with an onClick bound to it.)
//pulled this function right out of the api.html example in the ckeditor/_samples dir.
function ExecuteCommand( commandName )
{
// Get the editor instance that we want to interact with.
var oEditor = CKEDITOR.instances.editor1;
// Check the active editing mode.
if ( oEditor.mode == 'wysiwyg' )
{
// Execute the command.
// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#execCommand
oEditor.execCommand( commandName );
}
else
{
alert( 'You must be in WYSIWYG mode!' );
}
}
现在,您可以创建如下链接:
<a href='#' class='setBlueTitle'>Set Blue Title</a>
并使用一些jQuery来增加趣味:
<script type="text/javascript">
$(document).ready(function(){
$(".setBlueTitle").onClick(function(e){
//stops the click from changing the page and whatever other default action would happen.
e.preventDefault();
ExecuteCommand('bluetitle');
});
});
</script>
我不是100%确定按钮图标部分。 我没有图标可以尝试。 但是,根据一些帖子,它应该可以正常工作。 无论如何,jQuery 单击绑定是有效的。
应该差不多了! 我不得不做相当多的挖掘才能弄清楚这一点,但看到它工作肯定是令人满意的!
这是一个选项
首先,您可以设置要在 CSS 类中尝试的所需样式。 然后,您可以在单击该按钮时设置测试div 的类名。 下面是一个简单的示例:
测试.css:
.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}
测试.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<input type="button" onclick="document.getElementById('testStyleDiv').className='bold'" value="bold"/>
<input type="button" onclick="document.getElementById('testStyleDiv').className='italic'" value="italic"/>
<div id="testStyleDiv">foo</div>
</body>
</html>
相关文章:
- 如何将HTML id分配给元素,以及如何将JavaScript应用于元素
- 当包含另一个asp文件时,是否也包含所有引用的样式和脚本页面
- 在循环中分配json值时,值被覆盖
- 动态分配GA增强型电子商务跟踪器
- 将jsp文件下拉列表中的选定项分配给一个java变量(比如String selection)
- 将样式表插入iframe
- 跟踪在页面加载时应用内联样式的JavaScript
- 如果文本字段为空,则使用JavaScript应用CSS样式
- 将所有以供应商为前缀的变体分配给样式
- 使用 Javascript 分配样式与在服务器端脚本中分配样式
- 检测使用 javascript 动态分配的 css 样式/属性
- 解构赋值,为DOM元素分配样式
- 如何在Javascript中为元素分配webkit样式
- 如何获取每个元素并为它们分配包含在子元素中的内联样式
- CSS转换取决于样式分配的顺序
- 不能为动态创建的图像分配样式
- 通过jquery分配样式属性
- 分配样式与点击事件不工作
- 通过 JavaScript 从 CKEditor 中的 styles-box 中分配一些样式
- 如何将样式表元素的值分配给变量