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(),
      ],
    };
  },
 },