对于标准文本区域,我使用此插件创建一个占位符。我怎样才能扩展 tinymce,以便这也以这种方式工作。
例如,默认值是从 textarea 属性中读取的,然后在用户专注于 iframe 时清除。
与CKEditor类似:http://alfonsoml.blogspot.com.es/2012/04/placeholder-text-in-ckeditor.html
我重构了Tom Duke的代码,使其使用jquery插件在TinyMCE4上工作
$('textarea.tinymce').tinymce({
script_url: _base + '/assets/js/tinymce/tinymce.min.js',
theme: "modern",
setup: function(editor) {
// Set placeholder
var placeholder = $('#' + editor.id).attr('placeholder');
if (typeof placeholder !== 'undefined' && placeholder !== false) {
var is_default = false;
editor.on('init', function() {
// get the current content
var cont = editor.getContent();
// If its empty and we have a placeholder set the value
if (cont.length === 0) {
editor.setContent(placeholder);
// Get updated content
cont = placeholder;
}
// convert to plain text and compare strings
is_default = (cont == placeholder);
// nothing to do
if (!is_default) {
return;
}
})
.on('focus', function() {
// replace the default content on focus if the same as original placeholder
if (is_default) {
editor.setContent('');
}
})
.on('blur', function() {
if (editor.getContent().length === 0) {
editor.setContent(placeholder);
}
});
}
}
});
如果没有占位符属性,我会收到错误。
我结合了这个答案中的代码:jQuery 有 Attr 检查元素上是否有属性来获取下面处理该场景的修改代码:
setup: function(ed) {
// Set placeholder
var tinymce_placeholder = $('#'+ed.id);
var attr = tinymce_placeholder.attr('placeholder');
// For some browsers, `attr` is undefined; for others,
// `attr` is false. Check for both.
if (typeof attr !== 'undefined' && attr !== false) {
var is_default = false;
ed.onInit.add(function(ed) {
// get the current content
var cont = ed.getContent();
// If its empty and we have a placeholder set the value
if(cont.length == 0){
ed.setContent(tinymce_placeholder.attr("placeholder"));
// Get updated content
cont = tinymce_placeholder.attr("placeholder");
}
// convert to plain text and compare strings
is_default = (cont == tinymce_placeholder.attr("placeholder"));
// nothing to do
if (!is_default){
return;
}
});
ed.onMouseDown.add(function(ed,e) {
// replace the default content on focus if the same as original placeholder
if (is_default){
ed.setContent('');
}
});
}
}
答案对我不起作用,但这是我(对我来说)基于上述答案并使用onchange_callback的工作代码。希望它对某人有所帮助!
onchange_callback : function(ed){
var tinymce_placeholder = $('#' + ed.id).attr("placeholder");
setTimeout(function () {
var content = ed.getContent().replace(/<p>|</p>/g, '');
if (content == '') {
ed.setContent(tinymce_placeholder);
}
}, 200);
},
setup: function (ed) {
// Set placeholder
var tinymce_placeholder = $('#' + ed.id);
if (tinymce_placeholder.length) {
ed.onInit.add(function (ed) {
var cont = ed.getContent();
if (cont.length == 0) {
ed.setContent(tinymce_placeholder.attr("placeholder"));
}
});
ed.onMouseDown.add(function (ed, e) {
var content = ed.getContent().replace(/<p>|</p>/g, '');
if (content == tinymce_placeholder.attr("placeholder")) {
ed.setContent('');
}
});
}
}
试试这段代码:
为tinyMCE内联编辑器添加占位符文本:
$scope.ContentOptions = {
setup: function(editor) {
editor.on('init', function () {
// Default classes of tinyMCE are a bit weird
// I add my own class on init
// this also sets the empty class on the editor on init
tinymce.DOM.addClass( editor.bodyElement, 'content-editor' );
});
// You CAN do it on 'change' event, but tinyMCE sets debouncing on that event
// so for a tiny moment you would see the placeholder text and the text you you typed in the editor
// the selectionchange event happens a lot more and with no debouncing, so in some situations
// you might have to go back to the change event instead.
editor.on('selectionchange', function () {
if ( editor.getContent() === "" ) {
tinymce.DOM.addClass( editor.bodyElement, 'empty' );
} else {
tinymce.DOM.removeClass( editor.bodyElement, 'empty' );
}
});
}}
视图中的 HTML 部件
<div data-placeholder="Content..." id="post-content-editor" ui-tinymce="ContentOptions" ng-model="newPostContentModel"></div>
最后是CSS来创建占位符文本(它从data-placeholder="Content..."获取它。但是你可以直接在CSS中做到这一点
.content-editorr:before {
display: none;
}
.content-editor.empty:before {
display: block;
position: absolute;
content: attr(data-placeholder);
}
我在github上找到了它:
https://github.com/angular-ui/ui-tinymce/issues/197
我尝试了许多占位符解决方案,发现这个解决方案非常有用,因为它满足占位符的所有要求。我认为这是最好的解决方案,
对于 tinymce 4,我对未定义 ed.onInit 的事件有问题。 Tinymce 4 使用 ed.on('event' , callback) 代替。这是我的实现。我还使用焦点而不是鼠标按下作为清除编辑器时要侦听的事件,因为 mousdown 由于某种原因不起作用。
setup : function(ed) {
// Set placeholder
var tinymce_placeholder = $('#'+ed.id);
var attr = tinymce_placeholder.attr('placeholder');
// For some browsers, `attr` is undefined; for others,
// `attr` is false. Check for both.
if (typeof attr !== 'undefined' && attr !== false) {
var is_default = false;
ed.on('init' , function(ed) {
// get the current content
var cont = ed.target.getContent();
// If its empty and we have a placeholder set the value
if(cont.length == 0){
ed.target.setContent(tinymce_placeholder.attr("placeholder"));
// Get updated content
cont = tinymce_placeholder.attr("placeholder");
}
// convert to plain text and compare strings
is_default = (cont == tinymce_placeholder.attr("placeholder"));
// nothing to do
if (!is_default){
return;
}
});
ed.on('focus', function(ed,e) {
// replace the default content on focus if the same as original placeholder
if (is_default){
ed.target.setContent('');
}
});
}
}
希望这对其他答案有问题的任何人有所帮助
我找到了另一种永远不会弄乱文本区域内容的方法。我喜欢这样,这样我就不必有特殊条件来阻止用户提交只是占位符的内容。文章在这里找到,但我添加了 onclick 方法,以便标签是可点击的——如果没有这个,用户必须点击<label>
下方或侧面。这适用于TinyMCE 4。
风格
.tinyMCEPlaceholder {
top: 45px;
left: 9px;
z-index: 1;
color: #bbbbbb;
position: absolute;
cursor:text;
}
.html
<div id="holder">
<label for="tinymce" onclick="tinymce.execCommand('mceFocus',false,'area_id');">Type your article</label>
<textarea id="comments" id="area_id" class="tinymce" name="comments" cols="40" rows="10"></textarea>
</div>
<!-- or -->
<div id="holder">
<label for="tinymce" onclick="tinymce.get('area_id').fire('focus',{},false);">Type your article</label>
<textarea id="comments" id="area_id" class="tinymce" name="comments" cols="40" rows="10"></textarea>
</div>
TinyMCE 设置
// setup
setup : function(ed) {
/* toggle all labels that have the attr 'tinymce' */
ed.on('init', function() {
if(ed.getContent() != '') {
$('label[for="tinymce"]').hide();
}
$(ed.getDoc()).contents().find('body').focus(function(){
$('label[for="tinymce"]').hide();
});
$(ed.getDoc()).contents().find('body').blur(function(){
if(ed.getContent() == '') {
$('label[for="tinymce"]').show();
}
});
});
},
这个TinyMCE插件似乎是一个解决方案:
https://github.com/mohan/tinymce-placeholder
希望对您有所帮助!
Gaurav的解决方案工作正常,但需要一些更改。我使用此修改使其近乎完美:
editor.on("init", function(){
tinymce.DOM.addClass( editor.bodyElement, 'content-editor' );
if ( editor.getContent() === "" ) {
tinymce.DOM.addClass( editor.bodyElement, 'empty' );
var pseudoBeforeHeight = window.getComputedStyle(editor.bodyElement, ':before').height;
tinymce.DOM.setStyles( editor.bodyElement, { 'height': pseudoBeforeHeight } );
}
});
我通过在元素上添加属性textarea
data-mce-placeholder
轻松添加了占位符.
data-mce-placeholder
在编辑器的iframe中引用body::before
文本CSS
<textarea
ng-model="textContent",
ng-change="save()",
style="height: 360px; max-height: 50vh; border: none !important",
ui-tinymce="tinymceOptions"
data-mce-placeholder="Input your text here"
></textarea>