vue3使用summernote编辑器

 <script src="/jquery.min.js"></script>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css"
      rel="stylesheet"
    />
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
    <link
      href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote.css"
      rel="stylesheet"
    />
    <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote.js"></script>
 <script src="/summernote-zh-CN.js"></script>

summernote-zh-CN.js

(function($) {
    $.extend(true, $.summernote.lang, {
      'zh-CN': {
        font: {
          bold: '粗体',
          italic: '斜体',
          underline: '下划线',
          clear: '清除格式',
          height: '行高',
          name: '字体',
          strikethrough: '删除线',
          subscript: '下标',
          superscript: '上标',
          size: '字号',
        },
        image: {
          image: '图片',
          insert: '插入图片',
          resizeFull: '缩放至 100%',
          resizeHalf: '缩放至 50%',
          resizeQuarter: '缩放至 25%',
          floatLeft: '靠左浮动',
          floatRight: '靠右浮动',
          floatNone: '取消浮动',
          shapeRounded: '形状: 圆角',
          shapeCircle: '形状: 圆',
          shapeThumbnail: '形状: 缩略图',
          shapeNone: '形状: 无',
          dragImageHere: '将图片拖拽至此处',
          dropImage: '拖拽图片或文本',
          selectFromFiles: '从本地上传',
          maximumFileSize: '文件大小最大值',
          maximumFileSizeError: '文件大小超出最大值。',
          url: '图片地址',
          remove: '移除图片',
          original: '原始图片',
        },
        video: {
          video: '视频',
          videoLink: '视频链接',
          insert: '插入视频',
          url: '视频地址',
          providers: '(优酷, 腾讯, Instagram, DailyMotion, Youtube等)',
        },
        link: {
          link: '链接',
          insert: '插入链接',
          unlink: '去除链接',
          edit: '编辑链接',
          textToDisplay: '显示文本',
          url: '链接地址',
          openInNewWindow: '在新窗口打开',
        },
        table: {
          table: '表格',
          addRowAbove: '在上方插入行',
          addRowBelow: '在下方插入行',
          addColLeft: '在左侧插入列',
          addColRight: '在右侧插入列',
          delRow: '删除行',
          delCol: '删除列',
          delTable: '删除表格',
        },
        hr: {
          insert: '水平线',
        },
        style: {
          style: '样式',
          p: '普通',
          blockquote: '引用',
          pre: '代码',
          h1: '标题 1',
          h2: '标题 2',
          h3: '标题 3',
          h4: '标题 4',
          h5: '标题 5',
          h6: '标题 6',
        },
        lists: {
          unordered: '无序列表',
          ordered: '有序列表',
        },
        options: {
          help: '帮助',
          fullscreen: '全屏',
          codeview: '源代码',
        },
        paragraph: {
          paragraph: '段落',
          outdent: '减少缩进',
          indent: '增加缩进',
          left: '左对齐',
          center: '居中对齐',
          right: '右对齐',
          justify: '两端对齐',
        },
        color: {
          recent: '最近使用',
          more: '更多',
          background: '背景',
          foreground: '前景',
          transparent: '透明',
          setTransparent: '透明',
          reset: '重置',
          resetToDefault: '默认',
        },
        shortcut: {
          shortcuts: '快捷键',
          close: '关闭',
          textFormatting: '文本格式',
          action: '动作',
          paragraphFormatting: '段落格式',
          documentStyle: '文档样式',
          extraKeys: '额外按键',
        },
        help: {
          insertParagraph: '插入段落',
          undo: '撤销',
          redo: '重做',
          tab: '增加缩进',
          untab: '减少缩进',
          bold: '粗体',
          italic: '斜体',
          underline: '下划线',
          strikethrough: '删除线',
          removeFormat: '清除格式',
          justifyLeft: '左对齐',
          justifyCenter: '居中对齐',
          justifyRight: '右对齐',
          justifyFull: '两端对齐',
          insertUnorderedList: '无序列表',
          insertOrderedList: '有序列表',
          outdent: '减少缩进',
          indent: '增加缩进',
          formatPara: '设置选中内容样式为 普通',
          formatH1: '设置选中内容样式为 标题1',
          formatH2: '设置选中内容样式为 标题2',
          formatH3: '设置选中内容样式为 标题3',
          formatH4: '设置选中内容样式为 标题4',
          formatH5: '设置选中内容样式为 标题5',
          formatH6: '设置选中内容样式为 标题6',
          insertHorizontalRule: '插入水平线',
          'linkDialog.show': '显示链接对话框',
        },
        history: {
          undo: '撤销',
          redo: '重做',
        },
        specialChar: {
          specialChar: '特殊字符',
          select: '选取特殊字符',
        },
      },
    });
  })(jQuery);
  

