gpt4 book ai didi

jquery - 所见即所得(编辑器)中的标签/占位符

转载 作者:行者123 更新时间:2023-12-01 04:47:40 29 4
gpt4 key购买 nike

我正在开发一个邮件系统来发送大量电子邮件。我为 redactor 制作了一个插件,它向例如添加了一个标签。名。这些标签不应由用户编辑,只能删除。

我的问题是,每次我用 this.code.get () 获取代码时,它都会清理代码并且不会返回我的“标签”。并且标签中的文本也是可编辑的。

有人以前做过这个或者知道如何做吗?

如果可以用另一个所见即所得来完成,那么我愿意接受改变。

初始化编辑器:

$("#redactor").redactor({
buttons: ['html', 'formatting', 'bold', 'italic',
'unorderedlist', 'orderedlist', 'alignment'],
plugins: ['tags'],
toolbarExternal: toolbar,
allowedTags: ['p', 'h1', 'h2', 'pre', 'div', 'span'],
iframe: true,
keydownCallback: function(e)
{
console.log(this.code.get());
},
startCallback: function () {
...
},
destroyCallback: function () {
...
},
blurCallback: function (e) {
...
}
})

插件

var fields = {
"first_name" : "First name",
"last_name" : "Last name",
"e_mail" : "E-mail"
}

RedactorPlugins.tags = function()
{
return {
init: function ()
{
var dropdown = {};
var redactor = this;
$.each(fields, function( key, value ) {
dropdown[key] = { title: value , func: redactor.tags.pointFirstCallback };
});

var button = this.button.add('fields', 'tags');

this.button.addDropdown(button, dropdown);
},
pointFirstCallback: function(buttonName)
{
this.insert.html('<span field="'+buttonName+'" class="tag">'+fields[buttonName]+'</span> ', false);
}

};
};

它在编辑器中的样子

Tags example

最佳答案

我找到了一个解决方案(不是一个漂亮的解决方案,但是一个解决方案......)

var fields = {};
fields["field_first_name"] = "First name";
fields["field_last_name"] = "Last name";
fields["field_e_mail"] = "E-mail";


RedactorPlugins.tags = function () {
return {
init: function () {
var dropdown = {};
var redactor = this;
$.each(fields, function (key, value) {
dropdown[key] = {title: value, func: redactor.tags.tagsCallback};
});

var button = this.button.add('fields', 'Shortcodes');

this.button.addDropdown(button, dropdown);
},
tagsCallback: function (buttonName) {
var elem;
if ($(this.selection.getParent()).is(".tag, span.tag"))
elem = $(this.selection.getParent());
else
elem = $(this.selection.getCurrent())

if ($(elem).is(".tag")) {
this.caret.setAfter($(elem));
this.insert.text(" ");
}

var node = $('<samp />').attr("title", fields[buttonName]).addClass("tag").attr("field_id", buttonName).text(fields[buttonName]);
this.insert.node(node);
this.caret.setAfter(node);
this.code.sync();
}

};
};

初始化编辑器

$("editor").redactor({
buttons: ['formatting', 'bold', 'italic', 'unorderedlist', 'orderedlist', 'alignment', 'link'],
plugins: ['tags', 'fontsize', 'fontcolor', 'underline'],
allowedTags: ['u', 'span', 'p', 'a', 'h1', 'h2', 'h3', 'h4', 'h5', 'pre', "samp", "strong", "em", "li", "ul", "ol", "br"],

keydownCallback: function (e) {
var elem;
if ($(this.selection.getParent()).is(".tag, f"))
elem = $(this.selection.getParent());
else
elem = $(this.selection.getCurrent())

if ($(elem).is(".tag") && (e.keyCode == 8 || e.keyCode == 46)) {
$(elem).remove();
}
else if ($(elem).is(".tag")) {
this.caret.setAfter($(elem));
}

if ($(elem).is(".tag") && (e.keyCode == 37 || e.keyCode == 38 || e.keyCode == 39 || e.keyCode == 40)) {
if (e.keyCode == 37)
this.caret.setBefore($(elem));
else
this.caret.setAfter($(elem));
}

if ($(elem).is(".tag")) {
$(elem).text($(elem).attr("title"));
}
},

keyupCallback: function (e) {
var elem;
if ($(this.selection.getParent()).is(".tag"))
elem = $(this.selection.getParent());
else
elem = $(this.selection.getCurrent())


if ($(elem).is(".tag") && (e.keyCode == 8 || e.keyCode == 46)) {
e.preventDefault();
$(elem).remove();

}
else if ($(elem).is(".tag")) {
e.preventDefault();
this.caret.setAfter($(elem));
}

if ($(elem).is(".tag") && (e.keyCode == 37 || e.keyCode == 38 || e.keyCode == 39 || e.keyCode == 40)) {
e.preventDefault();
if (e.keyCode == 37)
this.caret.setBefore($(elem));
else
this.caret.setAfter($(elem));
}

if ($(elem).is(".tag")) {
$(elem).text($(elem).attr("title"));
}
},

clickCallback: function (e) {
var elem;
if ($(this.selection.getParent()).is(".tag"))
elem = $(this.selection.getParent());
else
elem = $(this.selection.getCurrent())


if ($(elem).is(".tag")) {
this.caret.setAfter($(this.selection.getCurrent()));
}
},

changeCallback: function () {
$("samp.tag").each(function () {
if ($(this).attr("title") !== $(this).text())
$(this).remove();
})
this.code.sync();
},

blurCallback: function (e) {
$("samp.tag").each(function () {
if ($(this).attr("title") !== $(this).text())
$(this).remove();
})
this.code.sync();
}
});

关于jquery - 所见即所得(编辑器)中的标签/占位符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26841889/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com