围绕SimpleMDE进行包装以使其成为Vue.js组件

Vue.js的fo-markdown-note组件 (fo-markdown-note Component for Vue.js)

fo-markdown-note is a Vue.js component that provides a simple Markdown editor that can be included in your Vue.js project.

fo-markdown-note是一个Vue.js组件，提供了一个简单的Markdown编辑器，可以将其包含在Vue.js项目中。

fo-markdown-note is a thin Vue.js wrapper around the SimpleMDE Markdown editor JavaScript control.

fo-markdown-note是围绕SimpleMDE Markdown编辑器JavaScript控件的薄Vue.js包装器。

View demo 查看演示 Download Source 下载源

fo-markdown note is written in ECMAScript 6th Edition (a.k.a. ECMAScript 2015, a.k.a. ES6) and is intended for inclusion in an ES6 application. No provision has been made for supporting earlier JavaScript editions.

fo-markdown注释是用ECMAScript 6th Edition(又名ECMAScript 2015，又名ES6)编写的，旨在包含在ES6应用程序中。 没有提供支持早期JavaScript版本的条款。

fo-markdown-note is provided as an ES6 module. No provision has been made for older idiosyncratic module formats such as CommonJS or AMD.

fo-markdown-note作为ES6模块提供。 没有为CommonJS或AMD等较早的特殊模块格式提供任何准备。

fo-markdown-note is packaged into a single file using rollup.js. Currently the bundle is not minified or uglified; we intend to do this in a later release.

使用rollup.js将fo-markdown-note打包到一个文件中。 目前，捆绑包尚未缩小或丑化； 我们打算在以后的版本中这样做。

使用fo-markdown-note (Using fo-markdown-note)

To include fo-markdown-note in your project, simply import it using the ES6 import statement:

要将fo-markdown-note包括在项目中，只需使用ES6 import语句将其导入 ：

import FoMarkdownNote from 'fo-markdown-note-bundle.js'

Then include it as a component in your Vue.js model:

然后将其作为组件包含在Vue.js模型中：

var vueModel = new Vue({
    el: '#app',
    components: {
        FoMarkdownNote
    }
})

This will make the <fo-markdown-note> tag available for use within your project's HTML.

这将使<fo-markdown-note>标记可在项目HTML中使用。

属性 (Attributes)

The following attributes can be included in an <fo-markdown-note> tag:

以下属性可以包含在<fo-markdown-note>标记中：

• id   Required; every <fo-markdown-note> instance must have a unique id value

  id必填； 每个<fo-markdown-note>实例必须具有唯一的id值

• note   The initial contents of the note

  note注释的初始内容

Values for the following attributes are expressed using CSS syntax:

以下属性的值使用CSS语法表示：

• bgcolor   The markdown note's background color

  bgcolor降价笔记的背景色

• color   The note's text color

  颜色笔记的文字颜色

• fontFamily   The typeface to use

  fontFamily使用的字体

• fontSize   How big you want the type to be

  fontSize您希望类型多大

大事记 (Events)

on-change is the only event fo-markdown-note explicitly raises.

变更是fo-markdown-note明确引发的唯一事件。

例 (Example)

<fo-markdown-note 
    id="note1"                    
    note="Remember to do what I forgot to do."
    bgcolor="LemonChiffon"
    v-on:change="noteOnChange()">
</fo-markdown-note>

建立降价笔记 (Building fo-markdown-note)

The source code for fo-markdown-note can be found in the src directory. The build process uses the file fo-markdown-note.js plus files from the src/lib directory and the src/node_modules directory.

fo-markdown-note的源代码可以在src目录中找到。 构建过程使用文件fo-markdown-note.js以及src / lib目录和src / node_modules目录中的文件。

When you clone or download the git repo, you don't get the src/node_modules directory. Since this directory can be easily re-generated using npm, there's no reason to include it in the git repo. The src/package.json contains all of the information needed to re-generate the src/node_modules directory. To do this, cd to the src directory and enter the command:

克隆或下载git repo时，没有src / node_modules目录。 由于可以使用npm轻松地重新生成此目录，因此没有理由将其包含在git repo中。 src / package.json包含重新生成src / node_modules目录所需的所有信息。 为此， cd到src目录并输入命令：

npm install

npm will fetch and install all of the node modules listed in package.json.

npm将获取并安装package.json中列出的所有节点模块。

