Visual Studio——如何用HTML标签快速包装文本?

The new HTML editor in VS 2013 removed WYSIWYG mode and the Formatting toolbar is disabled. This is for the good, generally, but it also made simple edits like making some text bold or italics harder.

在VS 2013中新的HTML编辑器删除了WYSIWYG模式，并且禁用了格式工具栏。一般来说，这是为了好的目的，但它也使一些简单的编辑变得更困难，比如使一些文本加粗或斜体。

What I currently do to make some text bold is:

我现在做的一些粗体文字是:

1. Type <b>
2. 类型< b >
3. VS autocompletes </b>
4. 对自动完成< / b >
5. I select the end tag and press Ctrl+X
6. 我选择结束标签并按Ctrl+X
7. I go to the end of the text that should be bold and press Ctrl+V
8. 我到文本的结尾应该是粗体并按Ctrl+V。

This is much less convenient than just pressing Ctrl+B or something similar. I know there is the "Surround with" command in Visual Studio, there are customizable keyboard shortcuts etc. so my hope is that the Ctrl+B functionality can somehow be achieved in Visual Studio. Is there some clever trick or am I possibly missing something other, rather simple?

这比按Ctrl+B或类似的操作要方便得多。我知道Visual Studio中有“around with”命令，有可定制的键盘快捷键等等，所以我希望在Visual Studio中可以实现Ctrl+B的功能。有什么聪明的把戏吗?还是我可能漏掉了别的东西，很简单?

5 个解决方案

#1

Web Essentials 2013 has a Surround with tag... feature (Alt+Shift+W) that is more fluid than the built-in Surround with. I'm probably just going to stick with it as I am using Web Essentials anyway.

2013年的Web Essentials有一个标签……功能(Alt+Shift+W)比内置环绕更流畅。我可能会坚持使用它，因为我正在使用Web Essentials。

#2

You could also add a custom snippet (I don't know why Visual Studio didn't provide a snippet for the strong tag by default).

您还可以添加一个自定义代码片段(我不知道为什么Visual Studio没有默认为strong标记提供代码片段)。

To create the snippet:

创建代码片段:

1) Create a text file in C:\Users\USERNAME\Documents\Visual Studio 2013\Code Snippets\Visual Web Developer\My HTML Snippets named strong.snippet

1)创建一个文本文件在C:\Users\USERNAME\Documents\Visual Studio 2013 \ \ Visual Web Developer \ HTML代码片段片段strong.snippet命名

2) Place the following text inside the text file:

2)在文本文件中放置以下文本:

<CodeSnippet Format="1.1.0" xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
  <Header>
    <Title>strong</Title>
    <Author>YOUR NAME</Author>
    <Shortcut>strong</Shortcut>
    <Description>Markup snippet for a strong text</Description>
    <SnippetTypes>
      <SnippetType>Expansion</SnippetType>
      <SnippetType>SurroundsWith</SnippetType>
    </SnippetTypes>
  </Header>
  <Snippet>
    <Code Language="html"><![CDATA[<strong>$selected$$end$</strong>]]></Code>
  </Snippet>
</CodeSnippet>

To use the snippet:

使用代码片段:

1) Select your text

1)选择您的文本

2) Right-click text and choose "Surround With...", or press Ctrl-K,Ctrl-S

2)右键点击文本，选择“环绕……”、或按Ctrl-K ctrl s

3) Open "My HTML Snippets" folder in the popup menu and choose your strong snippet

3)在弹出菜单中打开“我的HTML片段”文件夹，选择您的强片段

#3

A good suggestion from How to quickly surround text with html markup in vs 2008? is this:

在vs 2008中，如何快速地将文本与html标记结合起来，这是一个很好的建议?是这样的:

1. Select your text
2. 选择您的文本
3. Press Ctrl-X to cut it to clipboard
4. 按Ctrl-X将其剪切到剪贴板
5. Type your <strong> tag, which Visual Studio will automatically close with your cursor remaining in the middle of the start and end tag
6. 输入您的标记，Visual Studio将自动关闭该标记，您的光标将保持在开始和结束标记的中间
7. Press Ctrl-V to re-insert your text between the tags
8. 按Ctrl-V重新插入标签之间的文本。

#4

Create an HTML Custom Code-Snippet in Visual Studio

1. Create a new .xml file

2. Use the following snippet template:

