ueditorplus/index.html at master · mo3408/ueditorplus · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<!doctype html>
<html>
<head>
    <title>UEditorPlus 完整演示</title>
    <meta name="viewport" content="width=device-width, minimum-scale=0.5, maximum-scale=5, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script src="_examples/example.js"></script>
    <script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="editor_api.js"></script>
    <script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>
    <script src="plugins/demo/demo.js"></script>
    <script>
        // window.UEDITOR_CONFIG.toolbars[0].push('undo');
    </script>
    <style>
        :root {
            /*--ueditor-top-offset: 20px;*/
        }
    </style>
    <link rel="stylesheet" href="_examples/style.css"/>
</head>
<body class="demo-editor-page">
<div>
    <h1>完整示例</h1>
    <div>
        <script id="editor" type="text/plain" style="height:300px;">
<h1>
    你好 UEditorPlus
</h1>
<p>
    UEditorPlus 是基于 UEditor 二次开发的富文本编辑器，让 UEditor <span style="color: #E36C09;">焕<span style="color: #0070C0;">然</span><span style="color: #31859B;"><span style="color: #00B050;">一</span><span style="color: #FF0000;">新</span></span></span>
</p>

<table data-sort="sortDisabled">
    <tbody>
        <tr class="firstRow">
            <td valign="top" style="word-break: break-all;" rowspan="1" colspan="3">
                我是表格
            </td>
        </tr>
        <tr>
            <td width="273" valign="top" style="word-break: break-all;">
                如果
            </td>
            <td width="273" valign="top" style="word-break: break-all;">
                有一天
            </td>
            <td width="273" valign="top" style="word-break: break-all;">
                我离开了
            </td>
        </tr>
        <tr>
            <td valign="top" colspan="1" rowspan="1" style="word-break: break-all;">
                怎么才能
            </td>
            <td valign="top" colspan="1" rowspan="1" style="word-break: break-all;">
                证明我
            </td>
            <td valign="top" colspan="1" rowspan="1" style="word-break: break-all;">
                曾经来过
            </td>
        </tr>
    </tbody>
</table>
<pre class="brush:html;toolbar:false">&lt;div&gt;
  &lt;span&gt;这里是HTML标签&lt;/span&gt;
&lt;/div&gt;</pre>
<h2>
公式支持
</h2>
<p>
    <img src="https://r.latexeasy.com/image.svg?%5Cint%20%5Cfrac%7B1%7D%7Bx%7D%20dx%20%3D%20%5Cln%20%5Cleft%7C%20x%20%5Cright%7C%20%2B%20C"
      data-formula-image="%5Cint%20%5Cfrac%7B1%7D%7Bx%7D%20dx%20%3D%20%5Cln%20%5Cleft%7C%20x%20%5Cright%7C%20%2B%20C"/>
</p>
<p>
    <br/>