fo-markdown-note is built into a rollup.js bundle using the build.sh script found in the src directory. At this writing, build.sh contains only the command rollup -c. We have the habit of creating a build.sh script no matter how simple its contents so that we never have to remember which command(s) to use for different kinds of projects.

使用src目录中的build.sh脚本将fo-markdown-note内置到rollup.js包中。 在撰写本文时， build.sh仅包含命令rollup -c 。 无论其内容多么简单，我们都有创建build.sh脚本的习惯，因此我们永远不必记住要在不同类型的项目中使用哪个命令。

To build the bundle, cd to the src directory and enter the command

要构建捆绑软件，请cd到src目录并输入命令

./build.sh

After a successful build, you should see the following results:

成功构建之后，您应该看到以下结果：

fo-markdown-note.js → ../dist/fo-markdown-note-bundle.js...
created ../dist/fo-markdown-note-bundle.js in 1.8s

运行测试应用程序 (Running the Test Application)

The included test application can be run from the test directory.

包含的测试应用程序可以从测试目录运行。

As you did with the src directory, you must run npm install to re-generate the node_modules directory used by the test application.

就像使用src目录一样，必须运行npm install来重新生成测试应用程序使用的node_modules目录。

The test application can be run using the http-server npm module. To run it, cd to the test directory and enter the command

可以使用http-server npm模块运行测试应用程序。 要运行它，请cd到测试目录并输入命令

http-server

This will open a simple web server that serves its content on http://localhost:8080.

这将打开一个简单的Web服务器，该服务器在http：// localhost：8080上提供其内容。

依存关系 (Dependencies)

fo-markdown-note's dependencies fall into two categories, those that are bundled into fo-markdown-note-bundle-js and those that are expected to be present in the project in which fo-markdown-note is used.

fo-markdown-note的依赖关系分为两类，一类是捆绑在fo-markdown-note-bundle-js中的组件 ，另一类是预期会存在于使用fo-markdown-note的项目中的组件。

The latter category includes widely-used libraries such as JQuery, Lodash, and Vue.js.

后者包括广泛使用的库，例如JQuery，Lodash和Vue.js。

Bundled into fo-markdown-note-bundle-js are libraries that are unique or specific to fo-markdown-note. Since the main purpose of fo-markdown-note is to wrap SimpleMDE into a Vue.js component, SimpleMDE and its CodeMirror dependency are bundled.

绑定到fo-markdown-note-bundle-js中的是对fo-markdown-note唯一或特定的库。 由于fo-markdown-note的主要目的是将SimpleMDE包装到Vue.js组件中，因此将SimpleMDE及其CodeMirror依赖项捆绑在一起。

You can change which libraries you want to bundle or keep external by editing the src/package.json file and moving them between the dependencies and devDependencies sections, or through use of the external option in src/rollup.config.js. You need to re-build the bundle after making any such changes.

您可以通过编辑src / package.json文件并在dependencies和devDependencies部分之间移动它们，或通过使用src / rollup.config.js中的external选项来更改要捆绑或保留在外部的 库 。 进行任何此类更改后，您需要重新构建捆绑软件。

从NPM获取fo-markdown-note (Getting fo-markdown-note from NPM)

If you want to use the dist/fo-markdown-note-bundle.js in your project and don't think you'll ever need to re-build it, you can obtain it from NPM using the command

如果您想在项目中使用dist / fo-markdown-note-bundle.js ，而又不想重新构建它，则可以使用以下命令从NPM中获取它：

npm install fo-markdown-note

This will place a copy of fo-markdown-note-bundle.js in your project's node_modules directory along with its dependencies. You can then import it into your ES6 JavaScript using the command

这会将fo-markdown-note-bundle.js的副本及其依赖项放置在项目的node_modules目录中。 然后，您可以使用以下命令将其导入到ES6 JavaScript中

import FoMarkdownNote from 'node_modules/fo-markdown-note/fo-markdown-note-bundle.js'

In this scenario, fo-markdown-note-bundle.js will contain all of the bundled dependencies, and the external dependencies will be made known to NPM in the npm/package.json file. This package.json file is different from the one found in the src directory, and is used only for publishing on NPM.

在这种情况下， fo-markdown-note-bundle.js将包含所有捆绑的依赖项，并且外部依赖项将在npm / package.json文件中被NPM知道。 该package.json文件与src目录中的文件不同，仅用于在NPM上发布。

翻译自: https://vuejsexamples.com/wrapper-around-simplemde-to-make-it-into-a-vue-js-component/