在script标签中引用tiptap

louisliao_1981

已于 2023-10-07 09:50:38 修改

阅读量355

点赞数

分类专栏：富文本文章标签： tiptap 富文本

于 2023-09-28 17:33:25 首次发布

本文链接：https://blog.csdn.net/LOUISLIAOXH/article/details/133387494

版权

富文本专栏收录该内容

1 篇文章 0 订阅

订阅专栏

环境

node v16.13.1
npm 8.1.2

package.json

{
  "name": "mylitta",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "rimraf  lib/ && tsc && babel lib --out-dir lib && rimraf  dist/ && rollup -c"
  },
  "devDependencies": {
    "@babel/core": "^7.23.0",
    "@babel/preset-env": "^7.22.20",
    "@rollup/plugin-babel": "^6.0.3",
    "@rollup/plugin-commonjs": "^25.0.4",
    "@rollup/plugin-node-resolve": "^15.2.1",
    "@rollup/plugin-replace": "^5.0.2",
    "@rollup/plugin-terser": "^0.4.3",
    "babel-cli": "^6.26.0",
    "babel-plugin-component": "^1.1.1",
    "rimraf": "^5.0.5",
    "rollup": "^3.29.3",
    "rollup-plugin-dts": "^6.0.2",
    "rollup-plugin-postcss": "^4.0.2",
    "rollup-plugin-typescript2": "^0.35.0",
    "rollup-plugin-vue": "^6.0.0",
    "sass-loader": "^13.3.2",
    "typescript": "^5.2.2",
    "vue-template-compiler": "^2.7.14"
  },
  "dependencies": {
    "@tiptap/extension-bold": "^2.1.11",
    "@tiptap/extension-color": "^2.1.11",
    "@tiptap/extension-text-style": "^2.1.11",
    "@tiptap/pm": "^2.1.11",
    "@tiptap/starter-kit": "^2.1.11",
    "@tiptap/vue-3": "^2.1.11"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["dom", "esnext"],
    "outDir": "lib",
    "declaration": true,
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "react"
  },
  "include": ["src"]
}

rollup.config.js

import typescript from 'rollup-plugin-typescript2';
import { babel } from '@rollup/plugin-babel';
import  terser  from '@rollup/plugin-terser';
import commonjs from '@rollup/plugin-commonjs';
import nodeResolve from '@rollup/plugin-node-resolve';

export default {
  input: 'src/main.ts',
  output: {
    name: 'tipTapEditor',
    file: `dist/index.js`,
    format: 'umd',
    sourcemap: true,
  },
  plugins: [
    nodeResolve(),
    commonjs(),
    typescript({
      tsconfigOverride: {
        compilerOptions: {
          declaration: false,
        },
      },
    }),
    babel({
      extensions: [".js", ".ts"],
      exclude: "node_modules/**",
      babelHelpers: 'bundled',
      presets: [
        [
          '@babel/preset-env',
          {
            modules: false,
            useBuiltIns: 'usage',
            corejs: 3,
          },
        ],
      ]
    }),
    terser(),
  ],
};

src/main.ts

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
import TextStyle from '@tiptap/extension-text-style';
import Color from '@tiptap/extension-color';
export let createEditor = (elementClass: string, initHtml: string) => {
    Color.configure({
        types: ['textStyle'],
    });
    let tipEditor=new Editor({
        element: document.querySelector(elementClass),
        extensions: [
          StarterKit,
          TextStyle,
          Color
        ],
        content: initHtml,
        autofocus: true,
        editable: true,
        injectCSS: false,
      });
      //console.dir(tipEditor.commands.setColor('#ff0000'));
      return tipEditor;
};

打包

npm run build

使用

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">

  <style>
    .tiptap {
    margin-top: 0.75em;
  }

  ul,
  ol {
    padding: 0 1rem;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    line-height: 1.1;
  }

  code {
    background-color: rgba(#616161, 0.1);
    color: #616161;
  }

  pre {
    background: #0D0D0D;
    color: #FFF;
    font-family: 'JetBrainsMono', monospace;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;

    code {
      color: inherit;
      padding: 0;
      background: none;
      font-size: 0.8rem;
    }
  }

  img {
    max-width: 100%;
    height: auto;
  }

  blockquote {
    padding-left: 1rem;
    border-left: 2px solid rgba(#0D0D0D, 0.1);
  }

  hr {
    border: none;
    border-top: 2px solid rgba(#0D0D0D, 0.1);
    margin: 2rem 0;
  }
  </style>
</head>
<body>
  <div id="app" class="editor">
    
  </div>


  <div id="app" class="editor2">
    
  </div>

  <div class="toolbar">
    <input type="button" value="加粗" class="btn" onclick="setBold()">
    <input type="button" value="设置颜色" class="btn" onclick="setColor('#FBBC88')">
  </div>
</body>
 

  <!-- import JavaScript -->
  <script src="dist/index.js"></script>
 
  <script>
   
    let myEditor = window.tipTapEditor.createEditor(".editor",'<h2> Hi there, </h2> <p> this is a <em>basic</em> example of <strong>tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists: </p> <ul> <li> That’s a bullet list with one … </li> <li> … or two list items. </li> </ul> <p> Isn’t that great? And all of that is editable. But wait, there’s more. Let’s try a code block: </p> <pre><code class="language-css">body { display: none; }</code></pre> <p> I know, I know, this is impressive. It’s only the tip of the iceberg though. Give it a try and click a little bit around. Don’t forget to check the other examples too. </p> <blockquote> Wow, that’s amazing. Good work, boy! 👏 <br /> — Mom </blockquote>');
    let myEditor2 = window.tipTapEditor.createEditor(".editor2","<p>Hello World</p>");
    

    function setBold(){
        myEditor.chain().focus().toggleBold().run();
    }
    function setColor(colorValue){
        myEditor.commands.setColor(colorValue);
    }
    function insertContent(){
 // myEditor.chain().focus().toggleBold().run();
 
  myEditor2.chain()
  .focus()
  .command(({ tr }) => {
    // manipulate the transaction
    tr.insertText('hey1, that’s cool!')

    return true
  })
  .run();
    };
    
  </script>
  
</html>