1.0.11 • Published 1 year ago
qkeditor v1.0.11
qkeditor
介绍
quick editor。一个简单灵活的富文本编辑工具。
https://github.com/Jhin926/qkeditor
安装教程
npm i qkeditor -S
<script src="qkeditor.common.js"></script>
使用说明
// new QkEditor('qk-editor') , 参数是作为富文本的节点的id
// React
import QkEditor from 'qkeditor';
const [editorInstance, setEditorInstance] = useState(null);
useEffect(() => {
setEditorInstance(new QkEditor('qk-editor'));
}, []);
// Vue
import QkEditor from 'qkeditor';
this.editorInstance = new QkEditor('qk-editor');
// html
const editorInstance = new QkEditor('qk-editor');
API
// 通过QkEditor实例来调用QkEditor方法;
// 设置文本节点的样式。
editorInstance.setTextStyle('span', {'color': 'red'});
// 设置超文本链接
editorInstance.setTextStyle('a', null, { href, target: '_blank' });
// 设置块级节点的样式。
editorInstance.setParagraphStyle('text-align', 'center');
/**
* 插入dom节点。
*/
// 1.传节点tagName, 属性, 样式。
editorInstance.insertElement('img', { src: 'http://xxx.com/xxx.jpg' }, { margin: '20px 0' });
editorInstance.insertElement('hr', {}, { margin: '10px 0' });
// 2.亦可直接插入dom节点
const line = document.createElement('hr');
editorInstance.insertElement(line, {}, { margin: '10px 0' });
/**
* 清除富文本内容
*/
editorInstance.clear();
/**
* 设置编辑器内容
* 参数为富文本字符串
*/
const htmlStr="<div>默认文本</div>";
editorInstance.setEditorContent(htmlStr);