CodeProject 文章 FAQ - 第三部分：如何使用 CodeProject 文章编辑器

目录

• 我应该上传哪些文件？
• 我该如何上传它们？
• 我的文件去哪儿了，我该如何使用它们？
• 我以后还要完成我的文章。我该如何做才能不丢失我的进度？
• 我该如何使用文章编辑器？
  • 您懂 HTML
  • 您不懂 HTML
• 我如何更新我的文章？
• 我如何将 GitHub gist 代码嵌入到我的文章中？
• 我如何将视频嵌入到我的文章中？

1. 我应该上传哪些文件？
    
   • 小的截图（仅限 PNG/GIF/JPEG，最大宽度 640 像素）
   • 包含源文件的 zip 文件（如果适用）
   • 包含示例应用程序的 zip 文件（如果适用）

   请注意：我们接受的图像文件仅限 PNG、GIF 和 JPG。我们的文章编辑器目前不支持 SVG。



2. 我该如何上传它们？
    

   在屏幕最右侧，您会看到一个“上传文件”的标题。下方有一个虚线框，标有“将文件拖放到此处”。只需将您的文件拖放到该框中即可！

   

3. 好的，我上传了我的文件。我的文件去哪儿了，我该如何使用它们？

   可以使用下图中所示的黄色箭头图标添加每个文件。只需将光标放在文章中您希望放置文件的位置，然后单击箭头即可将图像/文件放置在那里。

   

   对于包含代码的 zip 文件，有一个添加文件的快捷方式。在“当前文件”下方，您会看到一个插入按钮和一个链接，标题为“将选定的 zip 文件添加到文章”。只需单击该链接即可自动将格式整齐的文件添加到您的文章中。

   如果您在没有按钮的情况下将文件添加到文章，您将在 HTML 中执行以下操作：

   <ul class="download">
   <li><a href="filname.zip">Download source - X KB</a>
   </li>
   </ul>

   如果您在没有按钮的情况下将图像添加到文章，您只需执行以下操作。（注意：保持 href 中的路径没有不必要的路径很重要。只需在引号内添加文件名）。

   <img src="imagename.png" />

4. 我以后还要完成我的文章。我该如何做才能不丢失我的进度？

   勾选这个非常小的方框

   

   并确保您已保存草稿
   
   

   稍后回来时，请在此处查看“我的文章”

   稍后，当您准备好完成时，请返回 提交页面 并在此处访问您的草稿。

   

5. 我该如何使用文章编辑器？

   您懂 HTML

   懂 HTML 是使用编辑器的理想选择。选择“源代码”按钮可在 HTML 和所见即所得（WYSIWYG）模式之间切换。请注意，类名（例如 table class="ArticleTable"）的字母大小写是特定的。

   使用此源代码按钮在两种模式之间切换

   

   <p>Paragraphs go in paragraph tags.</p>
    
   <ul>
   <li>Unordered lists go in these tags</li>
   </ul>
    
   <code>All your variables, class names, properties, etc. must go inside</code>
    
   <strong>If you really want to bold something, use this tag. But we don't like it</strong>
    
   <em>All file names inside the article must be italicized: .zip, .cs, .html, etc.</em>
   
   <img src="imagename.png" />
   

   标题必须这样使用

   <h2>Main Headings</h2>
   <h3>Sub Heading to h2 Heading - a Sub Topic to the Previous Topic</h3>
   <h4>Sub Heading to h3 Heading - a Sub Topic to the Previous Topic</h4>
   <h5>Sub Heading to h4 Heading - a Sub Topic to the Previous Topic</h5>
    
    
   <div class="Caption">Captions go in this div class</div>
    
    
   <table class="ArticleTable">
   <thead>
   <tr>
   <td>Tables with borders. This cell a bolded and colorized border because of thead</td>
   <td>This cell in this row ALSO has a bolded and colorized border because of thead</td>
   </tr>
   </thead>
   <tr>
   <td>This cell in this row is not bolded and colorized</td>
   <td>Neither is this one</td>
   </tr>
   </table>
    
    
   <table class="ArticleTableNoBorder">
   <tr>
   <td>This table has no borders</td>
   <td>This table has no borders</td>
   </tr>
   </table>

   您不必担心为您的文章着色。我们有一个着色器可以为您处理。如果您的文章已包含着色，请不要担心 - 着色器会清除所有以前的着色，然后再对整个文章进行重新着色。

   <pre lang="cs">int myVar = 0;</pre>

   当前支持的语言有：

   • ASM (lang="asm")
   • ASP (lang="asp")
   • ASP.NET (lang="aspnet")
   • BAT / CMD (lang="bat")
   • C# (lang="cs")
   • C++ (lang="C++")
   • C++/CLI (lang="mc++")
   • COBOL (lang="cobol")
   • CSS (lang="css")
   • Dart (lang="dart")
   • F# (lang="f#")
   • FORTRAN (lang="fortran")
   • HTML (lang="html")
   • Java (lang="java")
   • Kotlin (lang="kotlin")
   • JavaScript (lang="jscript")
   • Lua (lang="lua")
   • MSIL (lang="msil")
   • MIDL (lang="midl")
   • Objective C (lang="objc")
   • Pascal (lang="pascal")
   • PERL (lang="perl")
   • PHP (lang="php")
   • PowerShell (lang="powershell")
   • Python (lang="python")
   • Razor (lang="razor")
   • Scala (lang="scala")
   • Shell (lang="shell")
   • SQL (lang="sql")
   • Swift (lang="swift")
   • Terminal (lang="terminal")
   • TypeScript (lang="typescript")
   • VB.NET (lang="vb.net")
   • VBScript (lang="vbscript")
   • XML (lang="xml")

   其他语言可应要求添加。
   
   着色器适用于 PRE 和 CODE 标签。如果您有一段不希望被着色的文本（或一行），请将 lang 值设置为“text”。

   如果您有多个语言显示相同的代码片段（例如，同一段代码的 C# 和 VB 版本），您可以将多个 PRE 块包装在 <div class="code-samples"> 中，使多个代码块以选项卡形式显示，类似于 MSDN。

   例如

   <div class="code-samples">
   <pre lang="C#">
   ...
   </pre>
   <pre lang="VB.NET">
   ...
   </pre>
   </div>
   

   只需确保正确设置 lang 属性即可。

   您可以在我们的技巧文章 CodeProject 的文章格式化技巧 中看到文章编辑器中额外的 HTML 和 CSS 技巧（例如额外的表格格式、DIV 提示、代码块中使用多种语言以及 LaTeX 格式）。

   重要提示：文章编辑器旨在简化，其理念是我们希望 CodeProject 的所有文章都采用相同的样式，以便于阅读理解。因此，文章编辑器会剥离本文章或 CodeProject 的文章格式化技巧 中未提及的任何 HTML。不要将所有内容都包装在带有疯狂样式的 SPAN 块中：我们的在线编辑器（和我们的人工编辑）很可能会全部剥离。

   此外，在向代码块添加 HTML 标签时要小心。例如，如果您想在代码块中加粗一行

   <div class="code-samples">
   <pre lang="C#">
   ...
   // some C# code
   ...
   </pre>
   <pre lang="VB.NET">
   ...
   ' some VB code
   ...
   </pre>
   </div>

   请确保您逐行手动加粗，如下所示：

   <div class="<b>code-samples</b>">
   <pre lang="C#">
   ...
   // some C# code
   ...
   </pre>
   <pre lang="VB.NET">
   ...
   ' some VB code
   ...
   </pre>
   </div>

   不要在一行中开始加粗标签，并将其延伸到另一行。文章编辑器有时会难以处理它不期望的格式，不仅额外的、意外的格式很可能会被剥离，而且可能还会造成额外的格式问题。如果您遇到任何问题或有任何疑问，请发送电子邮件给我们的人工编辑：submit@codeproject.com。

   您不懂 HTML

   您可以将文章粘贴到编辑器中，并使用按钮进行修改。 加粗， 添加图片， 在段落中将代码标识为变量、类名、属性， 创建列表， 添加链接， 删除原始文本应用程序（如 Word）的自动格式， 插入表格。

   还有剪切、粘贴、重做和撤销。除此以外，我们不建议您使用其他图标。CodeProject 文章的格式非常简单，这也是我们（更重要的是，会员）喜欢的方式。