1。创建一个新的.xml文件2。使用以下代码片段模板:

 <CodeSnippet Format="1.1.0" xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
  <!-- HTML Anchor Snippet -->
  <Header>
    <Title>P</Title>
    <Author>Microsoft Corporation</Author>
    <Shortcut>P</Shortcut>
    <Description>Markup snippet for a Paragraph</Description>
    <SnippetTypes>
      <SnippetType>Expansion</SnippetType>
      <SnippetType>SurroundsWith</SnippetType>
    </SnippetTypes>
  </Header>
  <Snippet>
    <Declarations>
      <Literal>
        <ID>Paragraph</ID>
        <ToolTip>Paragraph</ToolTip>
        <Default>p</Default>
      </Literal>
      <Literal>
        <ID>selected</ID>
        <ToolTip>content</ToolTip>
        <Default>content</Default>
      </Literal>
    </Declarations>
    <Code Language="html"><![CDATA[<p>$selected$</p>$end$]]></Code>

  </Snippet>
</CodeSnippet>

3. Give a name to your snippet, and save-it-as using(YourFileName.snippet) extention

3所示。为您的代码片段提供一个名称，并使用(您的文件名.snippet)扩展来保存它

Add snippet to Visual Studio

1. Use Code Snippets manager: Go to: Tools/Code Snippets Manager/

2. Choose HTML from a DropDown list, and open HTML folder by DoubleClick on it.

4. Click Import button, and browse to your newly .snippet file

1。使用代码片段管理器:转到:工具/代码片段管理器/ 2。从下拉列表中选择HTML，并通过双击打开HTML文件夹。4所示。单击Import按钮，并浏览到您的新.snippet文件。

Use Your Custom Snippet

1. Select some text in the Text-Editor.

1。在文本编辑器中选择一些文本。

2. use combination of CTRL+K   CTRL+X to open Insert Snippet dialog window

2。使用CTRL+K CTRL+X组合打开插入片段对话框窗口

3. Choose HTML from a DropDown list where you previously saved your .snipped file

4. Choose your custom snippet from a list. It should now wrap your text with <p></p> tag for example

3所示。从先前保存. sniked文件4的下拉列表中选择HTML。从列表中选择您的自定义代码片段。它现在应该用

标签来包装文本

★ Follow the above procedure again for creating a new snippents.

★遵循上述程序重新创建一个新的snippents。

☀ Read More about custom snippets

☀阅读更多关于自定义代码片段

☕ HINT (just like in Sublime text editor build in feature)
You could create a Lorem Ipsum custom snippet just like this in a seconds:

☕提示(就像在崇高的文本编辑器建立特性)可以创建一个Lorem Ipsum自定义代码片段就像这秒:

<CodeSnippet Format="1.1.0" xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
  <!-- HTML Anchor Snippet -->
  <Header>
    <Title>LoremIpsum</Title>
    <Author>Microsoft Corporation</Author>
    <Shortcut>Lorem</Shortcut>
    <Description>Markup snippet for a Lorem Ipsum</Description>
    <SnippetTypes>
      <SnippetType>Expansion</SnippetType>
      <SnippetType>SurroundsWith</SnippetType>
    </SnippetTypes>
  </Header>
  <Snippet>
    <Declarations>
      <Literal>
        <ID>Lorem</ID>
        <ToolTip>LoremIpsum</ToolTip>
        <Default>Lorem</Default>
      </Literal>
      <Literal>
        <ID>selected</ID>
        <ToolTip>content</ToolTip>
        <Default>content</Default>
      </Literal>
    </Declarations>
    <Code Language="html"><![CDATA[$selected$Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit nunc eget consectetur aliquet. Vivamus feugiat ipsum ex, eget egestas erat condimentum eget. Suspendisse luctus velit ac purus venenatis imperdiet sed vel mauris. Ut tempus risus elit, eget molestie purus hendrerit a. Curabitur ac urna posuere, lacinia neque quis, facilisis libero. Cras viverra tellus eu lacus hendrerit, in auctor neque sodales. Pellentesque et finibus lectus. Vestibulum pulvinar, lorem in dignissim fermentum, nunc ipsum luctus arcu, non malesuada nisi sem nec libero. Integer eget arcu interdum, elementum lacus et, ornare arcu. Phasellus quis nulla non enim porta ornare non eget ex. Mauris at purus sed ipsum congue facilisis. Donec tempor, eros ac posuere tempus, velit sapien faucibus augue, vitae convallis augue nulla ut felis. Nunc sapien libero, dictum non finibus nec, rutrum at odio. Nulla facilisi. $end$]]></Code>
  </Snippet>
</CodeSnippet>

☕ HINT
You Can create almost any code snippet you want by providing a language="" property, and by setting up right description in<code> section
The following is the example of a JavaScript Alert() function code snippet

☕提示您可以创建几乎任何你想要的代码片段通过提供一个语言= "属性,并通过建立正确的 <代码> 部分中描述下面的例子是一个JavaScript Alert()函数的代码片段

<Code Language="JavaScript"><![CDATA[alert($selected$);$end$]]></Code>

#5

Click on the tag you want to wrap, then hit Ctrl+Alt+W.

单击要包装的标签，然后按Ctrl+Alt+W。