</p>

        </script>
    </div>
    <div id="btns" style="margin-top:20px;height:2000px;">
        <div>

            <button onclick="alert(UE.getEditor('editor').getAllHtml())">获得整个html的内容</button>
            <button onclick="alert(UE.getEditor('editor').getContent())">获得内容</button>
            <button onclick="UE.getEditor('editor').setContent('<p>欢迎使用 UEditorPlus</p>', false)">写入内容</button>
            <button onclick="UE.getEditor('editor').setContent('<p>欢迎使用 UEditorPlus</p>', true)">追加内容</button>
            <button onclick="alert(UE.getEditor('editor').getContentTxt())">获得纯文本</button>
            <button onclick="alert(UE.getEditor('editor').getPlainTxt())">获得带格式的纯文本</button>
            <button onclick="alert(UE.getEditor('editor').hasContents())">判断是否有内容</button>
            <button onclick="UE.getEditor('editor').focus()">使编辑器获得焦点</button>
            <button onmousedown="isFocus()">编辑器是否获得焦点</button>
            <button onmousedown="setBlur()">编辑器失去焦点</button>
            <button onclick="getSelectText()">获得当前选中的文本</button>
            <button onclick="UE.getEditor('editor').execCommand('insertHtml', '插入的内容')">插入内容</button>
            <button onclick="UE.getEditor('editor').setEnabled()">设定可编辑</button>
            <button onclick="UE.getEditor('editor').setDisabled('fullscreen')">设定不可编辑</button>
            <button onclick="UE.getEditor('editor').setHide()">隐藏编辑器</button>
            <button onclick="UE.getEditor('editor').setShow()">显示编辑器</button>
            <button onclick="UE.getEditor('editor').setHeight(300)">设置固定高度</button>
            <button onclick="UE.getEditor('editor')">创建编辑器</button>
            <button onclick="UE.getEditor('editor').destroy()">销毁编辑器</button>
            <button onclick="alert( UE.getEditor('editor').execCommand('get_auto_save_content') )">草稿箱-获取</button>
            <button onclick="UE.getEditor('editor').execCommand('clear_auto_save_content'); alert('已清空草稿箱')">草稿箱-清空
            </button>
            <button onclick="UE.getEditor('editor').execCommand('set_auto_save_content'); alert('已保存')">草稿箱-立即保存
            </button>
            <button onclick="UE.getEditor('editor').execCommand('auto_save_restore')">草稿箱-恢复到编辑器</button>
        </div>
    </div>

    <script type="text/javascript">
        var ue = UE.getEditor('editor',{
            // autoHeightEnabled: false,
            // retainOnlyLabelPasted: true,
            allowDivTransToP: false,
            rgb2Hex: true,
            ai:{
               driver: 'DeepSeek',
               // 大模型对接配置
               driverConfig: {
                   // 模型API地址，留空使用默认
                   // url: 'https://open.bigmodel.cn/api/paas/v4/chat/completions',
                   // 大模型平台Key
                   key: 'sk-a61c190d72c64840be14302762a040d9',
                   // 大模型平台模型
                   model: 'deepseek-v4-flash',
               },
            },aiFunctions: [
            {
                name: 'translate',
                text: '<i class="edui-iconfont edui-icon-translate"></i> 翻译',
                systemPrompt: "你是一个专业的翻译专家，擅长在中文和英文之间进行准确、自然的翻译。请将提供的文本翻译成目标语言，保持原文的含义、语气和上下文。只返回翻译后的内容，不要添加任何额外说明。",
                prompt: '{selectText}',
                enable: function (param) {
                    return true;
                }
            },
            {
                name: 'continueWrite',
                text: '<i class="edui-iconfont edui-icon-continue-write"></i> 续写',
                systemPrompt: "你是一个优秀的内容创作者，能够根据用户选中的文本进行自然流畅的续写。请续写内容，使其与原有文本无缝衔接，并保持一致的风格和主题。只返回续写后的内容，不要添加任何额外说明。",
                prompt: '{selectText}',
                enable: function (param) {
                    return true;
                }
            },
            {
                name: 'summarize',
                text: '<i class="edui-iconfont edui-icon-text-shrink"></i> 简化内容',
                systemPrompt: "你是一个内容简化专家，能够将复杂的内容用简单易懂的语言表达出来。请简化提供的文本，使其更易理解，同时保留核心信息。只返回简化后的内容，不要添加任何额外说明。",
                prompt: '{selectText}',
                enable: function (param) {
                   return true;
                }
            },
            {
                name: 'extend',
                text: '<i class="edui-iconfont edui-icon-text-extend"></i> 丰富内容',
                systemPrompt: "你是一个内容扩展专家，能够将简短的内容进行扩展，增加细节和描述，使其更加丰富。请扩展提供的文本，添加相关细节、例子或解释，以增强内容的深度和吸引力。只返回扩展后的内容，不要添加任何额外说明。",
                prompt: '{selectText}',
                enable: function (param) {
                    // return !!param.selectText
                    return true;
                }
            },
            {
                name: 'optimizeWhole',
                text: '<i class="edui-iconfont edui-icon-robot"></i> 优化整篇内容',
                systemPrompt: "你是一个专业的写作优化专家，擅长提升文章的整体质量和可读性。请对提供的整篇文章进行润色和优化，包括但不限于：语法修正、结构调整、逻辑梳理、表达优化。确保文章流畅、清晰、有吸引力，同时保持原文的核心内容、意图和风格不变。可以适当添加Emoji表情来增强可读性，但不要过度使用。输出必须是有效的HTML内容（body部分），不要包含<html>或<body>标签本身，也不要添加任何额外的说明或注释。",
                prompt: '{html}',
                enable: function (param) {
                    return true;
                },
                param: {
                    showInsert: false,
                    showReplace: false,
                    showReplaceAll: true,
                },
            }
        ]
        });
        ue.on('contentchange', function () {
            // console.log('contentchange', ue.getContent());
        });

        function isFocus(e) {
            alert(UE.getEditor('editor').isFocus());
            UE.dom.domUtils.preventDefault(e)
        }

        function setBlur(e) {
            UE.getEditor('editor').blur();
            UE.dom.domUtils.preventDefault(e)
        }

        function getSelectText() {
            var range = UE.getEditor('editor').selection.getRange();
            range.select();
            var txt = UE.getEditor('editor').selection.getText();
            alert(txt)
        }
    </script>
</div>
</body>
</html>