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 aligniconOverrides: { "bold": "<i class="your-custom-icon"></i>" },// if the image option is not set, images are inserted as base64image: {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 所見即所得

總結

以上是生活随笔為你收集整理的vue 所见即所得_适用于Vue.js的轻量级所见即所得HTML编辑器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。