在table如何嵌套wangeditor3

插入代码

不理解为什么作者把代码类型选择给去掉了，所以只能自己插入代码选择了

打开源码 2058 行，插入下面语句

this.codetype = editor.customConfig.codeType != null ? editor.customConfig.codeType.type : null

你将会看到这样

然后滚到 Code的_createPanel函数，大概在2100行，插入一下代码

var select = ""

if (editor.customConfig.codeType != null) {

var title = editor.customConfig.codeType.title == null ? "请选择代码类型:" : editor.customConfig.codeType.title

var select = "<div class='codeType'><span>" + title + "</span><select>"

for (var i = 0 i < _this.codetype.length i++) {

select = select + "<option value='" + _this.codetype[i] + "'>" + _this.codetype[i] + "</option>"

}

select = select + "</select></div>"

}

修改生成模板

tpl: '<div>\n' + select + '<textarea id="' + textId + '" style="height:145px">' + value +

'</textarea>\n                        <div class="w-e-button-container">\n                            <button id="' +

btnId +

'" class="right">\u63D2\u5165</button>\n                        </div>\n                    <div>',

你将会看到

继续翻到 Code的_insertCode函数，修改为

_insertCode: function _insertCode(value) {

var _this = this

var editor = this.editor

var val = _this.codetype != null ? $('.codeType select').val() : ""

editor.cmd.do('insertHTML', '<pre><code class="' + val + '">' + value + '</code></pre><p><br></p>')

},

它是这样的

ok，接下来使用前配置一下

var E = window.wangEditor

var editor = new E('#div1')

editor.customConfig.codeType={

title:"选择代码类型:",

type:[

"c++","php","c#","java"

]

}

editor.create()

然后是浏览结果

上传图片

先来一段简单的后端代码~

<?php

$fileTypes = array('jpg', 'jpeg', 'png','gif') 

$targetFolder = '/upload/'

$targetPath = $_SERVER['DOCUMENT_ROOT'] . '/' .ltrim($targetFolder,'/') 

$domainName = 'http://'.$_SERVER['SERVER_NAME']

if (!empty($_FILES)) {

 $urls = array()

foreach($_FILES as $v){

$file_name = iconv("UTF-8","gb2312", $v['name'])

$filenames= explode(".",$file_name)

$tempFile = $v['tmp_name']

$rand = rand()

$name = time().$rand.".".$filenames[count($filenames)-1]

$targetFile = rtrim($targetPath,'/').'/' . $name 

$type=pathinfo($v['name'])

if (!in_array($type,$fileTypes)){

move_uploaded_file($tempFile,iconv("UTF-8","gb2312", $targetFile))

array_push($urls,$domainName.$targetFolder.$name)

}

}

echo json_encode(array('errno'=>0,'data'=>$urls))

}else{

echo json_encode(array('errno'=>1))

}

1）把当前的编辑器form表单提交修改为Javascript方式提交。

<form action="index.php" method="POST" name="myForm">

form表单加入name元素。

<button class="btn2">提交</button>

submit提交改为button方式。

<script type="text/javascript">

function submitForm(){

document.myForm.action = document.myForm.action

document.myForm.submit()

}

$(".btn2").click(function(){

submitForm()

})

</script>

2）通过UEditor API中的editor.execCommand( 'source')方法事件，在源代码状态提交时切换为编辑模式。

<script type="text/javascript">

var ue = UE.getEditor('editor',{

toolbars: [["undo","redo","|","bold","italic","underline","strikethrough","|","fontsize","forecolor","backcolor","|","removeformat","|","selectall","cleardoc","source","|","unlink","link","|","insertimage"]],wordCount:false

})

function submitForm(){

document.myForm.action = document.myForm.action

document.myForm.submit()

}

$(".btn2").click(function(){

ue.execCommand('source')

submitForm()

})

</script>

---