用于增加字母间距的自定义 TinyMCE 4.x 按钮不起作用 [英] Custom TinyMCE 4.x button to increase letter spacing not working
问题描述
我在 http://fiddle.tinymce.com/实现了一个 TinyMCE 按钮来增加字母间距Z9eaab/31.如果在底部的文本区域输入一些文本"，然后选择一些"并多次点击增加字母间距"按钮，字母间距只会增加第一次.如果您选择第二个单词文本"，则每次点击增加字母间距"时间距都会增加.应该的.
我可以从第 9 行的 console.log 中看到，当它不起作用时，是因为当前读取的间距没有反映最后一次增加，所以它只是继续重做第一个.
<form method="post" action="dump.php"><textarea name="内容"></textarea></表单>有人知道这是怎么回事吗?
您正在使用 selection.getNode() 来查找选择的起点和终点的公共父节点.这是不是当前选择中的节点.
在你的情况下，你想要你创建的 ，但你实际上要求的是它封闭的 (随后你'正在检查它当前没有的 letter-spacing CSS 值.
要更正此问题，请在应用格式后获取跨度(之前创建的或新添加的)，并将当前选择设置为它.您可以使用 selection.getStart():
var spanNode = tinyMCE.activeEditor.selection.getStart();tinymce.activeEditor.selection.select(spanNode);在 tinymce.activeEditor.formatter.apply() 之后使用时，它将是正确的跨度.
这是更新后的代码(我做了一些其他格式更改):
<form method="post" action="dump.php"><textarea name="内容"></textarea></表单>演示:http://fiddle.tinymce.com/wYfaab/2>
I implemented a TinyMCE button to increase the letter spacing at http://fiddle.tinymce.com/Z9eaab/31. If you enter the words "some text" in the text area at the bottom and then select "some" and hit the "Increase letter spacing" button multiple times, the letter spacing only increases the first time. If you select the second word, "text," the spacing increases each time you hit "Increase letter spacing." as it should.
I can see from the console.log on line 9 that when it doesn't work it's because the current spacing read doesn't reflect the last increase, so it just keeps redoing the first one.
<script type="text/javascript">
tinymce.PluginManager.add('example', function(editor, url) {
// Add a button that opens a window
editor.addButton('example1', {
text: 'Increase letter spacing',
icon: false,
onclick: function() {
var currentSpacing = new Number($(tinyMCE.activeEditor.selection.getNode()).css('letter-spacing').replace('px', ''));
console.log("spacing read is" + currentSpacing);
currentSpacing = currentSpacing + 1;
tinymce.activeEditor.formatter.register('increaseSpacing', {
inline: 'span',
styles: {
'letter-spacing': currentSpacing + 'px'
}
});
tinymce.activeEditor.formatter.apply('increaseSpacing');
}
});
editor.addButton('example2', {
text: 'Decrease letter spacing',
icon: false,
onclick: function() {
var currentSpacing = new Number($(tinyMCE.activeEditor.selection.getNode()).css('letter-spacing').replace('px', ''));
currentSpacing = currentSpacing - 1;
tinymce.activeEditor.formatter.register('decreaseSpacing', {
inline: 'span',
styles: {
'letter-spacing': currentSpacing + 'px'
}
});
tinymce.activeEditor.formatter.apply('decreaseSpacing');
}
});
// Adds a menu item to the tools menu
editor.addMenuItem('example', {
text: 'Example plugin',
context: 'tools',
onclick: function() {
// Open window with a specific url
editor.windowManager.open({
title: 'TinyMCE site',
url: 'http://www.tinymce.com',
width: 400,
height: 300,
buttons: [{
text: 'Close',
onclick: 'close'
}]
});
}
});
});
tinymce.init({
selector: "textarea",
plugins: "example",
toolbar: "example1 example2 undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});
</script>
<form method="post" action="dump.php">
<textarea name="content"></textarea>
</form>
Does anyone know what's going on?
You're using selection.getNode() which finds the common parent node of the start and end points of the selection. This is not the node that is in the current selection.
In your case you want the <span> you've created, but what you've actually asked for is its enclosing <p> (subsequently you're checking its current letter-spacing CSS value, which it won't have).
To correct this, after applying the formatting, grab the span (either created previously, or newly added), and set the current selection to it. You can do this using selection.getStart():
var spanNode = tinyMCE.activeEditor.selection.getStart();
tinymce.activeEditor.selection.select(spanNode);
When used after the tinymce.activeEditor.formatter.apply(), it will be the correct span.
Here's the updated code (I've made a number of other formatting changes):
<script type="text/javascript">
tinymce.PluginManager.add('example', function(editor, url) {
// Add a button that opens a window
editor.addButton('example1', {
text: 'Increase letter spacing',
icon: false,
onclick: function() {
var currentSpacing = 0;
var $selectedContent = $(tinyMCE.activeEditor.selection.getContent({'format': 'html'}));
if ($selectedContent.is("span") && $selectedContent.css('letter-spacing')) {
currentSpacing = +($selectedContent.css('letter-spacing').replace('px', ''));
}
currentSpacing += 1;
tinymce.activeEditor.formatter.apply('letterSpacing', {
value: currentSpacing + 'px'
});
var spanNode = tinyMCE.activeEditor.selection.getStart();
tinymce.activeEditor.selection.select(spanNode);
}
});
editor.addButton('example2', {
text: 'Decrease letter spacing',
icon: false,
onclick: function() {
var currentSpacing = 0;
var $selectedContent = $(tinyMCE.activeEditor.selection.getContent({'format': 'html'}));
if ($selectedContent.is("span") && $selectedContent.css('letter-spacing')) {
currentSpacing = +($selectedContent.css('letter-spacing').replace('px', ''));
}
currentSpacing -= 1;
tinymce.activeEditor.formatter.apply('letterSpacing', {
value: currentSpacing + 'px'
});
var spanNode = tinyMCE.activeEditor.selection.getStart();
tinymce.activeEditor.selection.select(spanNode);
}
});
// Adds a menu item to the tools menu
editor.addMenuItem('example', {
text: 'Example plugin',
context: 'tools',
onclick: function() {
// Open window with a specific url
editor.windowManager.open({
title: 'TinyMCE site',
url: 'http://www.tinymce.com',
width: 400,
height: 300,
buttons: [{
text: 'Close',
onclick: 'close'
}]
});
}
});
});
tinymce.init({
selector: "textarea",
plugins: "example",
toolbar: "example1 example2 undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
formats: {
'letterSpacing': {
inline: 'span',
styles: {
'letter-spacing': '%value'
}
}
}
});
</script>
<form method="post" action="dump.php">
<textarea name="content"></textarea>
</form>
Demo: http://fiddle.tinymce.com/wYfaab/2
这篇关于用于增加字母间距的自定义 TinyMCE 4.x 按钮不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