6. 我如何更新我的文章？

   CodeProject 上的每篇文章都可以由作者在登录后进行修改。只需点击文章标题下方的“更新文章”链接即可。

   

   这将带您进入文章编辑器，在那里您可以进行所需的更改。之后，您的文章将返回“待审核文章”队列，会员和编辑将批准您的更改。

   如果您在 HTML 方面有困难，可以发送您的更新给我们。请使用文章右上角的“获取文章 HTML”链接，点击此链接，然后使用浏览器中的“文件 | 保存”菜单保存文章的 HTML。忽略页面顶部和底部的内容 - 您会看到 HTML 中指向文章实际文本位置的“文章开始”和“文章结束”标签。剥离这些标记上方和下方的一切内容，直接编辑 HTML。完成后，请将更新后的 HTML 和压缩的源代码发送给我们：submit[at]codeproject.com。注意：您的文章和代码必须压缩成 .rar 存档，或者将您的 zip 文件重命名为 MyArticle.nozip（我们的电子邮件提供商不会接受带有 .exe 附件的电子邮件，或带有 .exe 附件的 .zip 文件）。另外，请务必**在电子邮件正文中包含文章的名称和 URL。**

   如果您只想做很小的补充，或者想报告拼写/语法或链接错误，您可以直接以纯文本形式发送。

7. 我如何将 GitHub gist 代码嵌入到我的文章中？

   在源代码模式下将 gist 代码粘贴到文章中。类似这样：

   <script src=https://gist.github.com/ChrisMaunder/f30538d9b526249c2b2beeb7667a6ab5.js></script>

   编辑器会识别它，系统会按预期显示。

8. 我如何将视频嵌入到我的文章中？

   要将视频添加到您的文章中，只需执行以下操作：

   <iframe style="height:250px;width:100%" src="//youtube.com/embed/ABCD_EFG"></iframe>

   在所见即所得模式下查看时，文章编辑器仅显示一个占位符。当前支持的视频托管网站列表是：

   • YouTube (youtube.com, youtu.be)
   • Vimeo
   • Channel 9 (channel9.msdn.com, sec.ch9.ms/ch9)
   • Vine (vine.co/v)

   如果您想从特定时间开始播放 YouTube 视频，请添加 ?start=，如下所示：

   <iframe style="width:560px; height:315px" src="https://www.youtube.com/embed/cbP2N1BQdYc?start=8"></iframe>

   Plus

   • Slideshare (slideshare.net)

   另外，还有一个额外的奖励。

   • JS Fiddle (jsfiddle.net)

   只需将 src URL 替换为嵌入式资源的 URL，设置宽度/高度，剩下的交给我们。