Code Monkey home page Code Monkey logo

aieditor's Introduction

AiEditor - An open source AI-powered rich text editor | Product Hunt

An AI-Powered rich text editor

Out-of-the-box, Fully Framework Supported, Markdown Friendly

Start following and using AIEditor

Give us a star so that you can be notified in time when we release new versions.

What is AIEditor

AiEditor is a next-generation rich text editor for AI. It is based on Web Component and supports almost any front-end framework such as Vue, React, Angular, etc. It is compatible with PC Web and mobiles, and provides two themes: light and dark. In addition, it also provides flexible configuration, and developers can easily use it to develop any text editing application.

For more information about AiEditor, please visit the official website: https://aieditor.dev

What makes AIEditor different

1. AI-Powered editor

The goal of AIEditor is to create a rich text editor that is completely driven by AI, and supports docking with any large model, including private large models. Allow users to use their own private large model ApiKey. Not only that, all AI functions of AIEditor allow users to customize their own prompts and extended AI menus.

2. Simple, friendly, and easy to use

AIEditor is developed based on Web Component and supports integration with any mainstream front-end framework. AIEditor uses the more friendly LGPL open source protocol and is used through npm i aieditor, without worrying about the GPL infection problem that may be caused by the GPL protocol.

3. In addition to the open source version, a commercial version is also available

In addition to the open source version, we also provide a more powerful commercial version, which does not limit the number of users or the number of applications. For more comparisons of commercial versions, please refer to here: https://aieditor.dev/versions.html

Online Demo

Completed

  • Basics: Title, body, font, font size, bold, italic, underline, strikethrough, link, inline code, superscript, subscript, dividing line, quote, print
  • Enhanced: Undo, Redo, Format brush, Eraser, To-do list, font color, background color, Emoji expression, alignment, line height, ordered (unordered) list, paragraph indent, forced line break
  • Attachment: Supports image, video, file functions, supports select upload, paste upload, drag upload, support drag resize...
  • Code: Inline code, code block, language type selection, AI automatic comment, AI code explanation...
  • Table: Left increase right increase, left decrease right decrease, top increase and bottom increase, top decrease and bottom decrease, merge cells, unmerge
  • Markdown: Title, quote, table, image, code block, Highlight block (similar to vuepress :::), various lists, bold, italic, strikethrough...
  • AI: AI continuation, AI optimization, AI proofreading, AI translation, custom AI menu and prompts
  • More: internationalization, light theme, dark theme, mobile phone adaptation, full screen editing, @XXX (mention)...
  • Modern UI style similar to Tencent Documents

Under development...

  • AI image insertion (AI text-to-image)
  • AI image generation (AI image-to-image)
  • AI one-click typesetting
  • Further enhance the paste function
  • Automatically obtain thumbnails when uploading videos
  • WORD import and export
  • PDF export, PDF preview
  • Notion-like drag and drop features

Quick start

Visit the official website: https://aieditor.dev/getting-started.html

aieditor's People

Contributors

ashuicoder avatar ben-ben2018 avatar eltociear avatar monksoul avatar yangfuhai avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

aieditor's Issues

上传图片时允许自定义请求参数image=>files

原始请求:
7174fddaaa335cc23017fc95727d0f41

请求后端时,参数为image

期望增加一个属性,可以替换这个image,如改为 files。

因为后端接口是现成的,跟这个参数可能不匹配。

目前只测试了图片上传,附件上传和视频上传如果也是一样的,期待能一起调整。

自定义大语言模型时支持Stream流的自定义接收message

image
在自定义大语言模型时使用的是http stream流返回,通过messageParser时每次的body都会被获取转化,造成了重复,能否在自定义接口提供支持stream流的配置,或者支持message自定义获取返回值

可以支持传入onMessage去处理body内容,再通过messageParser转为aimessage

AI 翻译会出错,而且复制粘贴时,无法粘贴图片。

试用了一下,目前还存在3个大问题希望后续作者能改善:

1、AI翻译时会破坏格式,同时翻译内容会出错,建议可以自定义国内或免费的翻译API接口功能。
2、从网页上复制,再到AiEditor中粘贴时,只能粘贴出文字内容,无法粘贴图片或其它格式。
3、后续可否打包成 exe 或 单文件本地运行?

目前很棒的功能:
1、格式刷功能。
2、字体选择和高亮颜色选择。
3、集成AI功能(还需进一步优化),最好还加上代码补充注释功能。

谢谢!

After trying it out, there are still three big problems that I hope the author can improve in the future:

  1. AI translation will destroy the format and the translation content will be wrong. It is recommended to customize the domestic or free translation API interface function.
  2. When copying from a web page and pasting it into AiEditor, only text content can be pasted, and pictures or other formats cannot be pasted.
  3. Can it be packaged into an exe or a single file and run locally?

