vue 所见即所得_适用于Vue.js的轻量级所见即所得HTML编辑器

vue 所见即所得

Vue-Wysiwyg (vue-wysiwyg)

A lightweight WYSIWYG HTML editor for Vue.js.

用于Vue.js的轻量级WYSIWYG HTML编辑器。

In your components:

在您的组件中：

<wysiwyg v-model="myHTML" />

配置选项 (Config options)

All keys are optional.

所有键都是可选的。

{
  // { [module]: boolean (set true to hide) }
  hideModules: { "bold": true },

  // you can override icons too, if desired
  // just keep in mind that you may need custom styles in your application to get everything to align
  iconOverrides: { "bold": "<i class="your-custom-icon"></i>" },

  // if the image option is not set, images are inserted as base64
  image: {
    uploadURL: "/api/myEndpoint",
    dropzoneOptions: {}
  },

  // limit content height if you wish. If not set, editor size will grow with content.
  maxHeight: "500px"
}

Available Modules:

可用模块：

• bold

  胆大

• italic

  斜体

• underline

  强调

• justifyLeft

  justifyLeft

• justifyCenter

  证明中心

• justifyRight

  证明权利

• headings

  标题

• link

  链接

• code

  码

• orderedList

  orderedList

• unorderedList

  无序列表

• image

  图片

• table

  表

• removeFormat

  removeFormat

• separator

  分隔器

Note on the image upload API endpoint:

请注意图片上传API端点：

• Image is uploaded by multipart/form-data

  图像按multipart/form-data上传

• Your endpoint must respond back with a string, the URL for the image - e.g. http://myapp.com/images/12345.jpg

  您的端点必须以字符串(图像的URL)作为响应-例如http://myapp.com/images/12345.jpg

翻译自: https://vuejsexamples.com/a-lightweight-wysiwyg-html-editor-for-vue-js/

vue 所见即所得