开发者社区> 问答> 正文

if/else 在foreach只添加段落而不是标题,在本地中有效

希望有人能帮我解决我的问题。最近,我试图重建我的仪表板以作出反应,这样我就可以使用编辑器来处理我的博客内容,而不仅仅是一个文本区域。

我正在使用编辑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"
}

展开
收起
sossssss 2019-11-28 17:22:05 615 0
0 条回答
写回答
取消 提交回答
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载