[英]Remove an element create by tinymce plugin
I have created a plugin in tinymce that adds an image in front of a text to alert the readers.我在 tinymce 中创建了一个插件,该插件在文本前添加图像以提醒读者。 ( Exemple )
(例)
Insert this div, and modify the content inside works fine, but if my users want to delete that div (all the red border), it's harder.插入这个 div,修改里面的内容可以正常工作,但是如果我的用户想删除那个 div(所有的红色边框),那就更难了。
I want my user to click on the "danger sign" and press DEL to remove the element.我希望我的用户单击“危险标志”并按 DEL 删除该元素。 (actually not possible) How am I suppose to add this in my plugin?
(实际上不可能)我想如何在我的插件中添加这个?
here is my plugin:这是我的插件:
tinymce.PluginManager.add('picto', function (editor, url) {
editor.contentCSS.push(url + '/css/picto.css');
if (tinymce.majorVersion == 5) {
editor.ui.registry.addIcon('addwarning', '<img src="' + url + '/img/attention.png" style="width:24px ; height:24px;">');
}
function addWarning() {
var selection = editor.selection;
var node = selection.getNode();
if (node) {
editor.undoManager.transact(function () {
var content = selection.getContent();
if (!content) {
content = 'Contenu';
}
selection.setContent('<br><div class="alert-modop">' + content + '</div><br>');
});
}
}
here is my js call to editor:这是我对编辑器的 js 调用:
<script>
tinymce.init({
selector: 'textarea#contenuEtask',
relative_urls: false,
language: 'fr_FR',
contextmenu: false,
browser_spellcheck: true,
plugins: "noneditable wordcount autolink anchor fullscreen lists advlist link image hr tabfocus table searchreplace spoiler picto",
toolbar1: 'fullscreen | undo redo | styleselect | bold italic underline| link image table | bullist numlist outdent indent ',
toolbar2: 'alignleft aligncenter alignright alignjustify | fontselect fontsizeselect forecolor backcolor | spoiler-add spoiler-hide spoiler-close | warning-add new-add note-add |hr searchreplace',
noneditable_noneditable_class: "mceNonEditable",
menubar: "",
height: 500,
setup: function (editor) {
editor.on('init', function () {
var tinyHtml = $('.TinyHiddenValue input[type=hidden]').val();
this.setContent(tinyHtml);
});
editor.on('keyup', function () {
var tinyHtml = this.getContent();
$('.TinyHiddenValue input[type=hidden]').val(tinyHtml);
});
editor.on('click', function () {
var tinyHtml = this.getContent();
$('.TinyHiddenValue input[type=hidden]').val(tinyHtml);
});
}
});
tinymce.execCommand('mceRemoveControl', true, 'contenuEtask');
</script>
and my css to create this element:和我的 css 来创建这个元素:
.alert-modop {
background: url("../Sources/Images/attention.svg") no-repeat;
}
Thanks for help.感谢帮助。 o/
o/
For those who would have the same difficulty as me, I have an interesting solution.对于那些和我有同样困难的人,我有一个有趣的解决方案。
I've surrounded my content with a div with content editable to true.我用 div 包围了我的内容,内容可编辑为 true。 This will have no impact on your plugin, but my content can now be selected.
这对您的插件没有影响,但现在可以选择我的内容。
selection.setContent('<br><div contenteditable="true" style="display: inline-block"><div class="alert-modop">' + content + '</div></div><br>');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.