知识库-主题与插件

在2.0中,新增加了主题与插件,极大的拓展了编辑器的可能

主题

主题可以自定义css,实现插件自定义样式。

参考

具体的class可以参考:【知识库

css变量可参考:【设计变量

小贴士

  • .cherry-previewer:markdown编辑器的预览css选择器

markdown编辑器-菜单

返回值会直接替换选中的值,如果没有选中,则直接插入到光标位置

参数

selection:当点击菜单的时候,选中的文本

instance:编辑器对象

类型定义

declare class Cherry {
    /**
     * 获取编辑区内的markdown源码内容
     * @returns markdown源码内容
     */
    getValue(): string;

    /**
     * 获取编辑区内的markdown源码内容
     * @returns {string} markdown源码内容
     */
    getMarkdown(): string;

    /**
     * 获取预览区内的html内容
     * @param {boolean} [wrapTheme=true] 是否在外层包裹主题class
     * @returns {string} html内容
     */
    getHtml(wrapTheme?: boolean): string;

    /**
     * 覆盖编辑区的内容
     * @param {string} content markdown内容
     * @param {boolean} keepCursor 是否保持光标位置
     */
    setValue(content: string, keepCursor?: boolean): void;

    /**
     * 在光标处或者指定行+偏移量插入内容
     * @param {string} content 被插入的文本
     * @param {boolean} [isSelect=false] 是否选中刚插入的内容
     * @param {[number, number]|false} [anchor=false] [x,y] 代表x+1行,y+1字符偏移量,默认false 会从光标处插入
     * @param {boolean} [focus=true] 保持编辑器处于focus状态
     */
    insert(content: string, isSelect?: boolean, anchor?: [number, number] | false, focus?: boolean): void;

    /**
     * 在光标处或者指定行+偏移量插入内容
     * @param {string} content 被插入的文本
     * @param {boolean} [isSelect=false] 是否选中刚插入的内容
     * @param {[number, number]|false} [anchor=false] [x,y] 代表x+1行,y+1字符偏移量,默认false 会从光标处插入
     * @param {boolean} [focus=true] 保持编辑器处于focus状态
     * @returns
     */
    insertValue(content: string, isSelect?: boolean, anchor?: [number, number] | false, focus?: boolean): void;

    /**
     * 覆盖编辑区的内容
     * @param {string} content markdown内容
     * @param {boolean} [keepCursor=false] 是否保持光标位置
     */
    setMarkdown(content: string, keepCursor?: boolean): void;

}

declare const selection: string;
declare const instance: Cherry;

实例

举个例子,比如说一个普通按钮,可处理点击事件,点击时做相应的操作(比如往编辑区插入内容,或者修改预览区内容等),代码如下:

// 加粗斜体
return `***${selection}***`;

小贴士

如果是一个简单的字符串处理,是一个同步方法,可以直接将替换的内容return回来,如果是一个异步方法,可以使用instance.insert方法,在光标中插入

markdown编辑器-语法拓展

此插件可以通过正则表达式实现语法上的拓展

未完待续。。。

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