在SAPUI5(Javascript)项目中集成Quill富文本编辑器工具栏
我想将Quill集成到SAPUI5项目中。问题是Quill使用不同的HTML,而我的整个SAPUI5应用程序只有一个div标记,其余的都是Javascript 我已成功地使羽毛笔编辑器在我的应用程序中正常工作,如下所示:在SAPUI5(Javascript)项目中集成Quill富文本编辑器工具栏,javascript,html,sapui5,quill,Javascript,Html,Sapui5,Quill,我想将Quill集成到SAPUI5项目中。问题是Quill使用不同的HTML,而我的整个SAPUI5应用程序只有一个div标记,其余的都是Javascript 我已成功地使羽毛笔编辑器在我的应用程序中正常工作,如下所示: var oPanel = new sap.m.Panel( { content: new sap.ui.core.HTML( { afterRendering: function() { var oRichTextArea = new Quill("#
var oPanel = new sap.m.Panel( {
content: new sap.ui.core.HTML( {
afterRendering: function() {
var oRichTextArea = new Quill("#" + oPanel.sId, {
'toolbar': {
container: "#toolbar"
},
theme: 'snow'
});
oRichTextArea.setHTML("");
oRichTextArea.on('text-change', function(delta, source) {
//do something
});
}
})
});
但是,工具栏的建议是:
<div id="toolbar">
<!-- Add font size dropdown -->
<select class="ql-size">
<option value="10px">Small</option>
<option value="13px" selected>Normal</option>
<option value="18px">Large</option>
<option value="32px">Huge</option>
</select>
<!-- Add a bold button -->
<button class="ql-bold"></button>
</div>
<div id="editor"></div>
但是没有用
我还尝试将推荐的HTML附加为HTML元素的内容,但也没有将按钮连接到文本编辑器:
var oPanelHTML = new sap.m.Panel();
var sInnerHTML = '<div id=toolbar><button class="ql-bold">Bold</button><button class="ql-italic">Italic</button></div><!-- Create the editor container --><div id="' + oPanelResult.sId + '-editor' + '"><div>Hello World!</div><div>Some initial <b>bold</b> text</div> <div><br></div></div>';
$("#" + oPanelHTML.sId).append(sInnerHTML);
这两种方法都不管用。我找到了另一种选择:CKEditor。我复制了如何将富文本编辑器包含到SAPUI5中的相关代码。我将库上传到我的项目中,并在JS片段中使用以下代码
jQuery.sap.require("CKEditorPath.ckeditor");
var oEditor = false;
var bInit = false;
var oPanel = new sap.m.Panel();
var sTextAreaId = oPanel.getId() + "-textarea";
var oTextArea = new sap.m.TextArea(sTextAreaId, {}).addEventDelegate( {
onAfterRendering: function() {
if (oEditor) {
oEditor.destroy();
bInit = false;
}
if (!bInit) {
bInit = true;
oEditor = CKEDITOR.replace(sTextAreaId, {
on: {
instanceReady: function(oEvent) {
/*
* Use CKEditor API to respond to the events you care about, and set your settings
*/
}
});
}
}
});
oPanel.addContent(oTextArea);
return oPanel
这段时间你让它运行了吗?寻找相同的。“那太好了!”zyrex我最终选择了一种运行速度又好又快的。我想我可以帮助你开始这将是伟大的,我已经尝试实施,但没有得到它运行,你是如何做到的?你真的会解决我最大的问题之一!!你把整个库都上传到你的项目中了吗?@zyrex我上传了我如何让它工作的核心。它对我来说非常有效,即使我有一个有20个富文本编辑器的表单。请让我知道它是否适用于您,您可以发布一些关于CKEditorPath的信息,特别是您必须在其中放置哪些库吗?@zyrex因为如果您使用SAP的require函数,CKEditor需要一个全局路径变量,所以我做了以下操作://global variable:var-CKEditor_BASEPATH=“resources/libraries/CKEditor/”;registerModulePath(“CKEditorPath”,CKEDITOR_BASEPATH);上面片段中的require代码将无缝集成。我把整个ckeditor文件夹放在webcontent/resources/librariessorry中以供询问,但我真的很难处理这个文件夹。我已经下载了CK编辑器,我是否必须将所有文件夹上载到..libraries/ckeditor(我下载的包包括适配器、lang、插件、示例、皮肤和一些.js文件…)您是否将所有文件夹上载到您的文件夹中?谢谢大家!@zyrex,是的,我将所有这些文件上传到一个名为“ckeditor”的文件夹中,并声明了一个全局变量(在您的示例中:ckeditor_BASEPATH=“libraries/ckeditor”)。确保使用jQuery.sap.registerModulePath(“CKEditorPath”,CKEDITOR_BASEPATH),并使用jQuery.sap.require(“CKEditorPath.ckeditor”);
var oHTML = new sap.ui.core.HTML( {
content: sInnerHTML
});
jQuery.sap.require("CKEditorPath.ckeditor");
var oEditor = false;
var bInit = false;
var oPanel = new sap.m.Panel();
var sTextAreaId = oPanel.getId() + "-textarea";
var oTextArea = new sap.m.TextArea(sTextAreaId, {}).addEventDelegate( {
onAfterRendering: function() {
if (oEditor) {
oEditor.destroy();
bInit = false;
}
if (!bInit) {
bInit = true;
oEditor = CKEDITOR.replace(sTextAreaId, {
on: {
instanceReady: function(oEvent) {
/*
* Use CKEditor API to respond to the events you care about, and set your settings
*/
}
});
}
}
});
oPanel.addContent(oTextArea);
return oPanel