希望有人能帮我解决我的问题。最近,我试图重建我的仪表板以作出反应,这样我就可以使用编辑器来处理我的博客内容,而不仅仅是一个文本区域。
我正在使用编辑JS作为一名编辑来写博客内容,在我的本地机器上,它像做梦一样工作。我正在做的是写一篇文章,当我在仪表板中单击创建时,我运行。这给了我一个数组,其中包含编辑器中的所有内容,以及它是什么类型的内容的描述。当我收到数组时,我将它发送到一个函数,在那里我循环遍历数组并将每个项目添加到一个字符串中,这样我就可以在我的EJS blogpost文件中显示它。
在我的本地机器上,这就像做梦一样。我能够过滤所有的内容并将其添加到字符串中。当我事后看的时候,这导致了一个正确显示的blogpost。但是当我上传到我的网站时,我只得到段落。其他一切都被过滤掉了。
我希望这里有人能帮我弄清楚为什么这在本地有效,但当我上传到我的网站时就不行了。所有的功能似乎都在工作,但是我的循环只确定段落,而不是标题。所以我最后得到的是一篇只有段落的博客。
作为一个方面,我可以说,当我点击编辑blogpost时,编辑器中的所有数据都显示正确,甚至标题也是如此。
这是我确定每个元素并将其添加到字符串中的功能
convertArrayToString (savedContentData) {
let dataString = "";
savedContentData.blocks.forEach(function(item, idx) {
if (item.type === "header" && item.data.level === 3) {
dataString += '<h3 class="Headline3">' + item.data.text + '</h3>';
} else if (item.type === "header" && item.data.level === 1) {
dataString += '<h1 class="Headline1">' + item.data.text + '</h1>';
} else if (item.type === "header" && item.data.level === 4) {
dataString += '<h4 class="Headline4">' + item.data.text + '</h4>';
} else if (item.type === "header" && item.data.level === 5) {
dataString += '<h5 class="Headline5">' + item.data.text + '</h5>';
} else if (item.type === "paragraph") {
dataString += '<p class="Normal">' + item.data.text + '</p>';
} else if (item.type === "code") {
dataString += '<pre><code class="hljs">' + item.data.code +'</code></pre>';
}
});
return dataString;
}
这是我的回帖功能,在本地运行,但在我的网站上运行不正确。再说一遍。它只检测段落而不是标题,但是在本地机器上它也检测标题。
async onFormSubmit (e) {
e.preventDefault();
const savedContentData = await this.editorInstance.save();
const contentDataString = await this.convertArrayToString(savedContentData);
const newBlogPost = await fetch(URL + 'createblogpost', {
method: 'POST',
headers: {'Content-Type':'application/json'},
body: JSON.stringify({ "blogPost": {
"title" : this.state.title,
"facebookTitle" : this.state.facebookTitle,
"twitterTitle" : this.state.twitterTitle,
"tags" : this.state.tags,
"category" : this.state.category,
"facebookDescription" : this.state.facebookDescription,
"twitterDescription" : this.state.twitterDescription,
"avatar" : this.state.avatar,
"avatarId" : this.state.avatarId,
"postIsPublic" : this.state.public,
"contentRaw" : savedContentData,
"content" : contentDataString
}})
});
const newBlogPostJson = await newBlogPost.json();
this.setState({ statusMessage: newBlogPostJson.message, resStatus: newBlogPostJson.messageType });
this.props.updateBlogPosts();
}
简单地说,当你使用这个函数时。从editor.js中保存(),然后您将得到一个包含所有内容的数组,如下所示:
{
"time": 1550476186479,
"blocks": [
{
"type": "header",
"data": {
"text": "Editor.js",
"level": 2
}
},
{
"type": "paragraph",
"data": {
"text": "Hey. Meet the new Editor. On this page you can see it in action — try to edit this text. Source code of the page contains the example of connection and configuration."
}
},
{
"type": "header",
"data": {
"text": "Key features",
"level": 3
}
},
{
"type": "list",
"data": {
"style": "unordered",
"items": [
"It is a block-styled editor",
"It returns clean data output in JSON",
"Designed to be extendable and pluggable with a simple API"
]
}
},
{
"type": "header",
"data": {
"text": "What does it mean «block-styled editor»",
"level": 3
}
},
{
"type": "paragraph",
"data": {
"text": "Workspace in classic editors is made of a single contenteditable element, used to create different HTML markups. Editor.js <mark class=\"cdx-marker\">workspace consists of separate Blocks: paragraphs, headings, images, lists, quotes, etc</mark>. Each of them is an independent contenteditable element (or more complex structure) provided by Plugin and united by Editor's Core."
}
}
],
"version": "2.8.1"
}
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。