Great features so far:

  1. Format brush function.
  2. Font selection and highlight color selection.
  3. Integrate AI functions (needs further optimization), and it is best to add code supplementary annotation functions.

Thanks!

处理一下空值问题

默认值会有一个“

”的空值,在表单校验必填中其实什么也没输入,但是校验能通过

[bug] `ai.model.xinghuo.urlSignatureAlgorithm` failure to perform

The document is described as follows :

new AiEditor({
    element: "#aiEditor",
    ai:{
        model:{
            xinghuo:{
                appId: "****",
                 urlSignatureAlgorithm: async (model)=>{
                    // 通过后端进行 URL 签名,并返回签名完成的 URL 地址
                    return await fetch("/your-path/model?appId="+model.appId)
                       .then(resp=>resp.json)
                       .then(json=>json.url)
                }
            }
        }
    },
})

The type of urlSignatureAlgorithm here is (model: XingHuoModel) => Promise<string>

https://github.com/aieditor-team/AiEditor/blob/main/src/ai/xinghuo/XingHuoModel.ts#L40

    startWithProcessor(selectedText: string, prompt: string, processor: AiMessageProcessor): void {
        const url = this.urlSignatureAlgorithm ? this.urlSignatureAlgorithm(this) : this.createUrl();
        this.socket = new XingHuoSocket(url, processor, this.appId, this.version);
        for (let listener of this.listeners) {
            this.socket.addListener(listener);
        }
        this.socket.start(`${selectedText}\n${prompt}`)
    }

Here, there is no waiting for the Promise to be evaluated, so it is impossible to obtain the pre-fetched result.

Markdown format empty table validation failure

|  |  |
| --- | --- |
|  |  |

1
| 1 |  |
| --- | --- |
|  |  |

The above example raises the following error:
输入图片说明

error: Uncaught (in promise) RangeError: Invalid content for node tableHeader: <>

he following example is normal.

| 1 |  |
| --- | --- |
|  |  |

1

@yangfuhai

会支持 AI 模型切换和配置么?

项目挺不错的,我在找一个自用的富文本编辑器,目前看到是星火的,希望能加一个切换其他模型的,方便对比内容。

如果支持,我可以帮忙把其他模型接进来,这是我写的 通用 AI SDK 模块,但可以直接将代码集成进来,而不是模块。

可参考我给同类的 unit-mesh/b3 项目,就是直接代码迁移过去使用的。

html视频标签渲染错误

  1. 版本 1.0.0-beta.9
  2. 代码:
onMounted(() => {
 aiEditor = new AiEditor({
   theme: isDark.value ? 'dark' : 'light',
   element: editorRef.value as Element,
   placeholder: '点击输入内容...',
   content:
     '<video controls="true" poster="" width="350"><source src="http://127.0.0.1:5020/storage/2023-12/15/1702605335727.mp4"></video>'
 })

})
  1. 渲染结果,视频src为null:
image

图片参数

image

可参考下wangeditor

image中的defaultSize不应该是number类型,比如说我需要个百分比,你这边给的默认参数是px

本项目的LGPL许可是否能用于商业项目,并对公众开放

一直不理解LGPL,请大佬解惑下。

看到这个项目感觉很不错,但是用的LGPL许可,不太清楚是否能用于自己的项目。

使用场景是吧aieditor通过npm引入到我的web项目中(不涉及对aieditor的修改),使用vue框架打包发布,然后提供给互联网上的用户使用。

疑惑1:这属于静态链接,还是动态链接?

疑惑2:我是否要开源我自己的web项目?

疑惑3:是否需要在我的web项目中提供aieditor的github链接以及LGPL协议原文?

You may need an additional loader to handle the result of these loaders.

Module parse failed: Unexpected token (16:28)
File was processed with these loaders:

  • ./node_modules/cache-loader/dist/cjs.js
  • ./node_modules/vue-loader/lib/index.js
    You may need an additional loader to handle the result of these loaders.
    | onMounted(() => {
    | new AiEditor({
  element: divRef.value as Element,

| placeholder: "点击输入内容...",
| content: 'AiEditor 是一个面向 AI 的开源富文本编辑器。 ',

uploaderEvent的onUploadBefore

现在感觉onUploadBefore这个钩子没用,希望能做成return false就会阻止上传,比如图片上传的太大了就要取消上传

希望能加入自定义接口

场景应该是垂直行业内部编辑功能,希望能调用接口来补全语句,或者根据一些内部文档来生成一些段落等!

图片上传设置uploadFormName参数无效

版本:"aieditor": "^1.0.0"

问题现象:
image

提示参数uploadFormName不存在,在实际上传的时候也没有修改成功。

期望:uploadFormName设置的参数能替换默认的image值

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.