Vue富文本带图片修改图片大小自定义选择项自定义字体

在Vue中使用富文本编辑器，可以使用一些第三方库，比如Quill或者Tinymce。这些库都支持自定义样式，包括字体和图片大小。

在Quill中，可以使用ImageResize模块来实现图片大小的调整。具体代码如下：

import Quill from 'quill';
import ImageResize from 'quill-image-resize-module';

Quill.register('modules/imageResize', ImageResize);

new Quill('#editor', {
  modules: {
    imageResize: {
      displaySize: true
    }
  }
});

对于字体的自定义，可以使用自定义CSS样式或者使用Quill提供的`formats`属性来实现。具体代码如下：

new Quill('#editor', {
  formats: ['bold', 'italic', 'underline', 'strike', 'header', 'blockquote', 'code-block', 'link', 'image', 'video', 'color', 'background', 'font'],
  toolbar: {
    font: {
      options: ['sans-serif', 'serif', 'monospace']
    }
  }
});

在Tinymce中，可以使用插件来实现图片大小的调整和字体的自定义。具体代码如下：

tinymce.init({
  selector: '#editor',
  plugins: 'image advlist autolink lists link charmap print preview hr anchor pagebreak',
  toolbar: 'undo redo | styleselect fontselect fontsizeselect | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
  fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt",
  font_formats: "Arial=arial,helvetica,sans-serif;Courier New=courier new,courier,monospace;Georgia=georgia,times new roman,times,serif",
  image_dimensions: false,
  image_class_list: [
    {title: 'Responsive', value: 'img-responsive'}
  ],
  image_title: true,
  image_description: true,
  image_caption: true,
  image_advtab: true,
  setup: function (editor) {
    editor.on('init', function () {
      editor.formatter.register('custom_font', {inline: 'span', styles: {'font-family': '%value'}});
    });
  }
});

以上是一些简单的例子，可以根据具体需求来进行修改和调整。