我的应用程序需要内联编辑内容。 Tinymce编辑器应在单击按钮时内联显示。
一切正常,单击按钮时将显示内联编辑器,并且内容也将突出显示以进行编辑。但是,当我开始编辑时,说要使文本变为粗体,编辑器就消失了,并显示出如下所示的控制台错误;
zone.js:199 未捕获的TypeError:无法读取null的属性“ childNodes”
at Object.read$1 [as read] (tinymce.js:15050)
at Object.createFromEditor (tinymce.js:15095)
at Object.add (tinymce.js:15266)
at Editor.addNonTypingUndoLevel (tinymce.js:15158)
at EventDispatcher.fire (tinymce.js:25978)
at Editor.fire (tinymce.js:26084)
at tinymce.js:11940
at tinymce.js:2206
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
问题仅在于内联编辑器,另一个则工作正常。但是要求是使用内联编辑器。
这是我用来显示内联tinymce的函数:
openEditor(elementid: string) {
let selector = '#' + elementid;
let strcontent = $(selector).html();
var plugins_str = 'paste,save,charmap,link,autoresize';
var toolbar_icons = "bold | italic | link unlink";
tinymce.baseURL = '../../../assets';
tinymce.init({
selector: selector,
cache_suffix: "?v=4",
entity_encoding: "raw",
valid_elements: "*[*]",
menubar: false,
toolbar1: toolbar_icons,
plugins: [ plugins_str ],
statusbar: false,
inline: true,
resize: true,
initialValue: {},
autofocus: true,
save_onsavecallback: function (e) {
var savecontent = e.getContent();
},
save_oncancelcallback: function (e) {
e.remove();
var corresp_elm = document.getElementById(elementid);
corresp_elm.outerHTML = that.editor_in_data;
that.reinstateEditableElements();
}
});
}