summernote.vue组件

<template>
  <div class="summernoteBox">
    <div :id="id"></div>
  </div>
</template>
<script>
// import tools from '@/js/tools.js';
export default {
  props: {
    value: {
      type: String,
      default: "",
    },
    id: {
      type: String,
      default: "summerNOte" + new Date().getTime(),
    },
  },
  watch: {
    id: {
      handler(newval) {
        //    console.log(newval)
      },
      immediate: true,
    },
  },
  data() {
    return {
      // id:'summerNOte'+ new Date().getTime(),
    };
  },
  mounted() {
    var self = this;
    self.summernoteInit().then(() => {
      // summernote发生改变
      $("#" + self.id).on(
        "summernote.change",
        function (we, contents, $editable) {
          self.summerNoteChange();
        }
      );
      console.log(self.value, "self.value");
      //初始赋值
      $("#" + self.id).summernote("code", self.value);
    });
  },
  methods: {
    summernoteInit() {
      //编辑器初始化
      var self = this;
      return new Promise((resolve) => {
        //初始化摘要内容富文本编辑器
        $("#" + self.id).summernote({
          lang: "zh-CN", //语言
          placeholder: "请输入内容", //提示语
          height: 500, //高度
          //  'auto',//宽度  也可以指定宽度
          htmlMode: true,
          toolbar: [
            //工具栏配置
            ["style", ["style"]],
            ["font", ["bold", "underline", "clear"]],
            ["fontsize", ["fontsize"]],
            ["fontname", ["fontname"]],
            ["color", ["color"]],
            ["para", ["ul", "ol", "paragraph", "height", "hr"]],
            ["table", ["table"]],
            ["insert", ["link", "picture", "video"]],
            ["view", ["fullscreen", "codeview", "help"]],
          ],
          fontSizes: ["12", "14", "16", "18", "20", "24", "28", "32", "36","48"],
          fontSizeUnits: ["px"],
          fontNames: [
            //字体类型配置
            "宋体",
            "微软雅黑",
            "楷体",
            "黑体",
            "隶书",
            "Arial",
            "Arial Black",
            "Comic Sans MS",
            "Courier New",
            "Georgia",
            "Georgia2",
            "Merriweather",
          ],
          callbacks: {
            //回调函数
            onSubmit: function () {
              // vm.richContent = $('#summernote').summernote('code')
            },
            onKeyup: function () {
              //
            },
          },
        });
        resolve();
      });
    },
    summerNoteChange() {
      //富文本编辑器发生改变
      var self = this;
      self.$emit("input", $("#" + self.id).summernote("code"));
    },
  },
};
</script>
<style scoped>
.summernoteBox :deep(.note-editable ul) {
  padding: 0 20px;
}
.summernoteBox :deep(.note-editable ul li) {
  list-style: disc;
}
.summernoteBox :deep(.note-editable ol li) {
  list-style: decimal;
}
.summernoteBox :deep(.note-editable ol) {
  padding: 0 20px;
}
</style>

页面使用

<template>
  <div class="box">
    <!-- :id="'summerNote' + new Date().getTime()" -->
    <SummerNote id="summerNote" :value="text"/>
  </div>
</template>
<script>
import { defineComponent, reactive, toRefs, onMounted } from "vue";
import SummerNote from "/@/components/summernote.vue";
export default defineComponent({
  name: "template",
  components: {
    SummerNote,
  },
  setup() {
    const state = reactive({
      text:'默认文字'
    });
    //页面加载
    onMounted(() => {
      //$("#summerNote").summernote("code");
      // setTimeout(() => {
      //   let markupStr = $("#summerNote").summernote("code");
      //   console.log(markupStr,"富文本框内容");
      // }, 3000);
    });
    return {
      ...toRefs(state),
    };
  },
});
</script>
<style lang="less" scoped>
.box{
  width:1600px;
  margin:0 auto;
}
// #summerNote{
//   width:500px;
// }
</style>