# 百度编辑器

img

# 基本使用

参数 说明
参数一 表单id,
参数二 ueditor 的选项,比如可以设置按钮类型,ueditor 编辑器的属性都可以通过函数的第二个参数设置
参数三 初始化后执行的回调函数
<textarea id="container" style="height:300px;width:100%;"></textarea>
<script>
    require(['hdjs'], function (hdjs) {
        hdjs.ueditor('container', {hash: 2, data: 'hd'}, function (editor) {
            console.log('编辑器执行后的回调方法1')
        });
    })
</script>
<div>
    <textarea id="hdphp" style="height:300px;width:100%;"></textarea>
</div>
<script>
    require(['hdjs','bootstrap'], function (hdjs) {
        hdjs.ueditor('hdphp', {
            toolbars: [['fullscreen', 'source', 'hdimage', 'preview']],
        }, function (editor) {
            console.log('编辑器执行后的回调方法2')
        });
    })
</script>

# Vue.js中使用

<div id="app">
    <textarea id="container" style="height:300px;width:100%;" v-model="field.content"></textarea>
</div>
<script>
    require(['vue','hdjs'], function (Vue,hdjs) {
        var vm = new Vue({
            el: '#app',
            data: {
                field: {content:''},
            },
            mounted() {
                //图文编辑器
                var This = this;
                hdjs.ueditor('container', {}, function (editor) {
                    //监听内容更改
					editor.addListener('contentChange', function () {
						vm.$set(vm.field, 'content', editor.getContent());
					});
					//监听vue数据
					vm.$watch('field', function (item) {
						if (editor && editor.getContent() != item.content) {
							editor.setContent(item.content ? item.content : '');
						}
					});
                    //失去焦点时处罚
					editor.addListener('blur', function () {
						vm.$set(vm.field, 'content', editor.getContent());
					});
					editor.addListener('clearRange', function () {
						vm.$set(vm.field, 'content', editor.getContent());
					});
                });
            }
        })
    })
</script>

# editor.md

editor.md 是开源在线 Markdown 编辑器,在原功能上增加了粘贴、拖放上传图片功能,细节可以参考 Editor.md官网

aa

# 前台

<div id="editormd">
	<textarea style="display:none;"></textarea>
</div>
<script>
	require(['hdjs'], function (hdjs) {
		hdjs.editormd("editormd", {
			width: '100%',
			height: 300,
			toolbarIcons : function() {
				return [
					"bold", "del", "italic", "quote","|",
					"list-ul", "list-ol", "hr", "|",
					"link", "hdimage", "code-block", "|",
					"watch", "preview", "fullscreen"
				]
			},
            //后台上传地址,默认为 hdjs配置项window.hdjs.uploader 
            server:'',
			//editor.md库位置
			path: "{{asset('org/hdjs')}}/package/editor.md/lib/"
		});
	});
</script>
  • laravel等框架使用是在 head 标签添加

  • <meta name="csrf-token" content="{{ csrf_token() }}">
    
  • 系统用 window.editormd (id值) 记录编辑器对象,可以使用editormd编辑器系统方法了,比如选择内容等。

# 后台

粘贴上传是BASE64格式需要特殊处理一下,下面是Laravel框架的代码,上传功能使用的是 Laravel-upload组件

...
public function upload(Request $request)
{
    //普通上传
    if ($request->file('file')) {
		$event = new UploadEvent($request->file('file'));
		event($event);
		#上传成功的文件
		return ['file' => url($event->getFile()), 'code' => 0];
    } elseif ($content = $request->input('file')) {
		//粘贴上传BASE64图片,如editor.md编辑器中的使用
		$imgdata = substr($content, strpos($content, ",") + 1);
		$decodedData = base64_decode($imgdata);
		$fileName = 'uploads/' . date('ym/d') . '/' . str_random(10) . microtime(true) . '.jpeg';
		file_put_contents($fileName, $decodedData);
		return ['file' => url($fileName), 'code' => 0];
    }
}

# 代码高亮

<div class="markdown" id="content">
    <textarea hidden># 这里是markdown内容 </textarea>
</div>
<script>
require(['hdjs', 'marked', 'MarkdownIt', 'highlight'], function (hdjs, marked, MarkdownIt) {
    //转markdown为html
    let md = new MarkdownIt();
    $("#content").html(md.render($("#content textarea").val()));
    
    //代码高亮
    $('pre code').each(function (i, block) {
        hljs.highlightBlock(block);
    });
})
</script>

# SimpleMDE

官网:https://simplemde.com/

# 使用示例

<textarea style="display:none;" id="content"></textarea>
<script>
    require(['hdjs'], function (hdjs) {
        hdjs.simplemdeMarkdownEditor('content')
    });
</script>

# simditor

simditor 是一个简单的 WYSIWYG 编辑器,更多细节使用请查看 官方网站

img

# 前台

<textarea style="display:none;" id="editormd"></textarea>
<script>
require(['hdjs'], function (hdjs) {
            hdjs.simditor({
                textarea: $('#editor'),
                upload: {
                    url: '',//后台上传地址
                    params: {_token: '{{ csrf_token() }}'},//POST参数
                    fileKey: 'upload_file',
                    connectionCount: 3,
                    leaveConfirm: '文件上传中,关闭此页面将取消上传。'
                }
            })
})
</script>

# 后台

后台返回以下JSON格式数据

$json = ['file' =>'php/'. $file, 'code' => 0];
die(json_encode($json));