element-tiptap 富文本編輯器

1，element-tiptap （只能在vue中使用）

 npm    element-tiptap - npm (npmjs.com)

github  https://leecason.github.io/element-tiptap

 

基本使用

npm install --save element-tiptap

  <el-form-item label="內容">
          <el-tiptap
            v-model="publishForm.content"
            :extensions="extensions"
            placeholder="請輸入文章內容..."
            :height="350"
            lang="zh"
           >
          </el-tiptap>
   </el-form-item>

 

引入 css 和 需要的組件

import "element-ui/lib/theme-chalk/index.css";
import "element-tiptap/lib/index.css";
// 局部引入 富文本編輯器
import {
  // 需要的 extensions
  Doc,
  Text,
  Paragraph,
  Heading,
  Bold,
  Underline,
  Italic,
  Strike,
  ListItem,
  BulletList,
  OrderedList,
  ElementTiptap,
  Image,
} from "element-tiptap";


export default {
  components: {
    "el-tiptap": ElementTiptap,
  },
  name: "Essay",
  data() {
    return {
      // 編輯器擴展
      //它們將被添加到菜單欄和氣泡菜單，你聲明的順序。
      extensions: [
        new Doc(),
        new Text(),
        new Paragraph(),
        new Heading({ level: 5 }),
        new Bold({ bubble: true }), // 在氣泡菜單中渲染菜單按鈕
        new Underline({ bubble: true, menubar: false }), // 在氣泡菜單而不在菜單欄中渲染菜單按鈕
        new Italic(),
        new Strike(),
        new ListItem(),
        new BulletList(),
        new OrderedList(),
      ],
    };
  },
 },